在循环中显示特色图像URL

时间:2017-04-10 18:17:23

标签: php wordpress

我在尝试获取存档页面上每个帖子的缩略图URL时遇到问题。 我使用了基本技术,但它总是返回页面第一个特色图像的URL。

这里是我的template-parts / post / content / content.php

代码的一部分

这样做的目的是打开灯箱上每个帖子的精选图像。 这是指向页面的链接:http://leos-sipek.thomasdesnoyers.com/category/divers-types-dune-ideographie-stochastique/peinture-sur-papier/metaplasme/

如果您点击第二篇文章,则会显示第一篇文章的精选图片。

    <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>

谢谢

3 个答案:

答案 0 :(得分:1)

你们指的是正确的。 实际上我指的是每个灯箱的相同网址,所以每次都打开相同的网址。 我用每个帖子的ID更改每个灯箱的Href,然后就可以了。

    <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' ); ?>
            <div class="img-single" style="background-image: url('<?php echo $image[0]; ?>')"></div>
    </div>

感谢大家的帮助

答案 1 :(得分:0)

在您的代码中,您只显示$ image数组中的第一个元素,尝试更改此行:

<div class="img-single" style="background-image: url('<?php echo $image[0]; ?>')"></div>

通过此代码运行所有数组元素:

<?php foreach ($image as $image_link) : ?>
<div class="img-single" style="background-image: url('<?php echo $image_link; ?>')"></div>
<?php endforeach; ?>

答案 2 :(得分:0)

为什么不使用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>

但是,如果您只为循环中的所有帖子使用一个灯箱,则需要在灯箱链接中设置类似data-url="<?php echo get_the_post_thumbnail_url($post->ID, 'single-post-thumbnail'); ?>"的内容。然后,您可以使用JS在点击时将该URL交换为背景图像。类似的东西:

<script>
    (function($) {
        $('a[rel="lightbox"]').on('click', function(e) {
            var imgSrc = $(this).data('url');

            $('#inline-content').css('background-image', imgSrc);
        });
    })(jQuery);
</script>