CERN Accelerating science

Close menu

Image gallery

Components - MULTIMEDIA

An image gallery is a functional gallery presented on pages where users can download pictures. The gallery shows   picture on focus and other miniatures of related pictures in different rows under the picture. The user can download the picture that is on focus or can download the full gallery. 

Usage

CERN provided Drupal 8 sites:

  • Install and enable the Image gallery module and all its dependencies under Extend
  • After installing you can add image galleries on all content types which use Paragraph components like the Landing Page
  • To create an image gallery just choose Image gallery from the Paragraph chooser (if there is one) and define your properties
  • Then you just have to add your images by either uploading them or adding them via CDS
  • After defining the properties just click on save and your gallery is done

Other:

  • Just include the HTML snippet provided below
  • If you're experienced with HTML and CSS you even can customise it further!

Image gallery COMPONENT

<div class="component-gallery">
<div class="owl-carousel owl-theme gallery-carousel owl-loaded">
<div class="component-gallery__item">
<div class="component-gallery__image">
<figure class="cds-image">
<img alt="Girls in ICT 2018 (Image: CERN)" src="images/201803-113_02_l.jpg">
<a class="open-overlay group2 cboxElement" href="images/201803-113_02_l.jpg" title="Girls in ICT 2018 (Image: CERN)">open</a>
<figcaption>
Girls in ICT 2018 (Image: CERN)
</figcaption>
</figure>
</div>
<div class="component-gallery__link">
<label>
<span>Download image</span>
</label>
<a href="images/201803-113_02_s.jpg" target="_blank" class="component-gallery__link__first">Small</a>
<a href="images/201803-113_02_m.jpg" target="_blank">Medium</a>
<a href="images/201803-113_02_l.jpg" target="_blank">Large</a>
<a href="images/201803-113_02_o.jpg" target="_blank" class="component-gallery__link__last">Original</a>
</div>
</div>
<div class="component-gallery__item">
<div class="component-gallery__image">
<figure class="cds-image">
<img alt="ALICE virtual visit with a Greek school" src="images/IMG_6192_l.jpg">
<a class="open-overlay group2 cboxElement" href="images/IMG_6192_l.jpg" title=" Virtual visit of the ALICE control room organised together with a Masterclass with a Greek high school. (Image: CERN)">open</a>
<figcaption>
Virtual visit of the ALICE control room organised together with a Masterclass with a Greek high school. (Image: CERN)
</figcaption>
</figure>
</div>
<div class="component-gallery__link">
<label>
<span>Download image</span>
</label>
<a href="images/IMG_6192_s.jpg" target="_blank" class="component-gallery__link__first">Small</a>
<a href="images/IMG_6192_m.jpg" target="_blank">Medium</a>
<a href="images/IMG_6192_l.jpg" target="_blank">Large</a>
<a href="images/IMG_6192_o.jpg" target="_blank" class="component-gallery__link__last">Original</a>
</div>
</div>
<div class="component-gallery__item">
<div class="component-gallery__image">
<figure class="cds-image">
<img alt="The CERN Medtech:Hackathon" src="images/Cooperation_l.jpg">
<a class="open-overlay group2 cboxElement" href="images/Cooperation_l.jpg" title="The CERN Medtech:Hackathon, organised by CERN Knowledge Transfer, was held in IdeaSquare during 6-9 April. Teams from all around the world gathered, by using CERN technology, to solve problems posed by the Medtech industry. (Image: CERN)">open</a>
<figcaption>
The CERN Medtech:Hackathon, organised by CERN Knowledge Transfer, was held in IdeaSquare during 6-9 April. Teams from all
around the world gathered, by using CERN technology, to solve problems posed by the Medtech industry. (Image:
CERN)
</figcaption>
</figure>
</div>
<div class="component-gallery__link">
<label>
<span>Download image</span>
</label>
<a href="images/Cooperation_s.jpg" target="_blank" class="component-gallery__link__first">Small</a>
<a href="images/Cooperation_m.jpg" target="_blank">Medium</a>
<a href="images/Cooperation_l.jpg" target="_blank">Large</a>
<a href="images/Cooperation_o.jpg" target="_blank" class="component-gallery__link__last">Original</a>
</div>
</div>
<div class="component-gallery__item">
<div class="component-gallery__image">
<figure class="cds-image">
<img alt="The CERN Medtech:Hackathon" src="images/Accelerator visit5_l.jpg">
<a class="open-overlay group2 cboxElement" href="images/Accelerator visit5_l.jpg" title="The CERN Medtech:Hackathon, organised by CERN Knowledge Transfer, was held in IdeaSquare during 6-9 April. Teams from all around the world gathered, by using CERN technology, to solve problems posed by the Medtech industry. (Image: CERN)">open</a>
<figcaption>
The CERN Medtech:Hackathon, organised by CERN Knowledge Transfer, was held in IdeaSquare during 6-9 April. Teams from all
around the world gathered, by using CERN technology, to solve problems posed by the Medtech industry. (Image:
CERN)
</figcaption>
</figure>
</div>
<div class="component-gallery__link">
<label>
<span>Download image</span>
</label>
<a href="images/Accelerator visit5_s.jpg" target="_blank" class="component-gallery__link__first">Small</a>
<a href="images/Accelerator visit5_m.jpg" target="_blank">Medium</a>
<a href="images/Accelerator visit5_l.jpg" target="_blank">Large</a>
<a href="images/Accelerator visit5_o.jpg" target="_blank" class="component-gallery__link__last">Original</a>
</div>
</div>
<div class="component-gallery__item">
<div class="component-gallery__image">
<figure class="cds-image">
<img alt="The CERN Medtech:Hackathon" src="images/CERN Sign_l.jpg">
<a class="open-overlay group2 cboxElement" href="images/CERN Sign_l.jpg" title="The CERN Medtech:Hackathon, organised by CERN Knowledge Transfer, was held in IdeaSquare during 6-9 April. Teams from all around the world gathered, by using CERN technology, to solve problems posed by the Medtech industry. (Image: CERN)">open</a>
<figcaption>
The CERN Medtech:Hackathon, organised by CERN Knowledge Transfer, was held in IdeaSquare during 6-9 April. Teams from all
around the world gathered, by using CERN technology, to solve problems posed by the Medtech industry. (Image:
CERN)
</figcaption>
</figure>
</div>
<div class="component-gallery__link">
<label>
<span>Download image</span>
</label>
<a href="images/CERN Sign_s.jpg" target="_blank" class="component-gallery__link__first">Small</a>
<a href="images/CERN Sign_m.jpg" target="_blank">Medium</a>
<a href="images/CERN Sign_l.jpg" target="_blank">Large</a>
<a href="images/CERN Sign_o.jpg" target="_blank" class="component-gallery__link__last">Original</a>
</div>
</div>
<div class="component-gallery__item">
<div class="component-gallery__image">
<figure class="cds-image">
<img alt="FCC week 2018 and the FCC innovation award ceremony" src="images/20180411_hucopix_181_l.jpg">
<a class="open-overlay group2 cboxElement" href="images/20180411_hucopix_181_l.jpg" title="Photos from the parallel sessions of the FCC week 2018 and the FCC innovation award ceremony. The fourth annual meeting of the FCC collaboration took place in Amsterdam, the Netherlands. (Image: https://creativecommons.org/licenses/by/4.0/)">open</a>
<figcaption>
Photos from the parallel sessions of the FCC week 2018 and the FCC innovation award ceremony. The fourth annual meeting of
the FCC collaboration took place in Amsterdam, the Netherlands. (Image: https://creativecommons.org/licenses/by/4.0/)
</figcaption>
</figure>
</div>
<div class="component-gallery__link">
<label>
<span>Download image</span>
</label>
<a href="images/20180411_hucopix_181_s.jpg" target="_blank" class="component-gallery__link__first">Small</a>
<a href="images/20180411_hucopix_181_m.jpg" target="_blank">Medium</a>
<a href="images/20180411_hucopix_181_l.jpg" target="_blank">Large</a>
<a href="images/20180411_hucopix_181_o.jpg" target="_blank" class="component-gallery__link__last">Original</a>
</div>
</div>
</div>
</div>
Show more code
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Source+Sans+Pro:400,600,700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
/* ****************************************** divisions component */
.component-gallery {
font-family: 'Source Sans Pro', sans-serif; }
.component-gallery button.owl-thumb-item {
background: none;
border: 0;
padding: 0;
width: 120px;
height: 100px;
margin: 5px;
overflow: hidden;
position: relative; }
.component-gallery button.owl-thumb-item img {
position: absolute;
width: 100%;
height: 100%;
right: 0;
left: 0;
bottom: 0;
top: 0;
margin: auto; }
.component-gallery__link {
margin: 10px 0 30px; }
.component-gallery__link label {
display: inline;
font-size: 14px;
font-weight: 600; }
.component-gallery__link label .material-icons {
font-size: 16px;
position: relative;
top: 5px; }
.component-gallery__link a {
color: #0855a0;
display: inline-block;
font-size: 14px;
font-weight: 600;
margin: 0 15px;
position: relative; }
.component-gallery__link a::before {
background: #292929;
content: "";
display: block;
height: 10px;
left: -14px;
position: absolute;
width: 1px;
top: 6px; }
.component-gallery__link a.component-gallery__link__first::before {
display: none; }

@media only screen and (max-width: 767px) {
.component-gallery__link label span {
display: none; }
.component-gallery__link a {
margin: 0 10px; }
.component-gallery__link a::before {
left: -13px; } }
Show more code
The zip file contains the orginal SCSS files
$(document).ready(function() {
$(".gallery-carousel").owlCarousel({
dots: false,
thumbs: true,
thumbImage: true,
nav: false,
items: 1,
loop: true,
animateOut: 'fadeOut',
autoHeight: true
});
})
Show more code

Copy/paste the provided HTML code into your site. For each image in the gallery you have to add a complete div element with the class component-gallery__item like it is shown in the code example.

You can provide as many download links/versions as you wish but they need to get referenced exactly like in the example.