Skip to content

Working with Images#

This chapter focuses on working with images in imperia templates. We will explore how to efficiently integrate, manage, and optimize images using Imperia CMS. We will also delve into the best practices for maintaining image accessibility and SEO.

The syntax, usage, and practical examples provided in this chapter should provide a solid foundation for effectively managing images in Imperia CMS.

Image Integration Basics#

Integrating images in Imperia CMS is made simple through the use of the Media Asset Management (MAM) system. It allows you to manage and embed images in your templates.

Let's look at a basic example of how to incorporate an image into a template:

<!--formstart-->

#IF(<!--XX-editmode-->)

<div>
  <img src="IMPERIA:image"></img>
</div>

#ELSE <!--Savemode-->

<div>
<img src="<!--XX-image-->"></img>
</div>

#ENDIF

<!--formend-->

In this template, the #IF(<!--XX-editmode-->) condition checks if the template is in edit mode. If it is, an image field is displayed where users can select an image. The src attribute of the <img> tag is set to "IMPERIA:image", which Imperia will replace with the selected image's source URL when the template is saved.

In the save mode, represented by the #ELSE condition, the image source URL and the alt text are dynamically replaced with the actual content entered during edit mode. The image source URL is fetched with the <!--XX-image--> tag. This displays the chosen image on the published webpage.

This basic example of image integration in Imperia CMS showcases how the system simplifies image management while also providing powerful features like automatic resizing. As we move forward in this chapter, we will dive deeper into more advanced topics and best practices for handling images in Imperia CMS.

Resizing Images#

While dealing with images in a web development context, one frequently encountered requirement is resizing. This could be to fit the image into a specific layout, to ensure consistency across multiple images, or simply to reduce the file size for faster loading.

In Imperia CMS, you can conveniently resize images directly in the HTML by specifying the width and height attributes in the <img> tag. For instance:

<img src="IMPERIA:image" width="400" height="300">

In the above example, the width and height attributes specify that the image should be resized to a width of 400 pixels and a height of 300 pixels. Imperia CMS will create a resized variant of the original image based on these dimensions.

It's important to note that this process involves cropping the image if the aspect ratio of the original image does not match the specified dimensions. By default, Imperia CMS uses the center of the image as the focal point when cropping. This means that if the original image is larger than the specified size, the central part of the image will be retained and the areas outside this central region will be discarded.

However, Imperia CMS also provides a feature to customize the focal point of the image. This is useful when the area of interest in the image is not in the center. Using the Imperia focus point function, you can select a specific part of the image that you want to remain visible after the resizing and cropping process.

Creating Multiple Resized Images#

In the modern web development landscape, it's common to require multiple versions of the same image for different purposes. For instance, you might need a smaller, square variant of an image to be used on teaser cards, or a different variant optimized for social media previews, such as on Instagram or Facebook.

Imperia CMS provides a powerful feature to handle such requirements using the ResizedVariants plugin in the processing instructions. This plugin allows you to specify different dimensions for different versions of the same image, and Imperia CMS will automatically generate these variants for you.

Here's a simple example of how this can be done:

<div>
  <img src="IMPERIA:image">
    <?imperia mam plugin ResizedVariants?>
    <?imperia mam plugin_params teaser_card:200x200?>
    <?imperia mam plugin_params instagram_preview:1080x1080?>
    <?imperia mam copy teaser_card_url:image_teaser_card?>
    <?imperia mam copy instagram_preview_url:image_instagram_preview?>
  </img>
  <input name="IMPERIA:image_teaser_card" type="hidden" />
  <input name="IMPERIA:image_instagram_preview" type="hidden" />
</div>

In this example, two additional variants of the original image are created. The teaser_card variant is a square image of size 200x200 pixels, and the instagram_preview variant is a square image of size 1080x1080 pixels. The <?imperia mam copy?> command is used to store the URLs of these newly created image variants into the respective metafields, image_teaser_card and image_instagram_preview.

Now, these resized image variants can be used elsewhere in the template, or even in other templates, by referencing their respective metafields. The original image remains unaffected and can be used as is whenever required.

This feature is particularly useful when you want to ensure that your images are optimized for the different contexts in which they will be displayed, such as on different devices or on different social media platforms. It can help to improve the overall user experience, as well as the performance of your website.

Responsive Images using picture#

To ensure that your website performs optimally and provides a smooth user experience, image optimization is essential. One way to achieve this in Imperia CMS is by creating multiple resized variants of an image to match different display scenarios. This process reduces unnecessary data usage and ensures that images are displayed at their best across different device sizes.

Consider the following simplified example which generates multiple resized variants of a header image:

<!--formstart-->

#IF(<!--XX-editmode-->)

<div>
  <img src="IMPERIA:header_image" alt="IMPERIA:image_alt">
    <?imperia mam plugin ResizedVariants?>
    <?imperia mam plugin_params resize_type:FitToSize?>
    <?imperia mam plugin_params headerImg_lg:1200x0?>
    <?imperia mam plugin_params headerImg_md:900x0?>
    <?imperia mam plugin_params headerImg_sm:600x0?>
    <?imperia mam copy headerImg_lg_url:header_img_lg?>
    <?imperia mam copy headerImg_md_url:header_img_md?>
    <?imperia mam copy headerImg_sm_url:header_img_sm?>
  </img>

  <input name="IMPERIA:header_img_lg" type="hidden" />
  <input name="IMPERIA:header_img_md" type="hidden" />
  <input name="IMPERIA:header_img_sm" type="hidden" />
</div>

#ELSE <!--Savemode-->

<div>
<picture>
  <source media="(min-width: 1200px)" srcset="<!--XX-header_img_lg-->">
  <source media="(min-width: 900px)" srcset="<!--XX-header_img_md-->">
  <img src="<!--XX-header_img_sm-->"  alt="<!--XX-TEXT:image_alt-->" style="width:auto;">
</picture>
</div>

#ENDIF

<!--formend-->

In this example, we create three resized variants of the header image. The <?imperia mam plugin ResizedVariants?> and <?imperia mam plugin_params resize_type:FitToSize?> instructions activate the resizing functionality and set it to fit the specified dimensions. The following <?imperia mam plugin_params?> instructions define the sizes for the large, medium, and small variants of the image. Note that by setting the height to 0, the image will be scaled proportionally according to the specified width.

For each variant, the <?imperia mam copy?> instruction is used to store the URL of the generated image in a corresponding metafield. The <input> fields with the IMPERIA: prefix correspond to these metafields and are used to store this information.

During the save mode, the <picture> element is used to provide different versions of the image for different viewport sizes. This modern web development technique, also known as responsive images, ensures that the browser selects the best image source based on the current viewport size. The media attribute in the <source> tag specifies the media condition for using each particular image source.

This method ensures that each device or viewport size gets an appropriately sized image, reducing data usage and improving the overall page load time. In the next sections, we'll explore more advanced image manipulation techniques in Imperia CMS.

Responsive Images using srcset#

Responsive images are crucial for optimizing your website's performance across a variety of devices with different screen resolutions. The HTML srcset attribute is a powerful tool that allows the browser to select the most suitable image source from a given set, based on the current viewport and screen resolution. This ensures an optimal user experience by delivering images that are perfectly suited to the viewer's device, without unnecessarily loading large image files that can slow down the site.

To deliver responsive images, you need to provide multiple versions of the same image at different resolutions. The srcset attribute in your image tag is then used to list these versions along with their respective widths.

Here's how you can create a responsive image using imperia:

<div>
  #IF(<!--XX-editmode-->)
    <img 
         src="IMPERIA:image" 
         alt="IMPERIA:image_alt"
         srcset="IMPERIA:600x300:sm 600w,  IMPERIA:900x400:md 900w, IMPERIA:1200x500:lg 1200w"
    >
    <?imperia mam copy alt:image_alt ?>
    </img>
  #ELSE <!--Savemode-->
    <img 
         src="<!--XX-image-->" 
         alt="<!--XX-TEXT:image_alt-->" 
         srcset="<!--XX-sm_image--> 600w, <!--XX-md_image--> 900w, <!--XX-lg_image--> 1200w"
    >
    </img>
  #ENDIF
</div>

<!--formend-->

In this example, in the edit mode, IMPERIA:image is the placeholder for the default image source, and IMPERIA:600x300:sm, IMPERIA:900x400:md, and IMPERIA:1200x500:lg are placeholders for the different image versions. The numbers 600w, 900w, and 1200w are width descriptors indicating the pixel widths of the images.

In the save mode, the imperia tags are replaced with the actual URLs of the image versions. Here, <!--XX-image--> is the actual URL of the default image source, and <!--XX-sm_image-->, <!--XX-md_image-->, and <!--XX-lg_image--> are the actual URLs of the different image versions.

By incorporating this approach, you can ensure that your images are delivered responsively according to different screen sizes, enhancing your website's performance and the user experience.

Image Accessibility: Alt Text#

One of the fundamental principles of web accessibility is ensuring that images are accessible to all users, including those using assistive technologies like screen readers. This is typically achieved by providing alternative (alt) text for images. This text serves as a textual description of the image, describing its content or purpose to those who cannot see it.

In Imperia CMS, you can easily incorporate alt text into your images using the Media Asset Management (MAM) system. The MAM system allows you to copy the alt text from the asset metadata and associate it with the image in your template.

Here's an example of how this can be done:

<div>
  <img src="IMPERIA:image" alt="IMPERIA:image_alt">
    <?imperia mam copy alt:image_alt ?>
  </img>
</div>

In the above example, the <?imperia mam copy alt:image_alt ?> instruction copies the alt text stored in the asset metadata (if any) into a metafield named image_alt. This alt text is then associated with the image by setting it as the value of the alt attribute in the <img> tag.

However, sometimes the alt text in the asset metadata may not be suitable or specific enough for the context in which the image is used. In such cases, it can be beneficial to allow the alt text to be edited manually. This can be achieved by providing a textarea field in the template:

<div class="form-group">
<label for="IMPERIA:image_alt">Alt Text</label>
<textarea name="IMPERIA:image_alt" id="IMPERIA" class="form-control" size="2"></textarea>
</div>

In this example, a textarea field is provided for editing the alt text. The name attribute of the textarea is set to "IMPERIA:image_alt", which is the name of the metafield in which the alt text is stored. This means that when the template is in edit mode, the textarea field will be automatically pre-filled with the alt text from the asset metadata (if it was entered and stored when the image was uploaded).

This way, users can review and modify the alt text as needed, ensuring that it provides an accurate and contextually appropriate description of the image. This can greatly enhance the accessibility of your web content and ensure that it complies with web accessibility standards.

Sure, let's name this section "Creating Figures with Captions and Copyright Information". Here's how you can create an Imperia CMS template to output a HTML figure with a caption and copyright information.

In HTML, the <figure> and <figcaption> elements are used to associate an image with a caption. The <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit.

In the context of Imperia CMS, you can create a template that outputs a <figure> element with an image, a caption, and copyright information. Here is how it can be done:

<!--formstart-->

#IF(<!--XX-editmode-->)

<div>
  <img src="IMPERIA:image">
    <?imperia mam copy alt:image_alt ?>
    <?imperia mam copy copyright:image_copyright ?>
  </img>
</div>

<div class="form-group">
  <label for="IMPERIA:image_alt">Alt Text</label>
  <textarea name="IMPERIA:image_alt" id="IMPERIA" class="form-control" size="2"></textarea>
</div>

<div class="form-group">
  <label for="IMPERIA:caption">Caption</label>
  <textarea name="IMPERIA:image_caption" id="IMPERIA" class="form-control" size="2"></textarea>
</div>

<div class="form-group">
  <label for="IMPERIA:copyright">Copyright</label>
  <input name="IMPERIA:image_copyright" id="IMPERIA" class="form-control"></input>
</div>

#ELSE <!--Savemode-->

<figure>
  <img src="<!--XX-image-->" alt="<!--XX-TEXT:image_alt-->">
  <figcaption><!--XX-TEXT:image_caption--></figcaption>
  <small><!--XX-TEXT:image_copyright--></small>
</figure>

#ENDIF

<!--formend-->

In this example, the template in edit mode contains an image field where users can select an image, a textarea for alt text, a textarea for the caption, and an input for the copyright information.

In save mode, a <figure> element is output. The image source URL and the alt text are dynamically replaced with the actual content entered during edit mode. The caption and copyright information are also populated from the data entered during edit mode.

This results in a complete figure with an image, a caption, and copyright information. The copyright information is wrapped in a <small> tag, which is commonly used to denote small print, such as legal text or copyright information.

Combining all Techniques#

In order to provide an optimal user experience across different devices and use cases, you may need to use a combination of the previously discussed techniques.

Let's take the following code as an example:

<!--formstart-->

#IF(<!--XX-editmode-->)

<div>
  <img 
    src="IMPERIA:image" 
    srcset="IMPERIA:1200x500:lg, IMPERIA:900x400:md, IMPERIA:600x300:sm, IMPERIA:300x200:xs"
  >
    <?imperia mam plugin ResizedVariants?>
    <?imperia mam plugin_params resize_type:FitToSize?>
    <?imperia mam plugin_params teaserImg:300x200?>
    <?imperia mam copy teaserImg_url:teaser_img?>
    <?imperia mam plugin_params socialImg:1200x630?>
    <?imperia mam copy socialImg_url:social_img?>
  </img>

  <input name="IMPERIA:teaser_img" type="hidden" />
  <input name="IMPERIA:social_img" type="hidden" />
</div>

<div class="form-group">
  <label for="IMPERIA:image_alt">Alt Text</label>
  <textarea name="IMPERIA:image_alt" id="IMPERIA" class="form-control" size="2"></textarea>
</div>

<div class="form-group">
  <label for="IMPERIA:caption">Caption</label>
  <textarea name="IMPERIA:image_caption" id="IMPERIA" class="form-control" size="2"></textarea>
</div>

<div class="form-group">
  <label for="IMPERIA:copyright">Copyright</label>
  <input name="IMPERIA:image_copyright" id="IMPERIA" class="form-control"></input>
</div>

#ELSE <!--Savemode-->

<figure>
  <picture>
    <source media="(min-width: 1200px)" srcset="<!--XX-lg_image-->">
    <source media="(min-width: 900px)" srcset="<!--XX-md_image-->">
    <source media="(min-width: 600px)" srcset="<!--XX-sm_image-->">
    <source media="(min-width: 300px)" srcset="<!--XX-xs_image-->">
    <img src="<!--XX-image-->" alt="<!--XX-TEXT:image_alt-->">
  </picture>
  <figcaption><!--XX-TEXT:image_caption--></figcaption>
  <small><!--XX-TEXT:image_copyright--></small>
</figure>

#ENDIF 

<!--formend-->

This template combines several techniques to handle images responsively and contextually:

  1. Responsive Image Display: In the <img> tag, the srcset attribute is used to define a set of potential image sources with different sizes. In the save mode the <picture> tag and srcset attribute are used to provide responsive image sources.

  2. Image Resizing and Variant Creation: The <img> tag is followed by a series of <?imperia mam ?> instructions. These instructions use the ResizedVariants plugin to generate additional variants of the image for different purposes, such as 'teaser' and 'social' use cases. The URLs of these variants are stored in hidden input fields and can be accessed in the save mode.

  3. Metadata Handling: Additional fields are provided for the image's alt text, caption, and copyright information. In the save mode, the image and its metadata are displayed inside a <figure> tag. The <figcaption> and <small> tags are used to display the image's caption and copyright information, respectively.