Modify WordPress loop to output all images in a post with thumbnails included in the image tag?

Question

This question requires some php, some jquery, and some general programming logic.

With generous help in previous questions here, I have built a script that scans WordPress posts for image attachments and, if it finds any, moves these to list items in a newly created <ul> outside of the post. The reason for this is to make the images available to a slider (RoyalSlider) that I am hard-coding into the theme (I do not want to use the WP plugin version for several reasons).

You can see the site I am working on here.

The same script is feeding several parts of the site - the sliders in the top two sections, and the client logos in the last section.

I now need to add thumbnail navigation to the second section's slider. As you can see if you inspect the code, I have modified the WP loop (in the page template for this section) so that it is returning the thumbnails for any images attached to the post (as well as obviously the images themselves).

This is the code I am using to do this:

<?php 
    $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
    foreach( $images as $imageID => $imagePost )
    echo wp_get_attachment_image($imageID, 'thumbnail', false);
?>

The problem is that this currently is interacting with my jQuery script so that these thumbnails get moved to list-items and included in the slider as images! The goal instead is to include each thumbnail within the <img> tag of its respective image, like this:

 <img class="rsImg" src="image.jpg" data-rsTmb="small-image.jpg" alt="image description" />

So here's the logic part of the problem: what's the best way to get these thumbnails to behave like thumbnails, not images? I suspect that I need to somehow tag them in the WP page template loop before they ever get 'echo'd into the post, so that the other script doesn't pick them up? i.e. maybe pass them through as a sequence of variables, then use my script to check for these and if it finds them, assign them to the images in sequence, first to last? Is this possible? Or are there better ways of going about this? Can I maybe output both images and thumbnails in the desired code snippet directly from the WP loop?

I have almost zero knowledge of how to write PHP beyond basic includes, so cannot really experiment with this.

Any help with this is hugely appreciated - I understand this question is a tall order as it requires expertise in several areas and is quite specific, but I think it may help others in similar situations, and I'd certainly learn a lot from know how to approach/accomplish this!

Answer 1

Instead of

echo wp_get_attachment_image($imageID, 'thumbnail', false);

^ This returns an HTML img element.

use

wp_get_attachment_image_src( $imageID, $size, $icon );

^ This returns an Array that contains Url, Width, Height of the image.

example in your case:

$images =& get_children( 
               array(
                     'post_type'      => 'attachment',
                     'post_mime_type' => 'image',
                     'post_parent'    => $post->ID,
                     'posts_per_page' => -1
                    )
              );

foreach ( (array) $images as $imageID => $imagePost ) {
   // Getting the full image size and thumbnail
   $thumbnail = wp_get_attachment_image_src( $imageID, 'thumbnail');
   $full = wp_get_attachment_image_src( $imageID, 'full');

   echo '<img class="rsImg" src="'. $full[0] .'" data-rsTmb="'. $thumbnail[0] .'" alt="'. $imagePost->post_content .'" />';

}

Answer 2

I don't know if I got it right. I understood you don't want the thumbnails do be matched with your jQuery.

You can solve it just modifying the matched elements of your jquery code. It is not the best solution, but the simpler based on what you have done.

Add a class to the thumbnails:

echo wp_get_attachment_image($imageID, 'thumbnail', false);

to

echo wp_get_attachment_image($imageID, 'thumbnail', false, array('class' => 'thumbsimg'));

Reference: http://codex.wordpress.org/Function_Reference/wp_get_attachment_image

And change your jQuery code:

var matchesEl = "img, iframe"

to

var matchesEl = "img:not(.thumbsimg), iframe"