CanvasFunctionsCanopy

cms_image

The cms_image function is used to define a image component which can be edited on the Canopy editor.

{{ cms_image(name, { url: '...', alt_text: '...', class: '...'}) }}
ArgumentDescriptionData Type
nameThe element identifierString
url (optional)Link to an image to displayString
alt_text (optional)Descriptive text for accessibility and SEOString
class (optional)A space-separated list of CSS classes to style the image componentString

The class variable is only accessible in the code. All other variables are available in the Canopy editor.

Image component template

<img src={{ url }} alt={{ alt_text }} class={{ class }} />

Rendered HTML output

<img
  src="https://placehold.co/300x200"
  alt="Placeholder Image"
  class="rounded-lg shadow-lg"
/>

Example

index.html
{{ cms_image('myimage', { url: 'https://placehold.co/300x200', alt_text: 'Placeholder Image', class: 'rounded-lg shadow-lg' }) }}

Last updated on