1

I have a page showing custom post type, but I don't know how to link to the full size image that can be opened by a lightbox plugin.

the post page is like:

 <div class="content" id="main-content">
<?php
  $args=array(
     'post_type' => 'painting',
    );
  $the_query = new WP_Query($args);
  ?>

  <?php if ($the_query->have_posts() ): while ($the_query->have_posts() ):$the_query->the_post(); ?>

<div class="painting col-md-3 col-sm-6" id="inside">
    <div class="painting-image">
        <?php the_post_thumbnail('painting-thumbnail'); ?>
        <span class="overlay"></span>
    </div>
</div>

<?php endwhile; ?>
<?php endif; ?>

I know I should use something in an {a} tag, but I don't find how to link to the source. I've also read the wp codex on 'wp_get_attachment_image_src', but it wasn't helpful. Thanks for further help!

1

The following are examples for displaying the post's featured image, which is linked to the image's full-sized version.

For WordPress version 4.4.0 and above, you can use the_post_thumbnail_url(), like this:

<a href="<?php the_post_thumbnail_url( 'full' ); ?>" class="thickbox"><?php // wrapped
    the_post_thumbnail( 'painting-thumbnail' ); ?></a>

For earlier versions of WordPress, you can use wp_get_attachment_image_src(), like this:

<?php
$post_thumbnail_id = get_post_thumbnail_id();
$info = wp_get_attachment_image_src( $post_thumbnail_id, 'full' );
?>
<a href="<?php echo esc_url( $info['0'] ); ?>" class="thickbox"><?php // wrapped
    the_post_thumbnail( 'painting-thumbnail' ); ?></a>

You'd replace thickbox with the proper class which will open the full-sized image in a modal/popup.

  • thanks, but it still opens the raw full size image in the browser window, although I'v checked the option in plugin which enables the WordPress link images. – Omid Akbari Kh. Apr 5 '18 at 14:59
  • Perhaps conflict with other scripts, or the necessary scripts are not loaded. If you could share the page URL, I'd happily help you solve the problem. – Sally CJ Apr 11 '18 at 3:35
  • 1
    Great tip! There was a conflict between jqurey and bootstrap. Solved it and the code works fine. Thank you so much @sally-cj – Omid Akbari Kh. Apr 13 '18 at 11:43

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.