Formatting WordPress Image Gallery for Instant Articles

by Edward on

Version 1.2.0 of WP Native Articles was pushed a few weeks ago and we’re pleased to say it now supports WordPress image galleries. It’s not that it didn’t support them before, but previously all it did was render the images one after an other, not very gallery like. With version 1.2.0 it now converts them to display correctly as a Slideshow in your instant articles.

WordPress Image Gallery
A WordPress Image Gallery in action

 

Facebook Instant Articles Slideshow
Facebook Instant Articles Slideshow Example

 

The problem with WordPress and Instant Articles is translating between the two. Instant Articles has a rather strict syntax as WordPress doesn’t, the plugin does its best to translate the content but some features (such as galleries and other various plugins) require a special rule set.

How we do it

This is the syntax that Facebook expects for a slideshow:

<figure class="op-slideshow">
  <figure>
    <img src="http://mydomain.com/path/to/img1.jpg" />
  </figure>
  <figure>
    <img src="http://mydomain.com/path/to/img2.jpg" />
  </figure>
  <figure>
    <img src="http://mydomain.com/path/to/img3.jpg" />
  </figure>
</figure>

 

This is the syntax that WordPress outputs for a gallery (depending on whether you have HTML5 enabled on your site or not).

<div id='gallery-1' class='gallery galleryid-555 gallery-columns-3 gallery-size-thumbnail'>
	<figure class="gallery-item">
		<div class="gallery-icon landscape">
			<a href="http://wptest.io/demo/2012/12/10/post-format-gallery/100_5478/"><img width="150" height="150" src="http://wptest.io/demo/wp-content/uploads/sites/2/2011/07/100_5478-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Bell on Wharf" aria-describedby="gallery-1-754" scale="0"></a>
		</div>
		<figcaption class="wp-caption-text gallery-caption" id="gallery-1-754">
		Bell on wharf in San Francisco
		</figcaption>
	</figure>
</div>

 

As you can see they’re annoyingly not quite the same. Luckily though, all the WordPress gallery builder does is add a shortcode to your post, meaning that to override it is a simple matter of changing the call back function for the `[gallery]` shortcode for Instant Articles.

 

This is the new code that correctly renders the syntax for Instant Articles.

		static $instance = 0;
		$instance++;

		if ( ! empty( $attr['ids'] ) ) {
			// 'ids' is explicitly ordered, unless you specify otherwise.
			if ( empty( $attr['orderby'] ) ) {
				$attr['orderby'] = 'post__in';
			}
			$attr['include'] = $attr['ids'];
		}

		$html5 = current_theme_supports( 'html5', 'gallery' );
		$atts = shortcode_atts( array(
			'order'      => 'ASC',
			'orderby'    => 'menu_order ID',
			'id'         => $post ? $post->ID : 0,
			'itemtag'    => $html5 ? 'figure'     : 'dl',
			'icontag'    => $html5 ? 'div'        : 'dt',
			'captiontag' => $html5 ? 'figcaption' : 'dd',
			'columns'    => 3,
			'size'       => 'thumbnail',
			'include'    => '',
			'exclude'    => '',
			'link'       => '',
		), $attr, 'gallery' );

		$id = intval( $atts['id'] );

		// Copied from core. Might be better as WP_Query?
		if ( ! empty( $atts['include'] ) ) {
			$_attachments = get_posts( array( 'include' => $atts['include'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );

			$attachments = array();
			foreach ( $_attachments as $key => $val ) {
				$attachments[ $val->ID ] = $_attachments[ $key ];
			}
		} elseif ( ! empty( $atts['exclude'] ) ) {
			$attachments = get_children( array( 'post_parent' => $id, 'exclude' => $atts['exclude'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );
		} else {
			$attachments = get_children( array( 'post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );
		}

		if ( empty( $attachments ) ) {
			return '';
		}

		$output = PHP_EOL;
		foreach ( $attachments as $att_id => $attachment ) {
			$output .= '<figure>' . PHP_EOL;
			$output .= sprintf( '<img src="%s" />', wp_get_attachment_image_url( $att_id, 'full', false ) ) . PHP_EOL;
			$output .= '</figure>' . PHP_EOL;
		}

 

Read more about WordPress Image Galleries from the official documentation: https://codex.wordpress.org/The_WordPress_Gallery

Read more about Facebook Instant Article Slideshows: https://developers.facebook.com/docs/instant-articles/reference/slideshow

Share