Calling medium sized thumbnail

  • Hello all,

    The template I’m using normally used the first image in the post as cover image on the front page. I however did not wanted to insert a image 2 times in each post (once as featured image and one in the text) so I changed the template a little to use the featured image as image above the post and on the homepage.

    I’m using the code below to call the src of the featured image, the problem with this however is that the picture is too large for the position. The image gets resized with the result that half of the image disappears.

    <div class="exp" style="width:326px;height:120px;background:url({featuredimagesrc}); background-repeat: no-repeat;
       background-position: 50% 30%;"></div></a>

    Does any of you have a clue how I can use the medium thumbnail in here? I probably need to change ‘featuredimagesrc’ to something that call the medium thumbnail, but I have no clue on which code to call there.

    Thanks in advance!

Viewing 9 replies - 1 through 9 (of 9 total)

  • You do not have to write HTML to display a featured image, use the_post_thumbnail() wordpress function.

    Passing the medium parameter displays the thumbnail with the dimensions of 300px x 300px

    <?php
the_post_thumbnail("medium");
?>
    Thread Starter buiserik

    (@buiserik)

    Thanks, do I post the php where ‘featuredimgsrc’ is or do I completely remove the div?

    Remove the <div> completely.

    Thread Starter buiserik

    (@buiserik)

    Hello Jesin,

    Sadly that doesn’t work. Maybe it’s because of other factors the widgets uses. Please find the full code below.

    <div class="item"><a href="{url}">
<div class="exp" style="width:326px;height:120px;background:url({featuredimagesrc}); background-repeat: no-repeat;
       background-position: 50% 30%;"></div></a>
<div class="newshover animated pulse" style="overflow:visible;z-index:999;">
<div class="newspromore">
<div class="newsitemcattitle">{category}</div>
<div class="newsitemstats"> <a class="comment_btn" href="{url}">0</a>
<a class="newsitemspecs" href="https://twitter.com/home/?status=Reading+{title}+{url}" target="_blank">
<img src="https://beatsandbeyond.com/wp-content/themes/fashionlife/jumpstart/sample/twitter_con.png" alt="Tweet"></a></div>
<div style="clear:both;"></div>
<h3 class="newsitemtitlemed"><a class="newsitemtitlemed" href="{url}">{title}</a></h3>
<p class="newsitemintro">
{contenttext}</p><p>
</p></div></div></div>

    When I remove the

    <div class="exp" style="width:326px;height:120px;background:url({featuredimagesrc}); background-repeat: no-repeat;
       background-position: 50% 30%;"></div>

    and replace it with the php function no image shows up…

    Any other ideas?

    May I know the theme you are using and also a link your website.

    Thread Starter buiserik

    (@buiserik)

    Sure, the theme is FashionLife by JoomlaXTC (I used this template before with my Joomla site and recently switched to WordPress). URL of the website is https://www.beatsandbeyond.com

    Thanks a lot for your help!

    To add to that: the widget is called XTC Newspro

    Try using the background-size CSS property with the <div> like this

    <div class="exp" style="width:326px;height:120px;background:url({featuredimagesrc}); background-repeat: no-repeat;
background-position: 50% 30%;
background-size: 100% auto;"></div>

    More about background-size.

    Thread Starter buiserik

    (@buiserik)

    Great! Thanks a lot, that fixed it. I will dive in to the more about background-size later. Thanks for your help and the info.

    You’re welcome.

    I noticed that you’ve changed it only for the “Featured Stories” section, the other three sections (Featured Reviews, Featured Interviews, Audio Video) don’t have the background-size property.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Calling medium sized thumbnail’ is closed to new replies.