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:

[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 - 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%;
}

Add title attribute to new inserted image via “Add Media” button

In WordPress core, when adding an image to standard WP tinyMCE editor with the “Add Media” button the title tag is skipped and no longer supported:

“For both accessibility and search engine optimization (SEO), alt text is more important than title text. This is why we strongly recommend including alt text for all your images.”

Following snippet adds the title attribute to new added images.

/**
 * Add title attribute to new inserted image via "Add Media" button
 * 
 * @since 4.8.2
 * @param string $html
 * @param int $id
 * @param string $caption
 * @param string $title				is always empty because removed by WP
 * @param string $align
 * @param string $url
 * @param string $size
 * @param string $alt
 * @return string
 */
function handler_image_send_to_editor( $html, $id, $caption, $title, $align, $url, $size, $alt ) 
{
	//	if title attr already exist, return unmodified
	if( false === strpos( '<img ', $html ) || false !== strpos( 'title=', $html ) )
	{
		return $html;
	}
	
	$html = str_replace( '<img ', '<img title="' . esc_attr( get_the_title( $id ) ) . '" ' , $html );
	return $html;
}

add_filter( 'image_send_to_editor', 'html_insert_image', 10, 8 );

Resource

Contributed video:

Gallery Element Tutorial