Meow Apps

Meow Gallery: Tutorial

How to create galleries? The answer is simple! With the standard tools in WordPress :) You do not need to study anything new. There are three ways to create a gallery. By using the Gutenberg Editor, the Standard Editor or the Gallery shortcode. First, have a look at the settings.

The Settings

They are accessible through the Meow Apps > Gallery menu. You will be able here to set all the default settings. If you do not modify anything, the layout Tiles will be used for all your galleries. If you don’t want the Meow Gallery to take over your galleries by default, pick None.

Meow Gallery: Options

On the right side, you can set the default settings for each layout. 

Create a Gallery

Gutenberg Editor

If you already have galleries, you can convert them easily to the Meow Gallery Block, or you can simply add the Meow Gallery block from the editor. Feel free to play with the different settings, and the visual appearance will be updated in real-time.

It works naturally with the Gutenberg and WordPress ecosystem and actually uses the native WordPress shortcode. That allows you or other plugins to modify the content and rendering of the gallery, which is usually not possible with other plugins.

Another advantage of having a shortcode in the back is that if you uninstall the Meow Gallery one day, for some reason, it will still work with the native WordPress Gallery rendering, and you will be able to convert it to the standard Gallery Block.

Standard Editor

If you are still using the standard editor, you can click on Add Media, and then the modal below will appear. Pick Create Gallery, choose the photos and Create a new gallery. This core feature of WordPress actually creates a shortcode so it will also work with the Meow Gallery.

Gallery Shortcode

You can also use the Gallery Shortcode directly. If you want a specific layout to be used for your gallery, simply use the layout attribute. Each layout has even more different attributes available, please have a look at the layouts page to discover them.

[gallery ids="1,2,3" layout="tiles"]

Here is the list of the available attributes:

Lightroom + Gallery Shortcode

If you have WP/LR Sync installed, you can also specify directly one or your collection from Lightroom, like this.

[gallery layout="tiles" wplr-collection="1"]

For more information about WP/LR Sync, check it here.

Customize the Meow Gallery

The Meow Gallery will allow advanced users and developers to customize it more and more. For now, two WordPress filters are available. By modifying your functions.php file or using the Code Snippets plugin, you will be able to use those filters.

Captions

add_filter( 'mgl_caption', 'my_mgl_caption', 25, 4 );

function my_mgl_caption( $caption, $media_id ) {
	$caption = "Photograph by John Wayne.";
	return $caption;
}

Sizes (src-set)

If you want your Meow Gallery to be displayed pixel-perfect (or if you have a specific design for your website), you might want to play with the sizes attributes. If you don’t know how src-set works, have a look at this explanation.

add_filter( 'mgl_sizes', 'my_mgl_sizes', 25, 4 );

function my_mgl_sizes( $sizes, $gallery_layout, $attachment, $attr ) {
	if ( $gallery_layout === 'justified' ) {
		// For the justified layout, we want to set our own sizes for the src-set.
		$sizes = '(max-width: 800px) 80vw, 25vw';
	}
	// $sizes has already been set by Meow Gallery, so it is important to return it
	// otherwise it will set it to nothing.
	return $sizes;
}

Order / Sort

If you would like to have a specific order for your images, please have a look at the following example. This will simply reverse the order of all the images in your galleries. .

add_filter( 'mgl_sort', 'my_mgl_sort', 25, 3 );

function my_mgl_sort( $ids, $data, $atts ) {
	return array_reverse( $ids );
}

The $data and $atts variables are also available. $data is an array, from which you can get the metadata for any id available in $ids. $atts are the attributes of the gallery (set by the shortcode), so you can handle the ordering differently depending on the gallery and its options.

The following example is more complex, and will order the images of the galleries using the Tiles layout by their title, whereas the ones of the Masonry layout will be ordered by their taken date.

class My_Custom_Order_For_Meow_Gallery
{
	public $data;
	
	public function __construct() {
		add_filter( 'mgl_sort', array( $this, 'my_mgl_sort' ), 25, 4 );
	}

	function order_by_taken_date( $id_a, $id_b ) {
		// We get the information for each id we need to compare
		$data_a = $this->data[$id_a];
		$data_b = $this->data[$id_b];
		// We return the result of the comparison on the created timestamp (taken date)
		return $data_b['meta']['image_meta']['created_timestamp'] > $data_a['meta']['image_meta']['created_timestamp'];
	}
	
	function order_by_title( $id_a, $id_b ) {
		// We get the information for each id we need to compare
		$data_a = $this->data[$id_a];
		$data_b = $this->data[$id_b];
		// We return the result of the comparison on the title
		return strcmp( $data_b['meta']['image_meta']['title'], $data_a['meta']['image_meta']['title'] );
	}

	function order_by_upload_date( $id_a, $id_b ) {
		// We get the information for each id we need to compare
		$post_a = get_post( $id_a );
		$post_b = get_post( $id_b );
		// We return the result of the comparison on the created_timestamp
		return strcmp( $data_b->post_date, $data_a->post_date );
	}

	function my_mgl_sort( $ids, $data, $layout, $atts ) {
		// Data contains metadata about the media (use printf on it to understand its structure)
		$this->data = $data;
		
		// The usort function will order the $ids depending on a function.
		// For fun, we pick a different function for the Tiles and Masonry layouts only.
		if ( $layout === 'tiles' )
			usort( $ids, array( $this, "order_by_title" ) );
		else if ( $layout === 'masonry' )
			usort( $ids, array( $this, "order_by_taken_date" ) );
		return $ids;
	}
}

new My_Custom_Order_For_Meow_Gallery();