Image Element

Add an image to your content.

Image Properties

  1. Image: Clicking on select image opens the media manager. In the media manager you can select your image. You can either upload a new image (and automatically resize it), use an existing image of your site or just insert a direct URL (for example: https://example.com/images/test.jpg) of an image.
    Please make sure you have the permission to use and distribute the image!
  2. Image Alternate Text: Add an alternative text for screen readers and search engines. Strongly recommended
  3. Link Type: Set an optional link when clicking on the image.
Everything else is configured by the common general properties. 
Please make sure you have the permissions and licenses to use the images / media you upload. More information

See it in action

Christmas hut (Sample image)
Christmas hut (Sample image)
Christmas hut (Sample image)
Three image elements on a Grid Element.

Interactions and Accessibility

Make sure to set an descriptive image alternative text for accessibility and search engines.

Generated HTML


<div class="mame-element">
  <img src="..." alt="..." class="mame-image" style="..">
</details>

Style / CSS Selectors


.mame-image {
  /* All image elements */
}

JavaScript

Images are implemented in plain HTML 5 and CSS 3. They don't need any JavaScript to work properly.

Was this article helpful?