WordPress.org

Forums

[resolved] Post_thumbnail questions (7 posts)

  1. derrickallen
    Member
    Posted 2 years ago #

    I have split my categories page and my single post page into two columns. On the left side I have include the featured image "post_thumbnail" and on the right side I have included the content.

    This is the code I'm using on the single post page so that the featured image shows up as a thumbnail on the left and so that it pops out to the full picture:

    <div style="float:left;width:40%;vertical-align:middle;">
    
     <?php
     if ( has_post_thumbnail()) {
       $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
       echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
       the_post_thumbnail('thumbnail');
       echo '</a>';
     }
     ?>
    </div>

    Two questions on this. Can I make it so that the photo pops up to its own small window in front of the page in some fashion instead of the WHOLE page forwarding to the photo and then you have to press Back on the browser? Also, the thumbnail tends to cut off alot. Is there a way or a setting to make it try and fit more of the photo into the thumbnail??

    Example: http://crossfitcft.com/2012/08/friday-10-august-2012.html

  2. vtxyzzy
    Member
    Posted 2 years ago #

    To change the appearance of the thumbnail, go to Admin->Media->Library and edit the picture.

    • Click 'Edit Image'.
    • Under 'Thumbnail Settings' make sure Thumbnail is selected under 'Apply changes to:'.
    • Click the crop icon at the top right.
    • Drag the cursor across the image to select the thumbnail area.
    • Click the crop icon to crop.
    • Click Save.

    For the 'small window', you can use some javascript to create a popup. Save this in your theme's folder as script.js:

    // Display Pop-Ups
    var win = '';
    function popitup(winURL, ht, wid)
    {
      win = window.open(winURL, "zip", "height="+ht+",width="+wid+",scrollbars,resizable,left=0,top=0,screenX=0,screenY=0");
       if (win.opener == null) win.opener = self;
       win.focus();
    }

    There are several ways to load the script. One way is to add this line in header.php:

    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/script.js"></script>

    Then code your image in an anchor link something like this:

    <a href=\"javascript:void(popitup('imageurl', '800', '800'))\" onfocus=\"this.blur()\">
    <img class='thumbnail alignleft' src='imageurl' alt='imagetitle' title='imgagetitle' />
    </a>

    Replace 'imageurl' with the URL to the image and 'imagetitle' with a title for the image.

  3. derrickallen
    Member
    Posted 2 years ago #

    vtxyzzy:
    Can your method be incorporated by the imagesrc being the_post_thumbnail for the current post??

  4. esmi
    Forum Moderator
    Posted 2 years ago #

  5. vtxyzzy
    Member
    Posted 2 years ago #

    I think you would use get_the_post_thumbnail() to retrieve the image and then wrap it in the code shown.

  6. derrickallen
    Member
    Posted 2 years ago #

    FINALLY got this working. I installed WP jQuery Lightbox.

    Then I just inserted the lightbox tag into the existing a href of the PHP code I was using before and the images starting hyperlinking to the lightbox instead of the full page. yay :)

    <?php
     if ( has_post_thumbnail()) {
       $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
       echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" rel="lightbox">';
       the_post_thumbnail('thumbnail');
       echo '</a>';
     }
     ?>
  7. derrickallen
    Member
    Posted 2 years ago #

    closing.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.