Support » Fixing WordPress » Post_thumbnail questions

  • Resolved derrickallen

    (@derrickallen)


    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

Viewing 6 replies - 1 through 6 (of 6 total)
  • 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.

    Thread Starter derrickallen

    (@derrickallen)

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

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

    Thread Starter derrickallen

    (@derrickallen)

    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>';
     }
     ?>
    Thread Starter derrickallen

    (@derrickallen)

    closing.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Post_thumbnail questions’ is closed to new replies.