Things I've Tagged ‘Gallery’

Page 1 of 1

#Gallery, #WordPress

Updating The Gallery Markup

I’ve wanted to use the WordPress gallery shortcode functionality for quite some time on my site–not that I would overuse or abuse it or anything–but it seemed rather useful for including multiple images in a post if I happened to want to do so.

The unfortunate part about using it is the resulting markup that ends up being generated by the shortcode. The original code utilizes a definition list (dl) for each image in the gallery, and inserts a line break (br) after each row. Not the cleanest code in the world. I’m also using a lightbox to display the full size image and could not utilize its native gallery functionality with the markup as is. What’s a man, or woman, to do? Improve the situation, that’s what!

Improved Markup

<section id="gallery-1" class="gallery gal-col-3 clearfix">
    <figure class="gallery-item">
        <a rel="gallery-1" href="img/link/src.jpg" title="generic title"><img src="img/link/src-thumb.jpg" class="attachment-images-thumb" alt="generic title" height="220" width="220"></a>
       <figcaption class="wp-caption-text gallery-caption">Generic Caption</figcaption>
    <figure class="gallery-item">
        <a rel="gallery-1" href="img/link/src.jpg" title="generic title"><img src="img/link/src-thumb.jpg" class="attachment-images-thumb" alt="generic title" height="220" width="220"></a>
       <figcaption class="wp-caption-text gallery-caption">Generic Caption</figcaption>

This code is much cleaner, and perhaps a little more HTML5 centric using the figure and figcaption tags, while also eliminating the page breaks. In the spirit of OOCSS, I’m keeping most of the original classes intact. How am I styling that up? Glad you asked.

The Basic CSS

I’ve created a base set of styles to get you started. I’ve purposely not styled certain items in this tutorial/plugin because you should modify these to fit your purposes.

.gallery {
    margin:1.5em 0;
.gallery-item {
    float: left; 
    padding: 1%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
.gallery img {
    max-width: 100%;
    height: auto;    
    display: block;
    margin: 0 auto;
/* A gallery image caption */
.gallery .gallery-caption { }
 .gal-col-1 .gallery-item {
      float: none;
      padding: 1% 0;
  .gal-col-2 .gallery-item {
  .gal-col-3 .gallery-item {
  .gal-col-4 .gallery-item {
  .gal-col-5 .gallery-item {
  .gal-col-6 .gallery-item {
  .gal-col-7 .gallery-item {
  .gal-col-8 .gallery-item {

Time To Change It All

You might be thinking, “that’s all well and good, but how do I get that beautiful markup on my site?” I’m glad you asked. There are a couple of approaches you could take. On my site I chose to create a new function in my theme functions file to manage the short code because that’s all I needed for my setup. For our purposes here, a plugin makes distribution easier.

If you wanted to go the theme function route, you can follow along to get a basic overview. First, unregister the default gallery shortcode in order to setup our own.

// replace gallery shortcode
add_shortcode('gallery', 'mm_gallery_shortcode');

Next, we need to modify the default gallery shortcode function. One of the first sets of things we’ll change are the default attributes in order to ensure we’re using semantically correct tags.

    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post->ID,
    'itemtag'    => 'figure',
    'icontag'    => '',
    'captiontag' => 'figcaption',
    'columns'    => 3,
    'size'       => 'images-thumb',
    'include'    => '',
    'exclude'    => ''
), $attr));

Then we’ll reflect those changes just a little further down in the function.

$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$icontag = tag_escape($icontag);
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) )
    $itemtag = 'figure';
if ( ! isset( $valid_tags[ $captiontag ] ) )
    $captiontag = 'figcaption';
if ( ! isset( $valid_tags[ $icontag ] ) )
    $icontag = '';

The last portion I want to highlight in the code is the actual output. I changed the gallery div tag into a section tag and modified the classes to reduce their number. I then add one to reflect the column number. Using str_replace I also add a rel attribute to our image link. Additionally, I have eliminated all line breaks from the output.

function mm_gallery_shortcode($attr) {
    /*A LOT of excluded CODE.....*/
    $gallery_div = "<section id='$selector' class='gallery gal-col-{$columns} clearfix'>";
    $output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
    $i = 0;
    foreach ( $attachments as $id => $attachment ) {
         $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
         $link = str_replace( '<a href', '<a rel="'. $selector .'" href', $link );
         $output .= "<{$itemtag} class='gallery-item'>";
         $output .= "$link";
         if ( $captiontag && trim($attachment->post_excerpt) ) {
             $output .= "<{$captiontag} class='wp-caption-text gallery-caption'> " . wptexturize($attachment->post_excerpt) . " </{$captiontag}>";
        $output .= "</{$itemtag}>";
    $output .= "</section>\n";
    return $output;

The code I’m highlighting above is incomplete, so I recommend you use the plugin if you have no clue what you’re doing. Otherwise, use it as a jumping off point.


View Project At GitHub

#Gallery, #php, #Web Design

Functions and Me: Gallery Layout

As of recently, I’ve had a particular layout for my gallery section that just wasn’t working for me. Well, it was probably OK, and I generally approved of it–since I designed it at some point–but I always thought it felt awkward.

I’ve had the thought running through my head for a few weeks now that it would probably be a good idea to adjust the layout; perhaps to spice it up, or make it a little more pleasing to my eye. Maybe this is perfectionism kicking in, but I really enjoy making these adjustments and experimenting in how I go about completing them.

What I initially decided to do was adjust the teaser image size by widening all of them to fill the entire 9 column width–which is the size of my primary content section (I have designed this site based on a 24 column, 936px wide grid). Because of that adjustment, I have had to change the way I display each project’s summary information. There are still many adjustments to be made, but so far so good.

What I’m most proud of in all of this change, however, has nothing to do with what is ultimately displayed. No, what is most impressive lies underneath it all. That’s right, I’ve gone and done something completely unnecessary–albeit, very cool–in the gallery display options I currently possess.

I initially didn’t want to commit to the larger size, so I created a bunch of backups of my CSS files and various source code files just in case I wanted to switch back, but why the hell was I doing that when I could write a bunch of functions that would do it for me?

On my workpage, in order to display the gallery, I include a file that possesses all of the appropriate php; in this way, if I need to make an adjustment, it’s pretty easy to go through and change whatever code I need. But there was one part in particular that became a bit of a hassle to adjust. Whenever I needed make a quick layout adjustment, I had to wade through three different files to do it–chalk it up to my inexperience I guess.

To alleviate the mess, I took that section and turned it into a function that would produce that section for me; now I could separate it from that file and consolidate everything, putting it all into one central location for quick adjustment action.

In the file that contains my primary functions and controls page numbers and gallery categories, I included the newly created function (small layout size) and created another (large layout size) that I would use based on a couple of different settings variables. I also set it up so my CSS file is created on the fly–that is the one that would determine which CSS files to @import.

Because of this simple little setup, I’m able to switch between those two different layouts in about five seconds, plus any adjustments in the future will be a matter of adjusting a couple of functions.

That’s just easy.