0

I'm using some transitional css to "slide" up a div (".mask") which contains a short excerpt of the post when you hover over the post thumbnail.

This works very well, but I'd also like to add a text or icon link to each "mask" div which will link directly to the full size version of the image (and hopefully open automatically in fancybox).

Here's the code I'm using so far - thanks

<div class="main">
<div class="view view-first">
<h4><a href="<?php  the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h4>
<div class="myimage">
<?php tt_thumb(300,185); ?>
</div>

<div class="mask">
<?php the_content_limit($hp_mid_content_length,''); 
?>
</div> </div> </div>
2

I don't know if TimThumb is really necessary. You could easily do that with internal WordPress functions.
Add this code to your functions.php:

<?php
add_theme_support( 'post-thumbnails' ); // this enable thumbnails
add_image_size( 'preview-thumb', 300, 185, true ); //this sets your default size
?>

Use the following code instead of your code above.

<div class="main">
  <div class="view view-first">
    <h4><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h4>
    <div class="myimage">
      <?php
        if ( has_post_thumbnail())
        {
          $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'preview-thumb' );
          echo '<img src="' . $thumb[0] . '">';
        } else {
          echo 'No post thumbnail.';
        }
      ?>
    </div>
    <div class="mask">
      <?php
        if ( has_post_thumbnail())
        {
          $full = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );
          echo '<a href="' . $full[0] . '">Some text.</a>';
        } else {
          echo 'No post thumbnail.';
        }
        the_content_limit($hp_mid_content_length,'');
      ?>
    </div>
  </div>
</div>

Then follow these steps to add a post thumbnail.

  • Thanks for that, but I had already tried the standard codex suggestions. Perhaps what I am struggling with is incorporating this into my existing code, as I am unsure how or where to add it. I would like to add a new link - either text or a grahic / icon to the mask div to open the attachment image directly... – speedypancake Dec 13 '13 at 16:00
  • Just add the code above into you div with the class "mask". – luke Dec 13 '13 at 16:22
  • Yeah - tried that but it doesn't make any difference. I don't even see "some text"? If the mods allow, I can add a temporary link to the test site if that might help? – speedypancake Dec 13 '13 at 16:31
  • Do you use this code within the loop? I added an 'else' statement to my code, does it output 'No post thumbnail.'? If yes, you did not set a post thumbnail. And remember: To enable post thumbnails, the current theme must include add_theme_support( 'post-thumbnails' ); in its functions.php file. See also the WordPress Codex. – luke Dec 13 '13 at 16:42
  • I updated the answer. Please try that. – luke Dec 13 '13 at 17:09
0

The way I read your question I believe you're after wp_get_attachment_link. http://codex.wordpress.org/Function_Reference/wp_get_attachment_link

  • Lone link is considered a poor answer (see help > deleted answers) since it is meaningless by itself and target resource is not guaranteed to be alive in the future. Please try to include at least summary of information you are linking to. – Rarst Dec 13 '13 at 15:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.