Skip to main content

Adding an Image

Wadd an Image (Craft Assets)#

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

On the Internet, images are used for all kinds of reasons: to enhance websites, illustrate stories, enriching advertisments, presenting products or services, and stand-alone “a picture is worth a thousand words” after all.

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 src=... class='row-flex col-sm-3' loading='eager' hello='world'/>

However, there is an exception.

Setting the height and width of the output elements inline is not a commonly preferred approach. But if you have to do this, you can pass the 'width' and 'height' parameters along with an extra attribute called 'size', the 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 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() }}