Dittofi
  • Tutorials
    • Tutorial Index
    • Quick Start
    • Dittofi Essentials
      • Part 1: Frontend terms and concepts
      • Part 2: Backend terms and concepts
      • Part 3: Connecting frontend and backend
      • Part 4: Dittofi app structure
    • Dittofi App Design
      • 🏗️App architecture 101
      • ◼️Backend app development 101
      • 🟪Frontend app development 101
      • 🔰(optional) Web developer beginner series
  • Learn Frontend
    • 👨‍💻Getting Started
      • Welcome to Dittofi
      • Intro to the Dittofi Design Studio (Frontend)
    • 🟩Pages
    • 🟪Elements
      • Types
        • Button Element
        • Div Block Element
        • Form Block Element
        • Link Block Element
        • List Element
        • Modal Box Element
        • Tabs Element
        • Columns Element
        • Image Element
      • Partials
      • Prefabs
      • Custom
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟨Events
      • 🟨External
        • HTTP Request
        • Run Endpoint
      • 🟨Flow Control
        • Condition
        • Run Action
        • Loop
        • Sleep
      • 🟨Maths
        • Add
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟨Navigation
        • Open Page
      • 🟨Notifications
        • Alert
        • Confirm
      • 🟨Other
        • Copy To Clipboard
        • Run Custom
      • 🟨Text
        • Concat
        • Contains
        • Ends With
        • I Contains
        • I Ends With
        • I Starts With
        • LTrim
        • RTrim
        • Text To Upper
        • Text To Lower
        • Trim
        • Starts With
      • 🟨Variables
        • Set Field
        • Remove Field
      • Validate
    • 🟦CSS Layouts
      • Holy Grail Layout
      • Side Bar Layout
      • Sticky Footer Layout
      • Sticky Header Layout
      • CSS Frameworks
    • 🔲CSS Frameworks
    • Component Libraries
    • Meta Attributes
  • Learn Backend
    • 🖥️Getting Started
      • Intro to Data
      • Intro to APIs
      • Build your first custom API
      • Actions & Events
    • 🟫Back-End Actions
    • 🟩Custom Models
      • 🟩Attributes
        • Array
        • Checkbox
        • Custom Model
        • Collection (Custom Model)
        • Collection (System Custom Model)
        • Date
        • Datetime
        • File
        • Number
        • Number With Decimal
        • Json
        • Text
    • ◼️Data Models
      • Database Fundamentals
        • Database relationships
      • ◼️Columns
        • Attachment
        • Auto Increment
        • Checkbox
        • Date
        • Datetime
        • Duration
        • Email
        • Long text
        • Link to another record field
        • Number
        • Number with decimal
        • Password
        • Phone number
        • Percent
        • Price
        • Rating
        • Single select
        • Single line text
        • URL
    • 🟥Events
      • 🟦Arrays
        • Append
        • Array Pop
        • At
        • Length
        • Prepend
        • Range
      • 🟦Conversions
        • Base64 Encode
        • Base64 Decode
        • Json Decode
        • Json Encode
        • Path Escape
        • Path Unescape
        • Query Escape
        • Query String Parse
        • Query Unescape
        • To Bool
        • To Float
        • To Int
        • To Str
        • Yaml Encode
        • Yaml Decode
      • 🟦Database Requests
        • Create
        • Create Or Update
        • Delete
        • Has Record
        • Read Event
        • Update
      • 🟦External
        • HTTP Request
        • SFTP Download
        • SFTP Upload
      • 🟦Files
        • CSV Reader Event
        • CSV Writer Event
        • File Read
        • File Save
        • File Size
        • File Type
        • JSON Reader
        • PDF Generator
      • 🟦Flow Control
        • Condition
        • Loop
        • Return
        • Run Action
        • Sleep
      • 🟦Notifications
        • Send Mail
        • Connect Websocket
        • Message Websocket
      • 🟦Maths
        • Add
        • Acos
        • Acosh
        • Asin
        • Asinh
        • Atan
        • Atanh
        • Cbrt
        • Ceil
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟦Security
        • Compare Password
        • JWT Decode
        • JWT Encode
        • Login
        • Logout Web User
        • Password Generator
        • Random Number
      • 🟦Time
        • Add Time
        • Day
        • Format Time
        • Minute
        • Nanosecond
        • Parse Time
        • Second
        • Time In
        • Year
        • Year Day
      • 🟦Text
        • Concat
        • Contains
        • Ends With
        • Execute Template
        • I Contains
        • I Ends With
        • I Starts With
        • Starts With
        • LTrim
        • RTrim
        • Replace
        • Regex Find All String
        • Regex Find String
        • Regex Match String
        • Trim
        • Text To Lower
        • Text To Upper
        • Text To Title
        • Url Getarg
      • 🟦Other
        • Assign
        • Run Custom
        • Redirect Web Page Event
        • Render Web Template Event
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟪Webservices
  • Templates
    • Two sided marketplace template
      • Introduction
        • Part I: Installing and setting up the marketplace template
        • Part II: Understanding what features are included in the marketplace template
        • Part III: Customizing your marketplace frontend without coding
        • Exploring Dittofi's marketplace API
      • Listings
        • How to create a marketplace listing
    • How to build a CRUD app
  • Third Party APIs
    • OAuth 2.0 APIs
      • Introduction To OAuth 2.0
      • Google OAuth 2.0 - PART I
      • Google OAuth 2.0 - PART II
  • Dittofi Admin
    • Your Account
      • Workspace Admin
      • Manage Billing
      • Connect a custom domain
      • How to use a discount code to Dittofi Pro
  • FAQ
    • API Generator
    • How to write custom SQL?
    • Why does my image not display?
    • How can I set up Google Analytics?
    • Exporting and deploying my frontend code
    • What is a partial and what is a prefab?
    • How to set up a basic mulit tenant app on Dittofi
    • How to write a custom endpoint in Dittofi
    • How to integrate Font Awesome into Dittofi
    • How can I set up Dittofi to run on my own private server?
    • How to add roles such as Super Admin, Admin, Manager & User
    • How to prevent duplicate records being added to the database
    • What to do when relation cannot be created because their is violating data in the referenced table
  • Change Logs
    • Dittofi Change Logs
Powered by GitBook
On this page
  • Adding Images
  • Image "Src" property
  • Image "Alt" property
  • Styling Images
  • Dynamic Images

Was this helpful?

  1. Learn Frontend
  2. Elements
  3. Types

Image Element

An overview of the Image component

PreviousColumns ElementNextPartials

Last updated 3 years ago

Was this helpful?

An image component is an image or an image placeholder that you can add to your page. It is not the same as a background image which is applied to other components such as Divs, Containers, LinkBlocks and so on.

In this tutorial you're going to learn:

  1. Adding images

  2. Image "Src" property

  3. Image "Alt" property

  4. Styling images

  5. Dynamic images

Adding Images

The image component can be searched for and added to the canvas from the components panel.

Image "Src" property

When you add the image to your page, you will see an image settings box popup.

To set a custom image, click the "T" symbol to the left hand side of the Src. This brings up a popup with four options on how to set a custom image. The four options are:

  • Literal value

  • Variable

  • Formula

  • Public Files

Let's take a look at how to use each of these options.

Literal value

The literal value is a fixed location of an image somewhere on the internet. For example, if you go to Google and search for "Free Images" you will get a list of results like the ones below.

If you right click on any image and click on "copy image address" as below:

You can then take the image address and paste it into the literal value box:

Variable

Using the Variable option, you can display images as variables. The most common example of when you would use this option is to show variable images for different user profiles. Another example is that you might want to display a list of blog posts, each with different images attached.

For a complete example of how to display variable user profile data read "displaying variable user profiles".

For a complete example of how to display a list of blog posts read "displaying a collection of blog posts".

Formula

Using the Formula option you can choose to conditionally display information base on different rules. For example, you might want to only display images that were uploaded after a certain date.

For a complete example of how to set this up, read "creating user profiles".

Public files

By clicking on the Public files option, this gives you the option to upload image files (PNG, JPG and SVG) that you want to display on your website or web app.

Once added to the page, you are able to see that the image source has updated to display the source of the image that you've uploaded.

Image "Alt" property

The image "Alt" property specifies an alternative text for an image if, for some reason, the image cannot be displayed. The most common reasons that an image might not be displayed are because of slow internet connection, an error in the "Src" property, or if the user uses a screen reader.

It is best practice to set a brief description of the image as an "Alt". This is helpful for both accessibility and for search engines to determine what the image is about.

You can specify the Alt property for each of your images from the Properties panel or from the Settings box.

Styling Images

You can style images using the Styles panel, the same way that you would style any other component.

Ditto Tip: Note, some styles do not apply to images such as background images or or the text properties.

Here are a few tips that you can use to style images.

Borders: borders can be used to give a stronger outline to your images.

Border Radius: with the border radius you can set the rounding of the corners of an image. For example, if you want to turn an image into a circle, you can set the border radius to 50%.

Drop Shadow: can be used to make the images look like they pop out of the page.

Dynamic Images

Under the image settings you get two quick options (1) Src and (2) Alt. The Src allows you to set the image source. The image source is the location of the image that you want to display to your users. By default the image source is set to pull a placeholder image from the link .

🟪
http://www.w3.org/2000/svg
Image component
Search and add an image component
Image settings popup
Adding a custom image
Google search results for "Free Images"
Copy image address
Changing an images literal value
Adding a public file
Image source has changed to read from the file upload
Image styles