0

I'm customizing a client theme and he asked me to do this: when a user clicked on thumbnail of a post on index and archives, the large size of post thumbnail shows up in a lightbox. So I've got the large size of post thumbnail using:

<?php $page_id = get_queried_object_id(); ?>
<?php $thumbs_array = wp_get_attachment_image_src( get_post_thumbnail_id($page_id), 'large' ); ?>
<?php $large_thumb = $thumbs_array[0]; ?>

and put the $large_thumb value on the appropriate tag as data-*, like:

<div class="img lightbox-trigger" data-large-thumb="<?php echo $large_thumb ?>">                
    <?php the_post_thumbnail('thumbnail'); ?>
</div><!-- .img .lightbox-trigger -->

And I show that in a lightbox using snippet of jQuery.

Now on index, all things work just fine and perfect. But when I check Archive pages, it doesn't work like it should. I check the generated source and saw the data-large-thumb on archives is Empty!, where on index data-large-thumb has the address of Thumbnail's large size in it.

The weird thing is, needed markup called from the same file using get_template_part. I mean when I check index.php and archive.php both has

<?php get_template_part( 'col-h' );?>           

which load codes from same file, but this same file returns value on index and Nothing on archive, when I var_dump($large_thumb) it's NULL. That's weird I think!

Generated results on index.php:

<div class="img lightbox-trigger" data-large-thumb="http://example.com/wp-content/uploads/2016/12/Desert-1024x768.jpg">                 
    <img src="http://example.com/wp-content/uploads/2016/12/Desert-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" width="150" height="150">
</div>

and on archive.php:

<div class="img lightbox-trigger" data-large-thumb="">              
    <img src="http://example.com/wp-content/uploads/2016/12/Desert-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" width="150" height="150">
</div>

Update I var_dumped those 3 related variables to know what they returns. On index:

$page_id returns 0
$thumbs_array return correct array containing url, width, height, etc
$large_thumb returns url of large thumbnail

and Everything works just fine on index. but on archive pages:

$page id returns proper value; 2, 3, 8, 10 or whatever the ID is
$thumbs_array returns `bool(false)`
$large_thumb returns`NULL`

So it seems the problem is related to wp_get_attachment_image_src which doesn't work on Archive unfortunately. Is there any other WP function which I should use ? why it returns False ?

What I'm missing here ?

And Please let me know if any additional information needed to solve this.

Thanks.

  • Ok...I suspected to this custom theme that I'm working on, so I test these codes mentioned on different site, with totally different theme, and I faced the exact issue. $large_thumb has the address of large thumbnail image on index and Nothing on archives. Is that something wrong with using get_queried_object_id on archive or what ? – startToday Dec 14 '16 at 10:00
0

get_queried_object_id will return the ID for the object that is queried (obviously). On archive pages, that would be the ID of the archive – unless your archive has a thumbnail, you're not going to get an image.

Depending on where you're setting the $large_thumb variable, you should be able to omit the ID altogether (as long as it's used within the loop) using the get_the_post_thumbnail_url()-function.

If you place your code right above the code to display the image, it should work:

<?php
$large_thumb = get_the_post_thumbnail_url(null, 'large');
// Notice the null-value, instead of providing a post ID or object, will default to the current global $post.
?>
<div class="img lightbox-trigger" data-large-thumb="<?php echo $large_thumb ?>">                
    <?php the_post_thumbnail('thumbnail'); ?>
</div><!-- .img .lightbox-trigger -->
  • What a mistake... this wasted hours of my time! your solution works great, I appreciate your help Emil. – startToday Dec 14 '16 at 13:25
  • You're welcome! You can find more info about the loop and how it works here: developer.wordpress.org/themes/basics/the-loop – Emil Dec 14 '16 at 13:26
  • That's a good resource Emil. Again, thank you so much. – startToday Dec 14 '16 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.