Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Featured Image Placement In Blog


Question

Posted · Report post

Hi,

I am trying to place an image (icon) next to my article summary on my main blog page. I used the featured image setting, but it shows up to the left of the title and all the text is shifted over to the right.

Please see: http://www.elderbranch.com/blog/

I would rather put the image at the left of the blog text and have the text wrap around the image instead of justifying everything to the right of the image. Similar to what you see here: http://www.nerdwallet.com/blog

Is that possible?

Thanks,

Sanjay

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

Hi there, if you go to pagelines>site options>blogs and posts. Scroll down to you'll see 'feature post excerpt mode' and 'magazine clip excerpt mode' showing the various different ways you can place the thumbnail inside or next to the text. Just choose the one that you want and hit save :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks a lot - that worked. One question though, how can I make the icon flush with the top of the text so that it looks better? Also, there seems to be extra spacing around the icon that is not part of the image - is there a way to reduce that?

http://www.elderbranch.com/blog/.

Thanks

Share this post


Link to post
Share on other sites

Posted · Report post

If you don't like the way it looks using the default settings then you can always write custom CSS code to alter the appearance. Learn more about custom CSS.

Share this post


Link to post
Share on other sites

Posted · Report post

I inserted the following custom code, and was able to move icon down, but not delete the excess space after the icon. Can you help me figure out what I need to adjust in the CSS to fix this?

.post-meta .c_img, .hentry .c_img {

margin-top: 10px;

margin-bottom: 0px !important;

}

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, there's some code attached to the align-left element you'll need to alter. Code is pasted below, play with the figures to adjust.


.alignleft {

    float: left;

    margin: 0 1.5em 1.5em 0;

}

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites