Jump to content
Beny Schonfeld

How To Customize Featured Image Size

Recommended Posts

Beny Schonfeld    1
Beny Schonfeld

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!


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
catrina    103
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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/


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
James B    436
James B

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?


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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?


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
catrina    103
catrina

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!


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
anjuks    1
anjuks

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

  • Like 1

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem, remember to keep us posted!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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

  • Like 1

Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
catrina    103
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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.


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
James B    436
James B

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/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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!


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

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


  • Similar Content

    • BentleyD
      By BentleyD+
      Hey there,
       
      I am working on BentleyRolling.com. I used grams on MoonbodySoul.com and all the images are cropped to a square, whether they are square or 4:5 when posted on instagram, they still get cropped to a square. This looks way better than some being squares and some being 4:5. Did something change since I designed MoonBodySoul.com with Platform5? Can you help me crop all images to a square on BentleyRolling.com 
       
      All the best,
       
      Bentley
    • reklov79
      By reklov79+
      Hi,
      Meganav seems to have a bug if you upload a Logo with a higher resolution (which actually is useful as it looks then sharper on mobile phones). But on mobile the Logo is then larger than on a desktop. Problem is the following code in the meganav style.css. Simply the "height: auto !important" needs to be removed.
      @media (max-width: 480px) { style.css?ver=5.0.14:133 body .meganav-logo img{ height: auto !important; } } But how to achieve that? What is the standard method for customizing that? Overriding via CSS / LESS doesn't work - in this case especially because of the !important derictive used in the original CSS I believe.
      Changing the original CSS is something I don't want to do as it leads into issues when upgrading.
      Btw: I seem not to be the only one with that issue - anyhow, the solution here (not displaying the Logo on mobile) is not acceptable for me.
      Thanks,
      Volker
       
    • dougalperman
      By dougalperman+
      Hi there,
      I'm a big fan of Pagelines, and have been for years.
      I'm trying to control the size of video embeds and having some difficulty. I see that I can just paste the Vimeo video URL into the post and an embed widget will automatically appear, which is great. But the embed box created is much taller that the video (689 x 1000 pixels) so the content sits in the middle of a tall black box, which looks awkward.
      I tried using the full iFrame embed code from Vimeo, which solved the disproportionate embed frame size (or aspect ratio) issue, but despite specifying the dimensions I want (690 x 388), the videos displayed on the post are sized at 300 x 150 pixels.
      I can't work out how to change either.
      I'm using the latest version of Pagelines Framework (Pro) with the Agency them.
      Any help or advice very much appreciated.
      Thanks,
      Dougal
    • globalnative
      By globalnative+
      Hi there!
      I'm trying to create a featured image for my new blog post. It has text in it, and when I add it as a featured image some of the text is cut off on the right.
      Could I get the ideal dimensions for featured images? Or, a way to customise the dimensions so that they are easier to fit in the way I need?
      Thank you kindly
      Nate
       


    • BlueSkyCreative
      By BlueSkyCreative+
      Hi there
      I have postgrid on a new site I am developing and want to try using png images as a featured image, but they are rendering on the page as a black square?
      Any ideas as to why? 
      the site example is here http://orionglobalms.com/ scroll down to our services section and the first one has a png image as a featured image
       
      Many thanks
      Paul

×