Gallery

Overview

A gallery can be created with the default WordPress Gallery Option, or with the Gallery Element.

When using the WordPress Gallery Option, the image size of gallery pics is set automatically when the theme is activated, all you have to do then is to insert the gallery shortcode with a max of 7 columns.

Examples of Gallery element.

Code Snippet

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

 [av_gallery ids='' style='thumbnails' preview_size='portfolio' crop_big_preview_thumbnail='yes' thumb_size='portfolio' columns='5' imagelink='5' lazyload='avia_lazyload' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-3irfg3'] 

Customization

Caption text style

The gallery image captions can be custom styled using the CSS code below.

 /* Gallery image caption */
.mfp-gallery .mfp-image-holder .mfp-figure .mfp-title {
	/* Your style here */
 }

 /* Image counter */
 .mfp-gallery .mfp-counter {
 	/* Your style here */
 }

Tooltip

To custom style the image tooltip please use the CSS below.

 /* Tooltip */
.avia-tooltip {
	/* Your style here */
}

To hide the image tooltip please use the CSS below.

/* Hide tooltip */
.avia-tooltip {
	display: none !important;	
}

Display caption below thumbnails

To display the caption below the thumbnail images please use the CSS below.

/* Display caption below thumbnail */
#top .avia-gallery .avia-gallery-thumb a:after {
content: attr(title);
margin: 10px 0;
position: relative;
display: block;
width: 100%;
font-size: 10px;
text-align: center;
}

Space between thumbnail gallery images.

To adjust the spacing between the images, play around with the margin values in the code below.

/* Gallery thumbnail spacing*/
#top .gallery .gallery-item {
    margin: 10px 10px 0 0;
    }

Gallery style – 1

By default, the gallery thumbnail is displayed at the bottom of the big image. In this example let’s take a look at gallery thumbnail alignment. How we can move it to the right side of the big image. Start by adding a custom CSS class name “av-gallery-style-1” to the gallery element.

Code snippet:

Shortcode

[av_gallery ids='3529,1183,1057' style='big_thumb' preview_size='portfolio' crop_big_preview_thumbnail='avia-gallery-big-crop-thumb' thumb_size='portfolio' columns='5' imagelink='lightbox' lazyload='avia_lazyload' av_uid='av-jgesnq4m' custom_class='av-gallery-style-1' admin_preview_bg='']

CSS

/*----------------------------------------
// CSS - Gallery style -1
//--------------------------------------*/

.av-gallery-style-1.avia-gallery {
display: flex;
flex-direction: row;
}

.av-gallery-style-1 .avia-gallery-big {
flex-basis: 80%;
}

.av-gallery-style-1 .avia-gallery-thumb {
display: flex;
flex-wrap: wrap;
flex-basis: 20%;
align-self: flex-start;
}

.av-gallery-style-1 .avia-gallery-thumb a {
flex-basis: 50%;
width: 50%;
}

Resource

Contributed video:

Gallery Element Tutorial