This is a customized look using the Divi gallery module. It makes the first image fullwidth and puts the remaining images in a row of thumbnails below it.
A child theme is required to change the image sizes Divi uses for the gallery items. If you don’t do that then the native 400×284 image will look pixelated at fullwidth size. However, if you’re using this gallery look in a ½ column or thinner you may not need to add the PHP.
Notes
Module settings: Set the overlay color and icon color (the icon is transparent on the demo) and turn pagination off.
After adding the PHP code to your child theme you’ll need to regenerate thumbnails. I use this plugin but there are others. You may need to select the option to remove old thumbnails to see changes on the frontend. Also be sure to clear your browser cache.
I don't assign IDs or classes in my code (unless it's for a free layout) so you'll need to do that if you don't want the code affecting all instances of the gallery module.
CSS Code
[css]
/*** MAKE DIVI GALLERY FLEX ***/
.et_pb_gallery_items {
display: -webkit-flexbox;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/*** FIRST/MAIN GALLERY IMAGE ***/
.et_pb_gallery_item:first-child {
flex-basis: 100%;
}
.et_pb_gallery_item:first-child img {
width: 100%;
height: 50vh; /* change to your preferred units and height */
}
.et_pb_gallery_item:first-child .et_pb_gallery_image:hover .et_overlay { /* remove overlay on hover on first item only */
opacity: 0;
}
/*** THUMBNAIL ROW ***/
.et_pb_gallery_item {
flex-basis: 80px; /* size of thubmnails */
margin: 4px !important;
}
.et_pb_gallery_item img {
height: 80px; /* should match gallery_item above */
object-fit: cover;
}
/*** GALLERY MISC ***/
.et_pb_gallery_grid .et_pb_gallery_item { /* remove gallery slide-in effect */
-webkit-animation-duration: 0s;
-ms-animation-duration: 0s;
-animation-duration: 0s;
}
.mfp-image-holder .mfp-content {
max-width: 1200px; /* limits the width of the lightbox image */
}
.mfp-bg {
background-color: darkslategray; /* lightbox overlay color */
}
[/css]PHP Code
This goes in your child functions.php file (change to your preferred dimensions). I don’t give instructions on adding child themes to websites but there are plenty of articles on the webs.
[php]
//Change image size for gallery
function my_change_featured_size( $image_sizes ) {
unset( $image_sizes['400x284'] );
$image_sizes['1200x800'] = 'size-et-pb-portfolio-image';
return $image_sizes;
}
add_filter( 'et_theme_image_sizes', 'my_change_featured_size' );
[/php]
0 Comments