Conditional thumbnail display not working

  • Resolved venomshot629

    (@venomshot629)


    13 years, 1 month ago

    Hello, I have a client that would like for me to have “next” and “previous” arrows on their single.php page, and upon hovering over the arrows, the next or previous post’s thumbnail shows.

    So far, the way I have thought to do this is to have an 100×100 arrow image in a 100×100 div; when hovering over the arrow image, it turns 100% transparent and shows the div beneath it, which has a thumbnail as it’s background.

    Right now, I have it working on this page: http://ayedom.com/eastman-leather-clothing-aviators-kit-bag/.

    But I would like to be able to have a default/generic “thumbnail” image to fallback on since many of his posts do not have featured images set currently. I have tried many methods, and do not know much PHP, and so far I cannot get it to work.

    Currently the “right/$nextpost” arrow is working without the conditional code; for now, I am trying to test the “default/fallback” image on the left/$previouspost arrow only.

    Here is my code, in my single.php:

    <?php if (has_post_thumbnail()) {$previousPost = get_previous_post(true); $previousthumbnail = get_post_thumbnail_id($previousPost->ID);$vspreviousurl = wp_get_attachment_image_src($previousthumbnail, 'thumbnail', true);} else {$vspreviousurl = 'i/arrow_left_big.png';} ?>
<?php $nextPost = get_next_post(true); $nextthumbnail = get_post_thumbnail_id($nextPost->ID); $vsnexturl = wp_get_attachment_image_src($nextthumbnail, 'thumbnail', true); ?> 

<div id="nav-below" class="navigation" style="position:absolute !important;top:300px !important;width:1000px !important;">
				<div class="nav-previous" style="display:block;width:100px;height:100px;background:url('<?php echo $vspreviousurl[0]; ?>') 0 0 no-repeat;"><?php previous_post_link('%link', '<img src="i/arrow_left_big.png" class="fadeaway" />') ?></div>
				<div class="nav-next" style="display:block;width:100px;height:100px;background:url('<?php echo $vsnexturl[0]; ?>') 0 0 no-repeat;"><?php next_post_link('%link', '<img src="i/arrow_right_big.png" class="fadeaway" />') ?></div>
			</div>

    Any suggestions would be much appreciated!

Viewing 7 replies - 1 through 7 (of 7 total)
  • vjpo

    (@vjpo)

    13 years, 1 month ago

    $previousPost = get_previous_post( true );
$vspreviousurl = 'site/path/default.png';
if (has_post_thumbnail( $previousPost->ID ) ) {
    $previousthumbnail = get_post_thumbnail_id( $previousPost->ID );
    $vspreviousurl = wp_get_attachment_image_src( $previousthumbnail, 'thumbnail', true );
}

    You can use $previousPost data to generate a prev. post link html as it shown in example
    http://codex.wordpress.org/Function_Reference/get_previous_post

    Thread Starter venomshot629

    (@venomshot629)

    13 years, 1 month ago

    * deleted this post, next post better explains problem *

    Thread Starter venomshot629

    (@venomshot629)

    13 years, 1 month ago

    Now this is my full code; if you click left or right a couple of times from http://ayedom.com/eastman-leather-clothing-aviators-kit-bag/ to a post without a set featured image, it is not showing my fallback image “arrow_left_big.png”, the div background is still blank.

    <?php $previousPost = get_previous_post( true );
$vspreviousurl = 'http://www.ayedom.com/i/arrow_left_big.png';
if (has_post_thumbnail( $previousPost->ID ) ) {
    $previousthumbnail = get_post_thumbnail_id( $previousPost->ID );
    $vspreviousurl = wp_get_attachment_image_src( $previousthumbnail, 'thumbnail', true );} ?>

<?php $nextPost = get_next_post( true );
$vsnexturl = 'http://www.ayedom.com/i/arrow_right_big.png';
if (has_post_thumbnail( $nextPost->ID ) ) {
    $nextthumbnail = get_post_thumbnail_id( $nextPost->ID );
    $vsnexturl = wp_get_attachment_image_src( $nextthumbnail, 'thumbnail', true );} ?>

<div id="nav-below" class="navigation" style="position:absolute !important;top:300px !important;width:1000px !important;">
				<div class="nav-previous" style="display:block;width:100px;height:100px;background:url('<?php echo $vspreviousurl[0]; ?>') 0 0 no-repeat;"><?php previous_post_link('%link', '<img src="i/arrow_left_big.png" class="fadeaway" />') ?></div>
				<div class="nav-next" style="display:block;width:100px;height:100px;background:url('<?php echo $vsnexturl[0]; ?>') 0 0 no-repeat;"><?php next_post_link('%link', '<img src="i/arrow_right_big.png" class="fadeaway" />') ?></div>
			</div>
    vjpo

    (@vjpo)

    13 years, 1 month ago

    Oh, yes, wp_get_attachment_image_src() returns an array. Try to use wp_get_attachment_thumb_url() instead of wp_get_attachment_image_src().
    So
    $vspreviousurl = wp_get_attachment_thumb_url($previousthumbnail)
    and change $vspreviousurl[0] to $vspreviousurl

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

    Another way to use
    $vspreviousurl[0] = 'http://www.ayedom.com/i/arrow_left_big.png';

    Thread Starter venomshot629

    (@venomshot629)

    13 years, 1 month ago

    That works perfect! Thank you!!

    Last request that I just thought of..:

    Is there a php snippet I can include, where if there is no next or previous post, nothing shows at all? For example, Im guessing a 3 way statement: the featured image if there is one, the placeholder .png if there is no associated feature image, and a plain white background (or display:none) if there is no next post to go to?

    I believe that would be the last thing to wrap it all up!

    vjpo

    (@vjpo)

    13 years, 1 month ago

    if there is no next or previous post

    Yes, you can use condition if $previousPost is not empty and generate custom link html with get_permalink() instead of using previous_post_link()
    Just an example

    <div id="nav-below">
<?php if ( ! empty( $previousPost ) ) : ?>
    <div class="nav-previous" style="display:block;width:100px;height:100px;background:url('<?php echo $vspreviousurl; ?>') 0 0 no-repeat;">
        <a href="<?php echo get_permalink( $previousPost->ID ); ?>"><img src="i/arrow_left_big.png" class="fadeaway" /></a>
    </div>
<?php endif; ?>
</div>

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

    Thread Starter venomshot629

    (@venomshot629)

    13 years, 1 month ago

    Alright, thank you for all of your help!!!

    For the record, here is the final code I will be using:

    <?php $previousPost = get_previous_post( true );
$vspreviousurl = 'http://www.ayedom.com/i/arrow_left_big_alt.png';
if (has_post_thumbnail( $previousPost->ID ) ) {
    $previousthumbnail = get_post_thumbnail_id( $previousPost->ID );
    $vspreviousurl = wp_get_attachment_thumb_url( $previousthumbnail );} ?>

<?php $nextPost = get_next_post( true );
$vsnexturl = 'http://www.ayedom.com/i/arrow_right_big_alt.png';
if (has_post_thumbnail( $nextPost->ID ) ) {
    $nextthumbnail = get_post_thumbnail_id( $nextPost->ID );
    $vsnexturl = wp_get_attachment_thumb_url( $nextthumbnail );} ?>

<div id="nav-below" class="navigation" style="position:absolute !important;top:275px !important;width:1000px !important;">
				<div class="nav-previous" style="display:block;width:100px;height:100px;margin-left:-20px !important;background:url('<?php echo $vspreviousurl; ?>') 0 0 no-repeat;"><?php previous_post_link('%link', '<img src="i/arrow_left_big.png" class="fadeaway" />') ?></div>
				<div class="nav-next" style="display:block;width:100px;height:100px;margin-right:-20px !important;background:url('<?php echo $vsnexturl; ?>') 0 0 no-repeat;"><?php next_post_link('%link', '<img src="i/arrow_right_big.png" class="fadeaway" />') ?></div>
			</div>
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Conditional thumbnail display not working’ is closed to new replies.

Tags