{{ cms_image(name, { url: '...', alt_text: '...', class: '...'}) }}
| Argument | Description | Data Type |
|---|---|---|
name | The element identifier | String |
url (optional) | Link to an image to display | String |
alt_text (optional) | Descriptive text for accessibility and SEO | String |
class (optional) | A space-separated list of CSS classes to style the image component | String |
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
{{ cms_image('myimage', { url: 'https://placehold.co/300x200', alt_text: 'Placeholder Image', class: 'rounded-lg shadow-lg' }) }}