Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Link Featured Image WordPress

  • SOLVED

Im in the process of developing a WP site and each post uses a featured image for a flyer. On the single.php page I want the featured image to be linked to the full sized image. I need it to be linked because these flyers have lots of info on them and need to be seen in full size to be read.

I currently have the following code to display the featured image but I don't know how to go about linking it to the full sized image...any help?

<?php if (has_post_thumbnail() ) {
the_post_thumbnail('large');
} else {
echo '<img src="'.get_bloginfo("template_url").'/images/flyer-default.png" alt="" />';
} ?>

Answers (3)

2011-01-17

Jens Filipsson answers:

Do you want to link the thumbnail to the large image? Anyhow you need to get the attachment src, like the example below. This should work:

<?php
$args = array(
'order' => 'ASC',
'orderby' => 'menu_order',
'post_type' => 'attachment',
'post_parent' => $post->ID,
'post_mime_type' => 'image',
'post_status' => null,
'numberposts' => -1,
);
$attachments = get_posts($args);
if ($attachments) { ?>
<div class="something">
<?php
foreach ($attachments as $attachment) {
$imageTitle = $attachment->post_title;
$imageSrc = wp_get_attachment_image_src($attachment->ID, 'large'); ?>

<a href="<?=$imageSrc[0]?>" title="<?=$imageTitle?>" alt="<?=$imageTitle?>"><?php echo wp_get_attachment_image($attachment->ID, 'thumbnail', false); ?></a>
<?php
} ?>
</div>
<?php
} ?>


Jens Filipsson comments:

Comparing mine and idt:s answer, I came up with a solution combining those two, which I think would be the best. I haven't tried this out though, but I think it will work.

<?php if (has_post_thumbnail() ) {

$id = get_post_thumbnail_id();
$imageSrc = wp_get_attachment_image_src($id, 'large'); ?>

<a href="<?=$imageSrc[0]?>" title="<?=$imageTitle?>" alt="<?=$imageTitle?>"><?php the_post_thumbnail(); ?></a>

} else {



echo '<img src="'.get_bloginfo("template_url").'/images/flyer-default.png" alt="" />';



} ?>


Jens Filipsson comments:

Sorry, had a small typo, here is the working code:

<?php if (has_post_thumbnail() ) {

$id = get_post_thumbnail_id();
$imageSrc = wp_get_attachment_image_src($id, 'large'); ?>

<a href="<?=$imageSrc[0]?>" title="<?=$imageTitle?>" alt="<?=$imageTitle?>"><?php the_post_thumbnail(); ?></a>

<?php

} else {



echo '<img src="'.get_bloginfo("template_url").'/images/flyer-default.png" alt="" />';



} ?>


Matthew Martin comments:

I want the "large" thumbnail to be displayed & have it linked to the full sized image/attachment.

Your code seems to be close but its not displaying for me. It wont event display the fallback image.


Jens Filipsson comments:

Hmm, ok, try this! I think this should work!

<?php if (has_post_thumbnail() ) {
$imageID = get_post_thumbnail_id();
$imageSrc = wp_get_attachment_image_src($imageID, 'full'); ?>



<a href="<?=$imageSrc[0]?>"><?php the_post_thumbnail('large'); ?></a>



<?php



} else {

echo '<img src="'.get_bloginfo("template_url").'/images/flyer-default.png" alt="" />';
} ?>


Matthew Martin comments:

Thanks Jens! works perfect!


Jens Filipsson comments:

Glad I could help!

2011-01-17

Cosmin Popovici answers:

Are you defining the large version of your thumbnail in functions.php ?

'Cause if not, I don't think the_post_thumbnail('large') would work...


Matthew Martin comments:

Im defining it in the media settings: [[LINK href="http://cl.ly/44aj"]][[/LINK]]


Matthew Martin comments:

[[LINK href="http://cl.ly/44aj"]]Screenshot[[/LINK]]

2011-01-17

idt answers:

You can do it like this:
<?php if (has_post_thumbnail() ) {
$id = get_post_thumbnail_id();
wp_get_attachment_link($id, 'large')
} else {

echo '<img src="'.get_bloginfo("template_url").'/images/flyer-default.png" alt="" />';

} ?>


My previous answer suggested using the_attachment_link but it seems to have been deprecated.

More reading here: [[LINK href="http://codex.wordpress.org/Template_Tags/wp_get_attachment_link"]]http://codex.wordpress.org/Template_Tags/wp_get_attachment_link[[/LINK]]