Featured image on posts on homepage

  • Resolved adlibtraveller

    (@adlibtraveller)


    11 years, 3 months ago

    Hi

    I’m having an issue on my website with getting consistency to the display of images on the homepage. https://www.adlibtraveller.com.

    I’ve tried using the Featured Image box to ensure that all images for posts on the homepage are displayed in the circle but some are showing as squares, some as circles.

    Any advice please to avoid these mixed views?

Viewing 15 replies - 1 through 15 (of 16 total)

  • You need to use consistent 270x250px images, make sure the image is centred.

    Use a Picture Editor (eg Photoshop).

    Also see this link:
    https://www.studiograsshopper.ch/web-development/wordpress-featured-images-add_image_size-resizing-and-cropping-demo/

    Thread Starter adlibtraveller

    (@adlibtraveller)

    I’m a little confused by this as the images that are showing correctly in the bubbles on the homepage are not formatted to this size yet still show up in the circle.

    The posts on the homepage that show their image as a square are the ones that I wish to make into the theme circles… is this possible?

    Yes it is possible.

    Go to the theme editor and open class-content-post.php find the following lines

    if (isset( $tc_thumb) && ( $tc_thumb_width < 270)) {
          $no_effect_class          = 'no-effect';
}

    and comment them

    /*if (isset( $tc_thumb) && ( $tc_thumb_width < 270)) {
          $no_effect_class          = 'no-effect';
}*/

    though this works images with a very small width looks ugly.

    Optionally you can also reduce the value 270.

    Can’t see that you’ve custimised any CSS, but there is an inconsistency in the HTML generated.

    The affected div/class is thumb-wrapper – round-div.

    One is showing:

    <div class="thumb-wrapper ">
<a class="round-div "

    The other:

    <div class="thumb-wrapper no-effect">
<a class="round-div no-effect"

    Anything you might have changed to cause this? Could try re-installing 3.0.9, or disabling other plugins which might be clashing just to diagnose where the problem is caused.

    @rdellconsulting that is the default behavior of that theme. As I mentioned in my previous post the code

    if (isset( $tc_thumb) && ( $tc_thumb_width < 270)) {
          $no_effect_class          = 'no-effect';
}

    Checks if the width of the image is less than 270 and if so adds the class called “no-effect” which you are seeing.

    This no-effect matches the following CSS

    .round-div.no-effect {
    border: medium none;
}

    on line 5574 of file https://adlibtraveller.com/wp-content/themes/customizr/inc/css/orange.css?ver=3.0.9 thus preventing the circular border being formed.

    @jesin, Hadn’t seen your initial post. Great analysis thanks!

    @rdellconsulting, You’re welcome, firebug did the analysis for me ??

    @adlibtraveller, I found a cleaner way of doing this.

    Create a file called always-rounded.php inside /document/root/wp-content/plugins/

    Add the following code to that file

    <?php
/*
Plugin Name: Always Rounded
Description: Adds an inline CSS in the <head> so that thumbnails are always round irrespective of their width.
*/
function always_round_images() { ?>
<style type="text/css">
.round-div.no-effect {
border: 104px solid #FAFAFA;
}
</style>
<?php
}
add_action("wp_head","always_round_images");
?>

    Go to the plugins section, you’ll find a new plugin called “Always Rounded” activate it and all thumbnails are rounded.

    This is much much better because even if you update your theme this will still show up in the <head>.

    @jesin Interesting solution. Thanks—now I know how to write a plugin ??

    For most people, though, it will just be easier to make sure that their featured images are 270×250 ??

    @electricfeet There is a much more easier solution too.

    Just edit the header.php file of this theme and add this CSS in the <head>

    <style type="text/css">
.round-div.no-effect {
border: 104px solid #FAFAFA;
}
</style>

    Here we are doing directly what the plugin did. The only problem is if the theme author releases an update this will be overwritten.

    Just edit the header.php file of this theme and add this CSS in the <head>

    But why edit the theme files? You could just as easily post that CSS rule in the Custom CSS panel of Customiz’it! 99% of people don’t need to modify the code.

    Yes you’re right ElectricFeet. Just now tried it on a test installation.

    I do not use Customizr so I didn’t know such an option existed.

    Ah, now I get it ??

    I wondered why you were climbing in the window when the front door was open ??

    Thread Starter adlibtraveller

    (@adlibtraveller)

    Thanks for the input all, I was trying out a few of these methods and have now added the code:

    <style type=”text/css”>
    .round-div.no-effect {
    border: 104px solid #FAFAFA;
    }
    </style>

    to the Custom CSS panel in Customizr. Unfortunately my homepage still shows two posts with a square image rather than the circular format that is within the post.

    I’d rather not start amending the actual theme files… any other suggestions maybe or should I try this code elsewhere?

    Thread Starter adlibtraveller

    (@adlibtraveller)

    So, I’ve resized the two images that were giving me trouble to 270×250 using the wordpress crop and this has fixed the issue on the two posts on the homepage.

    Ideally, there would be a quicker way of doing this rather than me having to manually fix on each post but for now I’m happy.

    Thanks again for all of the advice ??

    In the custom CSS box you have added the CSS code with the <style> tag please remove it.

    Take a look at lines 55 to 59 on your homepage you’ll find a style tag inside a style tag.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Featured image on posts on homepage’ is closed to new replies.