Jump to content


Photo
- - - - -
Resolved

Featured Image Placement In Blog

featured image

  • Please log in to reply
7 replies to this topic

#1 sanjayvenkat23

sanjayvenkat23

    Member

  • Members
  • 18 posts

Posted 29 October 2012 - 08:20 PM

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:

Please Login or Register to see this Hidden Content



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:

Please Login or Register to see this Hidden Content



Is that possible?

Thanks,
Sanjay

#2 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 30 October 2012 - 02:36 AM

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 :-)

#3 sanjayvenkat23

sanjayvenkat23

    Member

  • Members
  • 18 posts

Posted 30 October 2012 - 05:17 PM

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?

Please Login or Register to see this Hidden Content

.

Thanks

#4 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 30 October 2012 - 05:22 PM

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.

Please Login or Register to see this Hidden Content



#5 sanjayvenkat23

sanjayvenkat23

    Member

  • Members
  • 18 posts

Posted 30 October 2012 - 08:00 PM

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;
}

#6 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 30 October 2012 - 08:05 PM

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.

Please Login or Register to see this Hidden Content



#7 sanjayvenkat23

sanjayvenkat23

    Member

  • Members
  • 18 posts

Posted 30 October 2012 - 09:11 PM

Thanks James - this worked.

#8 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 30 October 2012 - 09:52 PM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, featured image