Tag: css

You might expect a more complex project from the title, but this is actually a simple and straightforward implementation. While renovating a WordPress-based website, I wanted to create a clean visual effect using the default gallery feature. I initially tested with five images, which automatically arranged themselves into an unintended two-row “inverted staircase” pattern — three images on the first row and two on the second. This accident sparked the idea of completing the staircase with a third row containing a single image, with all images randomly selected from a larger pool.

However, the default WordPress gallery injects its own CSS and HTML wrappers, limiting customization. To remove the default styling, a function needs to be added to the theme’s functions.php file.

add_filter (
   'gallery_style', create_function (
      '$a',
      'return preg_replace("%<style type=\'text/css\'>(.*?)</style>%s", "", $a);'
   )
);

I’ve broken the code across multiple lines for readability, but it’s originally a one-liner and functions the same either way. To preserve the original gallery styling, you’ll need to add specific CSS rules from sivel.net to your style.css.

However, that alone isn’t sufficient. I needed full control over the HTML structure, so I had to build the gallery from scratch. This required creating a new page in WordPress containing the image gallery—this page serves as a hidden image source. It can be set to Private and excluded from navigation or visibility entirely.

To keep things brief, here’s the PHP code I used to extract the images and output the custom gallery layout.

<?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>';
 ?>

This code fetches six random image attachments from post ID 104, which I use as the hidden gallery source page. It retrieves each image’s title, original URL, and thumbnail URL, storing them in variables. Place this code in the template .php file where you want the gallery to appear.

I use echo to output HTML tags matching the default WordPress gallery, inserting the variables accordingly. You can wrap this output with your preferred HTML tags as needed.

The variable $k is key—it assigns a unique ID to each image (e.g., id="image_01"), which is essential for the next step, where jQuery targets these IDs for layout styling. The following jQuery code should be added immediately after this 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>

jQuery selects images by their unique IDs and wraps each in corresponding <div> elements. While this could theoretically be done with PHP, jQuery provides an easier, more direct solution.

Each row is styled with the same CSS rules: { float: left; clear: both; }.

By using loops and counters in the jQuery code, you can dynamically control the number of images and create large, randomized galleries or visual layouts with minimal effort.