Display featured image URL in the loop - php

Question

I have a problem trying to get the thumbnail URL of each post on the archive page.
I used the basic technics but it always return the url of the first featured image of the page.
Here the part of the code of my template-parts/post/content/content.php
The goal of this is to open the featured image of each post on a lightbox.
Here the link to the page : http://leos-sipek.thomasdesnoyers.com/category/divers-types-dune-ideographie-stochastique/peinture-sur-papier/metaplasme/
If you click on the second post it shows the featured image of the first post.
<div class="post-thumbnail">
<a rel="lightbox" data-gall="gall-frame" data-lightbox-type="inline" href="#inline-content">
<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
</a>
</div>
<!-- Lightbox -->
<div id="inline-content" style="display:none;">
<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<div class="img-single" style="background-image: url('<?php echo $image[0]; ?>')"></div>
</div>
Thanks

Answer 1

Actually I was pointing the same url for each lightbox so it opened the same each time.
I change the Href of each lightbox by the ID of each post and it works.
<div class="post-thumbnail">
<a rel="lightbox" data-gall="gall-frame" data-lightbox-type="inline" href="#<?php the_ID(); ?>">
<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
</a>
</div>
<!-- Lightbox -->
<div id="<?php the_ID(); ?>" style="display:none;">
<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); endif ?>
<div class="img-single" style="background-image: url('<?php echo $image[0]; ?>')"></div>
</div>
Thanks everyone for your help

Answer 2

In your code you displaying only first element from $image array, try to change this line:
<div class="img-single" style="background-image: url('<?php echo $image[0]; ?>')"></div>
via this code to run through all array elements:
<?php foreach ($image as $image_link) : ?>
<div class="img-single" style="background-image: url('<?php echo $image_link; ?>')"></div>
<?php endforeach; ?>

Answer 3

Why not use the_post_thumbnail_url() ?
<div class="post-thumbnail">
<a rel="lightbox" data-gall="gall-frame" data-lightbox-type="inline" href="#inline-content">
<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
</a>
</div>
<!-- Lightbox -->
<div id="inline-content" style="display:none;">
<?php if (has_post_thumbnail( $post->ID )) : ?>
<div class="img-single" style="background-image: url('<?php echo get_the_post_thumbnail_url($post->ID, 'single-post-thumbnail'); ?>')"></div>
</div>
However if you are only using one lightbox for all posts in a loop, you will need to set something like a data-url="<?php echo get_the_post_thumbnail_url($post->ID, 'single-post-thumbnail'); ?>" in the lightbox link. Then you can use JS to swap that URL in for the background image on click. Something like:
<script>
(function($) {
$('a[rel="lightbox"]').on('click', function(e) {
var imgSrc = $(this).data('url');
$('#inline-content').css('background-image', imgSrc);
});
})(jQuery);
</script>