Resolved How To Customize Featured Image Size

[Beny Schonfeld 1]

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!

[catrina 103]

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

[Beny Schonfeld 1]

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.

[catrina 103]

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

[Beny Schonfeld 1]

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

[Beny Schonfeld 1]

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/

[James B 436]

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?

[Beny Schonfeld 1]

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?

[Danny+ 1,327]

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

[Beny Schonfeld 1]

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

[Beny Schonfeld 1]

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

[catrina 103]

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!

[Beny Schonfeld 1]

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....

[Danny+ 1,327]

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.

[Beny Schonfeld 1]

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.

What I'm trying to do is no different than what Pagelines does when it displays the square thumbnails in the excerpts... Pagelines doesn't distort the images when it does that, it just shows a portion of the image, and the rest is hidden.

That's what I'm trying to replicate with the featured image...

It would be super useful to add more control in the Pagelines settings for the size, cropping and handling of featured images and thumbnails in excerpts and in the single post layout...

Let me know if you can think of any suggestions on how to handle this...

Thanks

[anjuks 1]

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

[Danny+ 1,327]

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.

[Beny Schonfeld 1]

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

[Danny+ 1,327]

No problem, remember to keep us posted!

[Beny Schonfeld 1]

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

[catrina 103]

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

[Beny Schonfeld 1]

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.

[James B 436]

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/

[Beny Schonfeld 1]

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...

[Beny Schonfeld 1]

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!