Wordpress - Galleries

Enabling custom galleries

Ensure you have the latest OFW WordPress plugin (at least 3.6.1). This should include the Outlast Framework – Gallery plugin under must use plugins, so it is turned on automatically.

Using and enabling the [gallery] shortcode

When you insert a gallery into a WordPress post the [gallery] shortcode will be added.

Important! Shortcodes only work with {% wp_the_content %} by default. If you want to apply shortcodes to other content you must use the |wp_do_shortcode filter.

Here’s an example:

Here's some content with the shortcode unprocessed:
{{wp_post.content}}

Here's some content with the shortcode processed:
{{wp_post.content|wp_do_shortcode}}

Or you can use this with the shortcode processed:
{% wp_the_content %}

Customizing the gallery HTML

The gallery plugin will use the template wordpress/widgets/gallery.html which exists in the WordPress plugin folder already. Take a look at the default template in the WordPress plugin folder to see how it works, but essentially, the HTML markup looks like this:

<!-- This example uses Fancybox -->
<div class="wpgallery">
  {% foreach wpgalleryphotos as galleryphoto %}
    <a rel="gallery{{wppost.id}}" class="fancybox gallerybox small" href="{{galleryphoto.photo}}">
      <img src="{{galleryphoto.photo.thumb}}">
    </a>
  {% endforeach %}
<br/>
</div>

As you can see the gallery items are stored in the {{wpgalleryphotos}} variable and you use the {% foreach %} tag to iterate through all of the pictures. You can modify the rest of the HTML markup as needed for your particular design.

Create your own local copy of wordpress/widgets/gallery.html to customize the markup.

It is your job to style this markup properly, but here is an example:

/* gallery design */
div.wpgallery img{
	border: 0px;
	min-width: 100%;
	min-height: 100%;
	max-width: 150%;
}
div.wpgallery a.fancybox{
	display: block;
	width: 200px;
	overflow: hidden;
	height: 150px;
	float: left;
}
div.wpgallery br{
	clear: both;
}