Tweaking the built-in WordPress gallery

June 9th, 2017 2 minute read

A few simple changes can improve the built-in WordPress gallery behavior without JavaScript and without using a slider plugin:

Following is an example of image.php:

 * The template for displaying image attachments
 * @package WordPress
 * @subpackage Strip

$content_width = 1920;
	<div id="primary" class="content-area image-attachment">
		<div id="content" class="site-content" role="main">

	// Start the loop.
	while ( have_posts() ) :
		the_post(); ?>

			<article id="post-<?php the_ID(); ?>">
				<div class="wrap">

						<div class="entry-attachment">

					 * Filter the default strip image attachment size.
					 * @since strip 1.0
					 * @param string $image_size Image size. Default 'full'.
					$image_size = apply_filters( 'strip_attachment_size', 'full' );

					echo wp_get_attachment_image( get_the_ID(), $image_size );


			</div><!-- .entry-attachment -->

		<?php // image navigation. ?>
<nav role="navigation" id="image-navigation" class="image-navigation">

				<div class="previous"><?php previous_image_link( false, __( '<span class="meta-nav">&larr;</span> <span class="text-nav">Previous panel</span>', 'strip' ) ); ?></div>
				<div class="next"><?php next_image_link( false, __( '<span class="meta-nav">&rarr;</span> <span class="text-nav">Next panel</span>', 'strip' ) ); ?></div>

				<nav class="post-parent-title">
					<?php printf( '<a href="%s" class="post-parent-title">%s</a>',
						esc_url( get_permalink( $post->post_parent ) ),
						esc_html( get_the_title( $post->post_parent ) )
					); ?>
</nav><!-- #image-navigation --><!-- #image-navigation -->

		<?php if ( has_excerpt() ) : ?>
					<div class="entry-caption">
		<?php the_excerpt(); ?>
					</div><!-- .entry-caption -->
		<?php endif; ?>

					</div><!-- .entry-content -->
				</div><!-- .entry-wrap -->
			</article><!-- #post-## -->

			// If comments are open or we have at least one comment, load up the comment template (disabled).
			// if ( comments_open() || '0' !== get_comments_number() ) {
			// comments_template();
			// }

		<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

Now we can navigate through images with keyboard arrows.

i.e. Two images panels.


However, you cannot reuse the same image in different posts since the parent link will direct you to the original post where that image appeared first. This is explained in the Codex:

The default expected behavior for a gallery that has no explicit IDs stated is to add all images that have the post as post parent assigned. In other words, add all images that were uploaded using the “Add media” button/link on this post edit screen. Keep in mind that this as well means that every attachment added to that post later on will be interpreted to be part of the gallery. No matter if it was displayed as plain attachment or not.

	$attachments = get_children( array(
	'post_parent'    => $attr['id'],
	'post_status'    => 'inherit',
	'post_type'      => 'attachment',
	'post_mime_type' => 'image',
	'order'          => $attr['order'],
	'orderby'        => $attr['orderby'],
	) );

I also noticed that while testing, a comic post would display all the panels uploaded at the same time, including those that weren’t part of a given post. Now that could create confusion if you were to change your images or changed and re uploaded panels at a different date.

an attachment image is attached to its parent post and even has the parent post slug in its URL. This makes it tricky to really have the same attachment in more than one place. — Samuel Wood (OTTO on WordPress)

Probably an edge case, but it is better to avoid re-using the same upload in different posts.
Smashing Magazine — Better Image Management With WordPress

Notes: You can find the WP gallery shortcode in wp-includes/media.php.

Leave a comment