Skip to main content

Adding an Image (Craft Assets)

Studies show that people remember 80% of what they see and only 20% what they read.

On the Internet, images are used for all kinds of reasons: to enhance websites, to illustrate stories, in ad displays, to present products or services, as stand-alone “a picture is worth a thousand words” meaning-rich tools, and sure, on social media.

To add an image to the field,

  1. Select Add Image option from the drop down.

Docusaurus

  1. Clicking on Add Image button will open the Craft Asset selection popup.

Docusaurus

  1. Select the image you want to add and click on the Select button. And that's it!!

Displaying an Image#

Displaying the selected image is very simple.

In your twig file, add

// entries.asset is the Craft CMS field name{{ entries.asset.render() }}

Rendering options#

The render() function accepts parameters which will be passed directly to the rendered output tag.

So for instance, the below code

// entries.asset is the Craft CMS field name{{ entries.asset.render({'class':'row-flex col-sm-3','loading':'eager','hello':'world'}) }}

will result in

<img srcset=... src=... class='row-flex col-sm-3' loading='eager' hello='world'/>

Having said that, there is an exception.

Setting the height and width of the output elements inline is not a commonly preferred approach. But if you have no choice, you can pass the width and height parameters along with an extra attribute called size, value of which should be set to true.

// entries.asset is the Craft CMS field name{{ entries.asset.render({'size':true,'width':'100px','height':'100px'}) }}

will result in

<img srcset=... src=... style='width:100px;height:100px;'/>

Available Twig Methods#

url() - Returns the source url.

type() - Returns string 'image'.

// entries.asset is the Craft CMS field name{{ entries.asset.url() }}