Content Management

Hero Images

The template system allows for templates to be created with 'default' images used on the pages. An admin can then upload an image to be used in place of that image through the admin interface.

This system supports different image sizes, so that appropriately sized images can be used. The image widths supported are: 360, 480, 720, 1080.

Set up default

First you need to setup a 'named image' in the site_config.php file. For each named image, there are two pieces of information:

  • The image name
    This is the name that users will see in the Administration system.
  • The base filename
    Dijon will expect images to be present in the site, with this name, except with different image sizes added to the filename. The file sizes used are 'w360', 'w480', 'w720' and 'w1080'.
Example
$config->setNamedImages([
    'hero-background' => '/images/hero-bg.jpg'
]);

In this example the image name is 'hero-background' and the 'base filename' is '/images/hero-bg.jpg'. To support the different sizes, Dijon will expect these files to be present in the site frontend directory.

  • /images/hero-bg-w360.jpg
  • /images/hero-bg-w480.jpg
  • /images/hero-bg-w720.jpg
  • /images/hero-bg-w1080.jpg

If any of those files are missing, Dijon will give an error on the page. This is to make the error obvious, instead of the site working for most users.

In your template

After being setup, you can use a Campaign Image in a Twig template like this:

{% set imagePaths = getHeroImageUrl('hero-background') %}

This will set a variable called 'imagePaths' that contains the paths for the different image sizes. They can then be used like this:

<img {{ editing_data('hero-background') }}
  src="{{ imagePaths.w1080 }}"
  srcset="{{ imagePaths.w360 }} 360w,
  {{ imagePaths.w480 }} 480w,
  {{ imagePaths.w720 }} 720w,
  {{ imagePaths.w1080 }} 1080w"
>

Or with explicit sizes set:

<img {{ editing_data('hero-background') }}
 src="{{ imagePaths.w1080 }}"
 srcset="{{ imagePaths.w360 }} 360w, {{ imagePaths.w480 }} 480w,
   {{ imagePaths.w720 }} 720w, {{ imagePaths.w1080 }} 1080w"
 sizes="(max-width: 360px) 360px, (max-width: 480px) 480px
   (max-width: 640px) 720px, 1080px"
>

When an admin sets an alternative image to be used for a particular combination of campaign, language and country, instead of using the default image, an appropriately resized version of that alternative image will be used instead.

On this page