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. 

See it in action

Christmas hut (Sample image)
Christmas hut (Sample image)
Christmas hut (Sample image)
Three image elements on a grid.

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?

Newsletter

You can unsubscribe at any time. For information about our privacy practices, please check the privacy policy.
Made with ❤ and Mame in the European Union.
Copyright (C) 2019 - 2021 mame.app. All Rights reserved.