0

I am trying to get WordPress to include the thumbnail image within the image tag of any image attached to a post, to make the thumbnail available to the RoyalSlider plugin. (I am hard-coding the plugin into the site - don't want to use the wordpress version for various reasons.)

The end goal is this:

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

i.e. WordPress displays the images attached to a post, but within each one the relevant thumbnail is added in 'data-rsTmb'.

I would liked to be able to do this via some code inserted into a specific page template, rather than modifying the main loop, as I do not require this behavior for the whole site, just one slider that is created through a custom page template.

I currently have this:

$image = wp_get_attachment_image_src( $attachment_id, 'thumbnail');
/*
$image[0] => url
$image[1] => width
$image[2] => height
*/
echo '<img class="rsImg" src="'. $image[0] .'" data-rsTmb="small-image.jpg" alt="image description" />';

Any help much appreciated!

EDIT: UPDATED TO SHOW CODE I AM USING ON THE SITE BASED ON SUGGESTIONS IN COMMENTS:

<?php

/*
    Template Name: Gallery
*/

?>
<?php query_posts('cat=7&amp;showposts='.get_option('posts_per_page=1')); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php 

$image = wp_get_attachment_image_src( $attachment_id, 'full');
$th = wp_get_attachment_image_src( $attachment_id, 'thumbnail');

echo '<img class="rsImg" src="'. $image[0] .'" data-rsTmb="'. $th[0] .'" alt="image description" />';

?>

<p><?php the_content(); ?></p>

<?php endwhile; endif; ?>

<php wp_reset_query(); ?>

EDIT #2: Alternate code from comment in the previous version of this question - this code works, but not for every image (?!): 

/*
    Template Name: Gallery
*/

?>

<?php query_posts('cat=7&amp;showposts='.get_option('posts_per_page=1')); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php 

$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent='.$post->ID );

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 .'" />';

}
?>

<p><?php the_content(); ?></p>

<?php endwhile; endif; ?>

<php wp_reset_query(); ?>
Community
  • 1
  • 1
user2654408
  • 213
  • 2
  • 10
  • I believe Fabio answer will solve your question. You use `wp_get_attachment_image`(http://codex.wordpress.org/Function_Reference/wp_get_attachment_image ) to get the thumbnail and full size of your images, save each array in one variable and call them into your `` tag. – Leo Aug 19 '14 at 17:47
  • @Leo please see my comment on Fabio's comment. – user2654408 Aug 19 '14 at 22:16
  • @Leo No, can't get it to work. – user2654408 Sep 02 '14 at 13:23
  • What exactly is not working? It seems to be fine on your website. What am I missing? – Leo Sep 04 '14 at 17:38

1 Answers1

0

Using your code, try this:

$image = wp_get_attachment_image_src( $attachment_id, 'full');
$th = wp_get_attachment_image_src( $attachment_id, 'thumbnail');

echo '<img class="rsImg" src="'. $image[0] .'" data-rsTmb="'. $th[0] .'" alt="image description" />';

of course you may need some adjustment, specially if you want to use a special size for the big image (instead of full size) but you'll get the idea

Devin
  • 7,690
  • 6
  • 39
  • 54
  • Thanks, but while this SHOULD work it seems to be having zero effect. See the 'GALLERY' section of the site [here](http://macayamagic.com/FirstOption/) (you need to click on 'gallery' in the nav bar at bottom of screen; inexplicably, the first slide is now white - but click this and the slider advances to the images) - if you look at the code, the images are showing as usual, without thumbnails embedded within the `` tag. Any ideas? – user2654408 Aug 19 '14 at 22:14
  • I did check the site and it seems you're not using the same code, I don't see any output for the thumb or data-rsTmb, which at least should be empty, but you don't even have the element. Are you sure you're using the correct code? – Devin Aug 19 '14 at 22:20
  • I have updated the question to show the exact code I'm using on the site - seemed the easiest way to show it in a block. – user2654408 Aug 20 '14 at 02:34
  • @Leo I have also added the code from a comment on the earlier version of this question, see above. This is the code that is live on the site URL right now. – user2654408 Aug 20 '14 at 14:36