treehouse : what would you like to learn today?
Web Design Web Development iOS Development

WP - Clickable featured image

  • Hi

    I have a question on how to make my featured image clickable.

    example
    http://www.nordarchitects.dk/featured/healthcare-center/

    On this page i would very much like to be able to activate the gallery by clicking the featured image.

    Is there any way to do this?

    Thanks
    Simon
  • Oooooo an interesting query.

    You probably can, though the ease of that depends on how your page is currently structured. Can you post the code for the template in question?
  • Here's the code for my single page template.
    Let me know if you need more.




    <?php get_header(); ?>

    <div class="single-wrapper">

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

    <div class="xlink">
    <a class="xlink" href="/featured">X</a>
    </div>

    <div class="editlink">
    <?php edit_post_link('Edit'); ?>
    </div>

    <div class="singleheader">
    <h1 class="pageheader"><?php the_title(); ?></h1>
    </div>

    <div class="singlefeatured">
    <?php the_post_thumbnail ('large');
    echo get_post(get_post_thumbnail_id())->post_excerpt; ?>
    </div>

    <div class="singlecontent">
    <?php the_content(); ?>
    </div>

    <div class="singleother">
    <?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>

    <?php if ( get_the_author_meta( 'description' ) ) : // If a user has filled out their description, show a bio on their entries ?>
    </div>

    <?php endif; ?>

    <?php endwhile; // end of the loop. ?>

    </div><!-- End single-wrapper -->

    <?php get_footer(); ?>
  • I feel like you could do something like:
    <a href="<?php echo wp_get_attachment_url(); ?>" rel="fancybox"><?php the_post_thumbnail('large'); ?></a>
  • Isn't the easiest way to do it just to wrap the thumbnail in the permalink?

    <a href="<?php the_permalink(); ?>" />
    <?php the_post_thumbnail ('large'); ?>
    </a>
  • @Johnnyb - he's trying to open up the lightbox, not link to the page that you're already on.
  • hmmm...it doesn't seem to work.

    @TheDoc

    <a href="<?php echo wp_get_attachment_url(); ?>" rel="fancybox"><?php the_post_thumbnail('large'); ?></a>


    clicking the featured img now reloads the page and doesn't activate the fancybox.

    ...any suggestions?

    Simon
  • Blast. Okay, give this one a go:

    <a href="<?php echo wp_get_attachment_url($attachment_id); ?>" rel="fancybox"><?php the_post_thumbnail('large'); ?></a>
  • Still the same I'm afraid.

    Do you think i'm doing simething wrong?



    <?php get_header(); ?>

    <div class="single-wrapper">

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

    <div class="xlink">
    <a class="xlink" href="/featured">X</a>
    </div>

    <div class="editlink">
    <?php edit_post_link('Edit'); ?>
    </div>

    <div class="singleheader">
    <h1 class="pageheader"><?php the_title(); ?></h1>
    </div>

    <div class="singlefeatured">
    <a href="<?php echo wp_get_attachment_url($attachment_id); ?>" rel="fancybox"><?php the_post_thumbnail('large'); ?></a>
    </div>


    <div class="singlecontent">
    <?php the_content(); ?>

    </div>

    <div class="singleother">
    <?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>

    <?php if ( get_the_author_meta( 'description' ) ) : // If a user has filled out their description, show a bio on their entries ?>
    </div>

    <?php endif; ?>

    <?php endwhile; // end of the loop. ?>

    </div><!-- End single-wrapper -->

    <?php get_footer(); ?>
  • What is it outputting?
  • The same as before - it reloads the page when clicking the featured image
  • I meant the HTML, but I was able to check.

    Are the images not attached to the post? How are you creating the gallery via the built-in WordPress functionality?
  • ok.

    The images are attached as a gallery inside the post, and the fancybox is a wp-plugin.
  • Well, I'd say this is my final suggestion. I have no idea why it wouldn't be working:
    <a href="<?php echo wp_get_attachment_url($post->ID); ?>">
  • It doesn't work either i'm afraid.

    too bad

    I guess it has something to do with the plug-in?



    <?php get_header(); ?>

    <div class="single-wrapper">

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

    <div class="xlink">
    <a class="xlink" href="/featured">X</a>
    </div>

    <div class="editlink">
    <?php edit_post_link('Edit'); ?>
    </div>

    <div class="singleheader">
    <h1 class="pageheader"><?php the_title(); ?></h1>
    </div>

    <div class="singlefeatured">
    <a href="<?php echo wp_get_attachment_url($post->ID); ?>">
    <?php the_post_thumbnail('large'); ?></a>
    </div>


    <div class="singlecontent">
    <?php the_content(); ?>

    </div>

    <div class="singleother">
    <?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>

    <?php if ( get_the_author_meta( 'description' ) ) : // If a user has filled out their description, show a bio on their entries ?>
    </div>

    <?php endif; ?>

    <?php endwhile; // end of the loop. ?>

    </div><!-- End single-wrapper -->

    <?php get_footer(); ?>
  • Honestly, I am completely stumped. The ONLY thing that I can think of is that the images somehow aren't properly being attached the the post.

    Can you do one more check for me? Click on 'Media' in the left sidebar and find the images in question. If they are attached to the post it should look something like this: http://grab.by/aYXt

    If not, it will say "(Unattached)".
  • The images are attached to the posts.

    Could it have something to do with that the posts are on custom page templates?

    All posts on the custom page templates refer to my single page template
  • Hello, we have a homepage slider for revolving images. We wanted to feature certain projects on a rotating schedule in the number 2 and number 3 slot but cannot figure out how to make the image clickable with a URL that redirects to the actual portfolio page for that particular project. I am a PHP novice so I am not sure where to even insert the code. Any help would be much appreciated.

    Thank you.http://buzzbombcreative.com

  • @jamesbuzz - please create a new thread for your question.

This discussion has been closed.
All Discussions