Images

Image containers

Fullwidth image container

We have fullwidth-container-centered class which when applied on a parent div it allows us to scale the child image while maintaining the children text values within the center column position.

This is a text that doesn't span as large as the image and is centered

Used by Briefings where there is a need for an emphasis area callout, this style combines the fullwidth image container with a div with class emphasis-area to show text centered on top of the large full width image in an area not larger then the main content column.

Here we also add fullwidth class to the image in order to make it absolute and allow the emphasis area to go over the image.

If we need some text to act as a copyright info found right below the image we can also add a paragraph with class eea-image-credit.

The study concluded that a significant part of the reductions for combustion activities took place due to requirements set out in EU environmental legislation on industrial pollution.

Image copyright belongs to: attribution here

Max container centered

Sometimes we need to enlarge an image or iframe beyond the center column that we have which is 830px.

For this reason we have max-container-centered class which when applied it allows us to scale the content outside of the content container, up to 1400px.

We use this style within Dashboard content types to enlarge Tableau dashboards or within Indicator Assessments to show charts alongside title and description.

This is a text that spans as large as the image and it follows the image size from left to right.

Pop-ups

Image pop-ups

If the a-tag href links to an image, it will be displayed in the popup. Be careful though, if the URL does not end with an image extension, fancybox will hang. If the URL doesn't end with an image extension, you can still force it to display the popup, by adding an extra class: fancybox.image.

Video pop-ups

Used on audiovisuals faceted listing to play videos in a fancybox.

Image scales

When loading images consider using image scales instead of original images in order to improve page loading times for high resolution images.