WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Conditional thumbnail display not working (8 posts)

  1. venomshot629
    Member
    Posted 1 year 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 100x100 arrow image in a 100x100 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!

  2. vjpo
    Member
    Posted 1 year 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

  3. venomshot629
    Member
    Posted 1 year ago #

    * deleted this post, next post better explains problem *

  4. venomshot629
    Member
    Posted 1 year 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>
  5. vjpo
    Member
    Posted 1 year 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';

  6. venomshot629
    Member
    Posted 1 year 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!

  7. vjpo
    Member
    Posted 1 year 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

  8. venomshot629
    Member
    Posted 1 year 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>

Topic Closed

This topic has been closed to new replies.

About this Topic