WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Make image header (at the top of a post) display as Fancybox (7 posts)

  1. bholtbholt
    Member
    Posted 1 year ago #

    I've been searching for quite some time, trying to figure out what the appropriate code would be to make the image (at the top of my post, before the title) linkable to its full size version and open it via Fancybox.

    This is the code I currently have in place:
    <?php if ( current_theme_supports( 'get-the-image' ) ) get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'top-post-thumbnail', 'link_to_post' => false, 'image_class' => 'featured', 'attachment' => false, 'width' => 470 ) ); ?>

    I thought adding an anchor that would get the permalink would do it, but it just links to the post (like the link_to_post does).

    So the code needs to figure out what image it is, then link to the full size source, and open it in Fancybox. At least I think that's the correct logic. I'm new to WP and PHP so I'm not all that sure of its limitations.

    For reference: http://www.brianholt.ca/but-i-really-really-like-you/

  2. Mohd Rafie
    Member
    Posted 1 year ago #

    I believe you for got to declare which class that the fancybox should pickup.

    If you want the class ie .featured to trigger the fancybox, you need to:

    1. Wrap the image to its original source file link
    2. Piece of code to trigger fancybox
    `
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    $("a.featured").fancybox();
    });
    </script>

    You can read it here:
    Fancybox How To

    Let me know if this one resolve your problem.

  3. bholtbholt
    Member
    Posted 1 year ago #

    After some more testing it seems the theme already includes the Fancybox for image links. Thanks for your help and the How To link though!

    This is the code that works for me now:
    <a id="single_image" href="http://www.brianholt.ca/wp-content/uploads/2012/07/ButIReallyReallyLikeYou.jpg"><?php if ( current_theme_supports( 'get-the-image' ) ) get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'top-post-thumbnail', 'link_to_post' => false, 'image_class' => 'featured', 'attachment' => false, 'width' => 470 ) ); ?></a>

    But I need to replace the href with something that's dynamic so it works as a standard template. Is there a script that can determine what the featured image is and then link to the full-size file?

    I suppose another (maybe simpler) way to do this would be change the post.php file so that it allows photos placed in the content div to float above (or left/right for vertical images) the title and byline sections. That would allow me to link the images to the gallery too. I'll take a look for something like that now. If anyone knows how to find/do that I'd be forever grateful for your reply!

    This is the post.php code I'm looking at:

    <?php do_atomic( 'open_entry' ); // oxygen_open_entry ?>
    
    <div class="post-content">
    
    <a id="single_image" href="http://www.brianholt.ca/wp-content/uploads/2012/07/ButIReallyReallyLikeYou.jpg"><?php if ( current_theme_supports( 'get-the-image' ) ) get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'top-post-thumbnail', 'link_to_post' => false, 'image_class' => 'featured', 'attachment' => false, 'width' => 470 ) ); ?></a>
    
    <?php echo apply_atomic_shortcode( 'entry_title', '[entry-title]' ); ?>
    
    <?php echo apply_atomic_shortcode( 'byline', '<div class="byline">' . __( '[entry-published] &middot; in [entry-terms taxonomy="category" before=""] [entry-edit-link before=" &middot; "]', 'oxygen' ) . '</div>' ); ?>
    
    <div class="entry-content">
    
    <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'oxygen' ) ); ?>
    
    <?php wp_link_pages( array( 'before' => '<p class="page-links">' . __( 'Pages:', 'oxygen' ), 'after' => '</p>' ) ); ?>
    
    </div><!-- .entry-content -->
  4. Mohd Rafie
    Member
    Posted 1 year ago #

    I am using iPad to reply to you, but you can use the_post_thumbnail strings.

    It will call the Featured Image on Post and Pages :)

    http://codex.wordpress.org/Function_Reference/the_post_thumbnail

    Let me know if you're stuck.

  5. bholtbholt
    Member
    Posted 1 year ago #

    YES! That was exactly it! Thanks so much.

    The final code looks like:

    <?php if ( has_post_thumbnail()) {$full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
       echo '<a href="' . $full_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >'; the_post_thumbnail('top-post-thumbnail'); echo '</a>'; } ?>

    That replaced the whole get-the-image format from before.

    Any chance you might be able to point me in the right direction to make an image (when placed in the content) float to the right so the title and byline sit on the left? I use that template for vertical images. Reference: http://www.brianholt.ca/caddy-shack/

  6. bholtbholt
    Member
    Posted 1 year ago #

    Update:

    I missed the class display in the final code before so there was no spacing between my image and post title. The final code should look like this:

    <?php if ( has_post_thumbnail()) {$full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
       echo '<a href="' . $full_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >'; the_post_thumbnail('top-post-thumbnail', array('class' => 'featured')); echo '</a>'; } ?>
  7. pa_esp
    Member
    Posted 1 year ago #

    @bholtbholt

    Your code works perfectly for me. Thank you so much for sharing it back to the page (so many people don't after they've solved a problem). I have spent a good few hours trying to save the same kind of problem as you had and you just saved my bacon!

    Lots of thanks also to @Mohd Rafie for the code advice.

    Many thanks indeed :)

Topic Closed

This topic has been closed to new replies.

About this Topic