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