• 0
Sign in to follow this  
Followers 0

Excerpt images (thumbs) on blog home page are mis-aligned

Question

Posted · Report post

Hello! I set up a new web page with Pagelines and have a problem with the thumb images on the blog home page. As you an see they all are standing a little to high and have way too much padding ad the bottom. So the textflow doesn't work good and everything looks quite strange. I already tried all suggestion I could find here in the docs and forum but none helped. Do you have any idea how I can align those thumb images? Thanks in advance!!!

Share this post


Link to post
Share on other sites

21 answers to this question

  • 0

Posted · Report post

Thanks. I will accept an answer for you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If your images will not scale properly to 150x150, it is because the image dimensions are off. For example, a 300x100 image will have to scale to 150x50 because the width is only 100 to begin with. Make your images at least 150x150 and you won't have any issues.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@simple_mama Thanks, but the scaling is not the problem. The original images are a lot bigger than 150px, mostly betweeg 500 and 1000px. But they are not squares - but that can't be a precondition! No, scaling works well. I mean the position of the (automatically resized) thumbs on the blog home page. They start way higher than the upper text edge and leave a big gap down the lower end like there is a command as "padding-bottom: 50px" involved - what I didn't implement. Please have a look at my site (www.mobiwatch.de), scroll down a little and watch some of the post excerpts on thehome page andyou'll see what I mean! Thanks again in advance!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I don't know where you added this, but it definitely does not go where you have it added: [code][/code] Custom PHP code can go in 3 places: http://www.pagelines.com/wiki/How_to_Add_Customization Aside from that, the problem is, as I said, a size issue. You may want to try using a "Regenerate Thumbnails" plugin from Wordpress to see if that helps solve your issue. If not, disable ALL of your plugins and see if that helps.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@simple_mama Thanks again ... you're quick ;)) This is a piece of code the author of the plugin "Subscribe2" gave me to change the subject line of the daily newsletter this plugin sends. He told me to put hs into the "custom css" section for the header code. And it works ;)) As far as I ca see it doesn't have anything to do with the (thumb) images ...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Where else do I have to put that code?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you look at this link (http://www.pagelines.com/wiki/How_to_Add_Customization) it will tell you where to add custom code. PHP and CSS go in separate places. :) It probably has nothing to do with the thumbnails, but it still needs fixin' up. Try the regenerate thumbnails and plugin disable tips I mentioned above too please.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks. But why do I have to make it this complicates? Why can't I simply use the "Custom Code" section e.g. for css in the Pagelines theme settings? Isn't this there for exacly like this? I'm asking, because I have some additional code for Google Analytics - that's not css and not php as far as I know. Can't I even leave this in the "Custom Code" section? I shifted css code - works! But not the php code: When I shift that into the functions.php file on the server I'm always getting an error code. Seems as if there is something wroing with the syntax? I mean the code you copied above in the yellow text field?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Let me how you what I mean: This is the Google Analytics code:

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

To move the thumb down a few pixels, just do this: [code].post-meta .c_img, .hentry .c_img { display: block; float: left; line-height: 1em; margin-top: 15px; max-width: 98%; padding: 4px; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Wunderful! Your code works great, thanks a lot!!!!!! But there are still two problems: 1.: The bottom space between the lower end of the picture and the text is still way to big. As I don't know this "hentry" command I don't know how to fix that, sorry ... 2.: Can I leave the Google Analytics code in the "Custom Code" section aif Pagelines?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, 1. Try adding this to your custom CSS: [code].fpost .post-thumb.img { margin-bottom: 5px; }[/code] 2. Add your Google Analytics code to Custom Code > Footer Scripts & Analytics

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@Danny Thanks, wonderful, works great!!! But one more question concerning that "Subscribe2" code: Rangelone told me, tat this code doesn't belong into te Custom Code of Pagelines. But when I put that into the functions.php file, I get an error message. I gues because of some mistake concerning the syntax. What shall I do with that code? Or what do I have to change that functions.php will accept it?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It probably has to do with the opening and closing php tags. Make the format match what is already there. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

DAMMED! Pagelines crashed, I don't know why! All headers and icons and customizations where gone! I could restore some, but now tha css custom codes for thumb images alignment and font size don't work anymore. They are still in the css file and I already copied them again back into the Custom Code section, but that didn't help, too. And the icons for Twitter, Facebook, RSS and so on are gone, too. I entered again the names and urls, but they do not appear anymore. Al thar happend BEFORE I updated to the new Pagelines version. Not I updated because everything was crashed already ... PLEASE help me to restore my site!!! Thanks in advance!!!!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Cancelled! I forgot to copy some older code into the css file ;))

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

But there is an other problem occured: The text size is bigger on the blog home page only (http://mobiwatch.de/), not on on the blg posts itself (http://mobiwatch.de/asus-padfone-ab-august-in-deutschland-erhaltlich/). The code I'm using is: .font-primary, body {font-size:14px;} .fpost .post-title h2 {font-size: 24px;} What is the code to change the text size in the posts? Or do you have a link to the function names I can use? Thanks again!!!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

[code]body {font-size:14px;}[/code] ^ This code pretty much changes the size for all copy on your site, but if there is other CSS that's changing the size in the individual blog post pages, then that is probably overwriting the body copy size. To fix that, please add this CSS: [code]div.entry_content {font-size: #em;}[/code] Change # to the size you want.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@Catrina, very cool, thanks a lot!!!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Lutz, Do you require further assistance ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Not concerning this issue, thanks! I'll open a new discussion for the other problem, alright? Thanks again and kind regards, Lutz

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0