Featured image on home page

  • I have a WordPress website here, https://www.sheicjournals.com

    I am actually in the process of duplicating the site because we are going to use a different shopping cart system. We are building the site here, https://www.sheicjournals.net.

    If you look at the .com website above on the home page you will see the featured image next to the blog post has been positioned to the left of the text. How can you do this? I have been trying to locate this and can’t find anything.

    Also on the .com site under the blog post is an image that takes you to more articles on the blog portion of this site. I can’t for the life of me find how they got this image under the blog post.

    Any help would be greatly appreciated.

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

  • It is floated left using img.attachment-cat_post_thumb_sizecategoryposts-6
    Try using Firefox with the Firebug add-on for this kind of work.
    https://getfirebug.com/

    Thread Starter sheicgirl

    (@sheicgirl)

    Thanks for replying. Okay this is a little over my head.

    For the featured image, add this to your style.css file on a new line at the bottom.

    #content img {
    float: left;
}

    You should really be using a child theme to make these adjustments:

    https://codex.www.ads-software.com/Child_Themes

    The image under the post, “Read More”, was done using a background image behind the link. This can certainly be done, but it’s slightly more involved.

    Thread Starter sheicgirl

    (@sheicgirl)

    Thanks Josh. That didn’t work because when I did that it made all the images on the home page move.

    As for the background image, I think it is already there I just need to update the link where it is drawing the image from but I can’t figure out where to make this change.

    Okay, on the image in your post, if you look in the HTML editor, you should see this:

    <img height="165" width="165" title="iphone-journal-prompts" alt="iphone-journal-prompts" class="attachment-cat_post_thumb_sizecategoryposts-4 wp-post-image" src="https://www.sheicjournals.net/wp-content/uploads/iphone-journal-prompts.jpg">

    Change it to this:

    <img style="float:left;" height="165" width="165" title="iphone-journal-prompts" alt="iphone-journal-prompts" class="attachment-cat_post_thumb_sizecategoryposts-4 wp-post-image" src="https://www.sheicjournals.net/wp-content/uploads/iphone-journal-prompts.jpg">

    Basically, we are adding the float:left; property inline to just that one image, rather than all images using that class.

    As for the read more link.. I don’t see any background image being called from your code.

    Thread Starter sheicgirl

    (@sheicgirl)

    Thanks Josh but won’t this only adjust just this image and not any future images that go with each blog post that appears on the home page?

    lol.. yes.

    You would need to get into your functions of your theme to rewrite how a post is displayed to have this work on all future posts. And that’s a little bit beyond my free volunteering services ??

    However, I can point you in the right direction if this is something you feel like tackling.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Featured image on home page’ is closed to new replies.