WordPress.org

Ready to get started?Download WordPress

Forums

Getting a Post's Featured Image URL (9 posts)

  1. Mike Rodriguez
    Member
    Posted 3 years ago #

    Hello all,

    Im trying to get a new feature going for one of my websites and the home page is going to feature a news slider where i will display my latest post along with the set feature image for that post.

    What im trying to get is the Featured Image URL in-order to set it as a background image of my DIV. Is this possible to do?

    Here is my code:

    <div id="slider">
    
    <div class="content" style="background:url(FEATURED IMAGE URL HERE)">
    
    <div style="margin-top:250px; margin-left:10px; margin-right:10px; height:120px; padding:2px; background:url(<?php echo get_option('home'); ?>/main-table-content-bg.png); background-repeat:repeat">
    
    <?php query_posts('showposts=1&category_name=topstories'); ?>
    <?php while (have_posts()): the_post(); ?>
    <h3><a href="<?php the_permalink(); ?>" title="Read full post"><?php the_title(); ?></a></h3>
    <?php the_excerpt();?>
    <?php endwhile; ?>
    
    </div>
    </div>
    </div>

    Thanks in advance!

  2. stvwlf
    Member
    Posted 3 years ago #

  3. Mike Rodriguez
    Member
    Posted 3 years ago #

    I followed that and there seems to be an error, because the div doesn't even show up.

    Are there other ways i can do this?

    Thanks

  4. stvwlf
    Member
    Posted 3 years ago #

    I haven't used that code. What I see in the code is it is using the postID of the current page's post.

    You are currently displaying the image outside of the WordPress loop. The post that is active when you are trying to display the featured image is not the post that will be active after your query_posts statement.

    In terms of the image display code I linked you to, you would not use $post->ID outside of your custom loop.

    You either have to move the image display code inside the loop (before the H3), or you have to determine the PostID of the post you will be displaying prior to the display image code ( when it is outside the loop) and pass that as a variable to the code I linked you to.

    Hope that helps.

  5. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    Are you copying the code exactly?

    Because this part: 'single-post-thumbnail'

    Only works if you have that size set up...... you would need to sub that out for whatever thumbnail name you have or whatever (I believe)

  6. Mike Rodriguez
    Member
    Posted 3 years ago #

    I usually use the "get the image" plugin to retrieve the post's featured image, but what i need is the featured image url, in order to set it as the background of my div.

    confused -__-

  7. pan69
    Member
    Posted 2 years ago #

    The link given above does not what it says it does. It returns a URL to the SOURCE image, not the scaled thumbnail. Not handy while there's a perfectly good scaled down version of the image sitting in my upload folder.

    Any ideas on getting the REAL featured image?

  8. Aboobacker P
    Member
    Posted 2 years ago #

    Try this inside the loop:

    <?php
    $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
    echo '$feat_image';
    ?>

    You have got the featured image URL :)

  9. Aboobacker P
    Member
    Posted 2 years ago #

    @iammikerodriguez: so, your code might be as follows:

    <div id="slider">
    
    <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
    <div class="content" style="background:url(<?php echo '$feat_image';?>)">
    
    <div style="margin-top:250px; margin-left:10px; margin-right:10px; height:120px; padding:2px; background:url(<?php echo get_option('home'); ?>/main-table-content-bg.png); background-repeat:repeat">
    
    <?php query_posts('showposts=1&category_name=topstories'); ?>
    <?php while (have_posts()): the_post(); ?>
    <h3><a href="<?php the_permalink(); ?>" title="Read full post"><?php the_title(); ?></a></h3>
    <?php the_excerpt();?>
    <?php endwhile; ?>
    
    </div>
    </div>
    </div>

Topic Closed

This topic has been closed to new replies.

About this Topic