Archived

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

  • 0

Resolved How To Customize Featured Image Size


Question

Posted · Report post

Hi there,

I've been trying to find a workaround for this, so far unsuccessfully...

My client wants all the Featured Images in Blog Index and Single Post pages to be the same width and height, which means the have to be cropped in many cases.

I've tried achieving this with the wordpress featured image settings, the pagelines settings and CSS but haven't been able to fully achieve it.

if you check the blog index page here: http://www.designsbyfelicia.com/blog/ , you will see that the images are cropped but the surrounding frame or border doesn't display properly (at the bottom edge of pic).

I've tried many variations of CSS and targeting the different divs for the image and frame, etc... but haven't found a way to do this properly.

My code at the moment is fairly simple:


#postloop a.post-thumb.img.fix span.c_img {

  width: 100%;

  max-height: 290px !important;

  overflow: hidden !important;

  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.4);

}

I appreciate your help!

Share this post


Link to post
Share on other sites

26 answers to this question

Posted · Report post

Hiya,

When you change the thumbnail sizes in settings>media wordpress doesn't automatically update the existing thumbnails. You'll need a plugin to force WP to regenerate the existing thumbs, here's a link to one that can help.

http://wordpress.org...ate-thumbnails/

Let me try that...

Share this post


Link to post
Share on other sites

Posted · Report post

Have you tried changing max-height to height to see if that makes a difference?

Share this post


Link to post
Share on other sites

Posted · Report post

No problem, remember to keep us posted!

Share this post


Link to post
Share on other sites

Posted · Report post

Finally!!!!! That worked.

For those who are trying to achieve a similar layout:

1. Set the thumbnail size in Wordpress > settings > Media (I used 614x290px)

2. In pagelines, use the excerpts layout that places the thumbnail on the left of the excerpt (NOT on top)

3. Regenerate Thumbnails using the plugin you mentioned above...

4. Use LESS/CSS to style other things like thumbnail border, shadows, etc...

Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Beny, I'm feeling for ya. I'm in the same boat. If I find a solution, will post it.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Have you tried changing max-height to height to see if that makes a difference?

Just tried it... same exact result... any other thoughts? Thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

There should be other CSS generating that box for the image. Did you create that CSS or is it using the WordPress default?

Share this post


Link to post
Share on other sites

Posted · Report post

There should be other CSS generating that box for the image. Did you create that CSS or is it using the WordPress default?

That CSS is a pagelines default. Not wordpress, and not me...

These are the classes I've tried targeting:

- The image:

img.attachment-large.wp-post-image
- The surrounding span:
span.c_img[/code]


- The "a" class around that: 
[code]a.post-thumb img.fix[/code]
- The "div" around all of the above:
[CODE]div.full_img.fix[/code]

And I've yet to find the right code in order to crop the images at the bottom without screwing up the frame at the bottom...

B

Share this post


Link to post
Share on other sites

Posted · Report post

The problem is that all your images have different sizes as far as I can see, for both width and height. The only way for the Featured Image on your posts to have the same height and width is to edit these images so they have the same dimensions. If you were to do this with CSS, the images would become distorted and look odd.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

Well you're using the option "On Top". The "On Top" option uses the full image and not thumbnails. That is why your dimension changes have not had any effect.

What I suggest is, for you to not use the "On Top" but one of the other options and use custom CSS to resize the thumbnail.

Share this post


Link to post
Share on other sites

Posted · Report post

Excellent! Thanks for posting the process for other users.

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

Posted · Report post

I tried it by setting up the blog page in Pagelines to use the Thumbnail on the left, and then using CSS to adjust the size. I could not get it to work, same problem... The handling of the thumbnail is done "behind the scenes" somewhere and it automatically sizes the thumbnail image to 150x150px, it doesn't matter what I enter in the Wordpress media settings for the thumbnail size, those Wordpress settings don't have any effect whatsoever...

When using CSS to resized the image it distorts it again. The only way at the moment to achieve the effect I want is to edit the images offline and re-size and crop them to the exact sizes I want, in combination with CSS.

But if I just want to upload the image to wordpress and have it simply display a 614px by 290px portion of it (the same way Pagelines does at 150x150) i won't work...

Pagelines really needs better settings and control for Featured Image and Thumbnail size...

Thanks

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Are you trying to crop a portion of the 614px by 290px image or upload it so that shows up that size?

Share this post


Link to post
Share on other sites

Posted · Report post

Nothing? Nobody knows how to customize the featured image?? :(

Share this post


Link to post
Share on other sites

Posted · Report post

Well, I got close, but no cigar just yet. This is the code I'm using now, it's the only way I've found to preserve the frame and background of the pic (at the bottom):


#postloop span.c_img {

  width: 100%;

  max-height: 290px !important;

  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.4);

  overflow: hidden !important;

}

#postloop span.c_img img {

  width: 100%;

  max-height: 290px;

  overflow: hidden !important;

}

The only problem is when the featured image is "tall" then it gets distorted by the second instruction. But without the second instruction, the frame and border at the bottom get screwed up...

Like I said, close, but no joy just yet...

You can check what it looks like with a tall picture over here: http://www.designsbyfelicia.com/dummy-cat-1/dummy-post-number-6-is-one-step-closer/

Share this post


Link to post
Share on other sites

Posted · Report post

I'm trying to see if it's an issue with the image cropping or if it's the border around that is causing the problem. It's difficult to say which!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, I've checked you link but I can't see the tall image distorting. Have you managed to resolve this? In the meta settings do you have the height set by px or aspect ratio?

Share this post


Link to post
Share on other sites

Posted · Report post

James, as I said in the message just above yours, I managed to kind of fix it using the code I included in that same message.

The problem now is that the image (which is originally a tall one) is being distorted due to the height instruction for span.c_img

But including that instruction is the only way to prevent the bottom border of the frame from getting cut off.

Maybe an easier way to do this would be modifying the php file for the single post?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

OK what you can do is do this little trick here, basically this will keep your image at the same size but hide any overflow from the max-height you set.


.blog .post-meta .c_img {
background: transparent;
border: 4px solid #E9E9E9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
max-height: 200px;
overflow: hidden;
padding: 0;
}[/CODE]

http://d.pr/i/uUME

Share this post


Link to post
Share on other sites

Posted · Report post

Are you trying to crop a portion of the 614px by 290px image or upload it so that shows up that size?

I'm trying to adjust the way the theme displays the thumbnail so instead of 150x150 it displays it at 614x290. This would allow me to upload the featured image and the theme would auto crop/resize to that size. But I can't get it to work.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

OK what you can do is do this little trick here, basically this will keep your image at the same size but hide any overflow from the max-height you set.

Hi Danny, thanks for the tip. The thing is the client wants all featured images to be the same width as well. Any add-on code to the above to accomplish this?

I would really like Pagelines framework to have better Featured Image handling settings... the Wordpress Media settings are worthless, I've never managed to get those to work...

In the Wordpress Media settings I have it set up correctly to 614px x 290px AND with crop enabled, but those settings don't seem to do anything at all!?!

Thanks again

Share this post


Link to post
Share on other sites

Posted · Report post

What I suggest is, for you to not use the "On Top" but one of the other options and use custom CSS to resize the thumbnail.

I'll try that and report back! I may just be able to make that work...

Thanks for the suggestion.

Beny

Share this post


Link to post
Share on other sites

Posted · Report post

I'm trying to see if it's an issue with the image cropping or if it's the border around that is causing the problem. It's difficult to say which!

It's definitely the code I'm using to faux crop the image.

The way that border works is like this:

- there's a setting somewhere in pagelines to add a frame to the features images. I enabled that.

- as for CSS structure, pagelines puts the featured image inside a span or div I believe, and gives that div a background color, 1 pix border and 4px padding (so you can see that background color peek around the pic as a frame).

So, it's definitely my code... Which is why I need help figuring this out...

I really wish there were more comprehensive settings in pagelines for handling size and cropping of featured images....

Share this post


Link to post
Share on other sites

Posted · Report post

Hiya,

When you change the thumbnail sizes in settings>media wordpress doesn't automatically update the existing thumbnails. You'll need a plugin to force WP to regenerate the existing thumbs, here's a link to one that can help.

http://wordpress.org/extend/plugins/regenerate-thumbnails/

Share this post


Link to post
Share on other sites