You might except a grander programme from that title, but this is actually a quite simple and straigthforward project. I needed to have a neat visual effect for a WordPress based website I was renovating and at first used the default options to make a gallery. I had five images in the gallery for testing. Because all of the images didn’t happen fit to the same row three were in the upper row and two in the lower. By accident the images made an inverted staircase pattern of two rows. From that I got and idea of creating a complete staircase of three rows by adding one extra row with one image. The images would be picked randomly from a larger gallery.
The downside of using the WordPress gallery is that it injects its own CSS and predefined HTML tags around the images. To get rid of the default CSS a function needs to be added to the the theme’s function.php.
add_filter (
'gallery_style', create_function (
'$a',
'return preg_replace("%<style type=\'text/css\'>(.*?)</style>%s", "", $a);'
)
);
I’ve broken the lines of the code to make it fit here – it’s really a one liner but works like that too. Check out the styling that you need to add to your style.css to preserve the original gallery rule-set from sivel.net, where I found the above code.
But, that’s not enough. For the purpose I needed to be able to create the gallery from the scratch and control the HTML tags too. First a new page need to be created with an image gallery. The page will act as the invisible reservoir of images. The page can be set to be private and it need not to be visible in any way. To shorten the story a bit I will now present the code to grab the images and echo the gallery in PHP. I used this WP outfitter blog post as a base.
<?php
echo '<div class="gallery">';
$images = get_children(array( 'post_type' => 'attachment',
'numberposts' => 6,
'orderby' => 'rand',
'post_status' => null,
'post_parent' => 104,
'post_mime_type' => 'image'
));
if ($images) {
$k=1;
foreach ( $images as $image ) {
$img_title = $image->post_title;
$img_url = wp_get_attachment_url($image->ID);
$img_thumb = wp_get_attachment_thumb_url($image->ID);
echo '<dl id="image_'.$k.'"><dt>';
echo '<a href="'.$img_url.'"><img src="'.$img_thumb.
'" alt="'.$img_title.'" /> </a>';
echo '</dt></dl>';
$k++;
}
}
echo '</div>';
?>
That code will get 6 random image attachments from the post number 104, which is our invisible gallery holder page in my case. It will then get TITLE, URL of the original image and URL of the thumbnail of the six images one by one and store the values to variables. The code is supposed to be placed in the template .php file where you want your gallery to materialize.
I have here used echo to display the same HTML tags as in the original WordPress gallery along with variables in their right places. With the code above a gallery can be wrapped with the HTML tags your liking. The variable $k is interesting, because it’s used to add unique counting ID to an image: first image has id=”image_01″ and so on. This is important for our next step, because the images need to be identified by jQuery for the final layout design. The following code should be placed just after the above PHP block.
<script>
jQuery(document).ready(function() {
jQuery('#image_1,#image_2,#image_3').wrapAll('<div id="upperrow" />');
jQuery('#image_4,#image_5').wrapAll('<div id="middlerow" />');
jQuery('#image_6').wrapAll('<div id="bottomrow" />');
});
</script>
What happens here is that jQuery picks up images of certain ID’s and wraps them with corresponding DIVs. This could have probably been done with PHP only, but that’s out of my league and jQuery has the right tools straight out from the box. All of the rows have the same CSS rules of {float:left;clear:both}.
The finished gallery is viewable on The Haven of Yacht Club Records. By constructing loops and counters in the jQuery part and modifying the original number of images it’s possible to create quite large image/icon or attachment galleries or random visual elements.
