How can I alter the [gallery] markup?

by

The question:

I would like to change the markup created by from what is it as standard (dl) to a unordered-list with a difference. Below is the desired markup:

<ul>
    <li><a href="/path/to/image.jpg" rel="nofollow noreferrer noopener"><img src="/path/to/image.jpg" /></a></li>
    <li><a href="/path/to/image2.jpg" rel="nofollow noreferrer noopener"><img src="/path/to/image2.jpg" /></a></li>
    <!-- And so on, all in one ul -->
</ul>

I want the main image source for the link & img, as I want to run the img src through a php cropper script.

Is this possible? I’m sure we can crack it!

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

Thanks for your replies, Jan & Rarst. They pointed me in the right direction. Here’s what I ended up with.

This disables shortcodes in the content. Perfect for this site & the function gets attached images & spits them out as a list. (I found the function somewhere & slimmed it down a little)

// Removed shortcodes from the content
add_filter('the_content', 'strip_shortcodes');

// Get attached images & spits out a list of them.
function nerdy_get_images($size = 'thumbnail', $limit = '0', $offset = '0') {
    global $post;
    $images = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );
    if ($images) {
        $num_of_images = count($images);
        if ($offset > 0) : $start = $offset--; else : $start = 0; endif;
        if ($limit > 0) : $stop = $limit+$start; else : $stop = $num_of_images; endif;
        $i = 0;
        foreach ($images as $image) {
            if ($start <= $i and $i < $stop) {
            $img_title = $image->post_title;   // title.
            $img_description = $image->post_content; // description.
            $img_caption = $image->post_excerpt; // caption.
            $img_url = wp_get_attachment_url($image->ID); // url of the full size image.
            $preview_array = image_downsize( $image->ID, $size );
            $img_preview = $preview_array[0]; // thumbnail or medium image to use for preview.
            ?>
            <li>
                <a href="<?php echo $img_url; ?>" rel="nofollow noreferrer noopener"><img src="<?php echo $img_preview; ?>" alt="<?php echo $img_caption; ?>" title="<?php echo $img_title; ?>"></a>
            </li>
            <?
            }
            $i++;
        }
    }
}

This is the call in single.php

<ul>
    <?php nerdy_get_images('medium','0','0'); ?>
</ul>

This spits out a list exactly how I wanted it.

Once again, thanks guys!

Method 2

Output of items in gallery_shortcode() function is not filtered, so no opportunity to change it there. Markup can only be replaced in full, using post_gallery filter that runs at start of it. It’s a little unconventional comparing to usual filtering end result and is probably for performance reasons (generating gallery can be considerably computationally heavy).

But it uses wp_get_attachment_link() to generate links and its output is filtered through wp_get_attachment_link hook with plenty of details:

apply_filters( 'wp_get_attachment_link', "<a href='$url' title='$post_title'>$link_text</a>", $id, $size, $permalink, $icon, $text );

Do you need to perform some really complex crop that you want separate script to handle it?Why not let WP handle it with add_image_size() ?

Method 3

If you want change dl lists to ul lists on all galleries, not only on those that request this via extra attributes, you can hook into the post_gallery filter that gets run at the beginning of the gallery_shortcode function. There you can override and set default values for the attributes.

The final output is not filtered, but I guess it should be possible to remove the default shortcode handler for gallery, and add your own function that wraps gallery_shortcode() but adds final processing at the end. Or try hooking into wp_get_attachment_link, as Rarst suggests.

Method 4

This is the way I’m doing it right now. I’ve got 2 codes, one for displaying the gallery shortcode, and another one for displaying the rest of the content:

The first code is:

$gallery = '';
$match = '/([)(gallery).*?(ids).*?(])/';
$matches = '';
preg_match($match, get_the_content(), $matches, PREG_OFFSET_CAPTURE);
if ($matches) :
    $matches = $matches[0];
    $gallery = $matches[0];
    echo '';
    do_shortcode($gallery);
    echo '';
endif;

And the second one:

$match = '/([)(gallery).*?(ids).*?(])/';
$content = preg_replace($match, '', get_the_content());
if (!empty($content)) :
    $content = '' . $content . wp_link_pages(        array( 'before' => '' . __( 'Pages:', 'veento' ),   'after' => '' ) ) . '';
    print $content;
endif;


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment