Jump to content


Photo
- - - - -
Resolved

How To Customize Featured Image Size

featured image crop auto size customize blog index

  • Please log in to reply
26 replies to this topic

#1 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 24 October 2012 - 01:14 PM

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:

Please Login or Register to see this Hidden Content

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


Please Login or Register to see this Hidden Content


I appreciate your help!

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 October 2012 - 03:01 PM

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

#3 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 24 October 2012 - 04:23 PM

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.

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 October 2012 - 04:48 PM

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

#5 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 24 October 2012 - 04:56 PM

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:

Please Login or Register to see this Hidden Content

- The surrounding span:

Please Login or Register to see this Hidden Content

- The "a" class around that:

Please Login or Register to see this Hidden Content

- The "div" around all of the above:

Please Login or Register to see this Hidden Content


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

#6 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 24 October 2012 - 08:59 PM

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


Please Login or Register to see this Hidden Content


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:

Please Login or Register to see this Hidden Content



#7 James B

James B

    Advocate

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

Posted 25 October 2012 - 12:12 AM

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?

#8 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 25 October 2012 - 12:26 AM

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?

#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 13067 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 October 2012 - 08:46 AM

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.


Please Login or Register to see this Hidden Content


Please Login or Register to see this Hidden Content



#10 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 25 October 2012 - 01:14 PM

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

#11 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 26 October 2012 - 03:51 PM

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

#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 October 2012 - 04:10 PM

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!

#13 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 27 October 2012 - 11:07 AM

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

#14 Danny

Danny

    Is Awesome!

  • Moderators
  • 13067 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 October 2012 - 10:01 AM

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.

#15 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 29 October 2012 - 09:11 PM

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

#16 anjuks

anjuks

    Member

  • Members
  • 18 posts

Posted 30 October 2012 - 04:56 AM

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

#17 Danny

Danny

    Is Awesome!

  • Moderators
  • 13067 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 30 October 2012 - 09:56 AM

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.

#18 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 01 November 2012 - 03:55 PM

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

#19 Danny

Danny

    Is Awesome!

  • Moderators
  • 13067 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 November 2012 - 11:44 AM

No problem, remember to keep us posted!

#20 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 06 November 2012 - 03:56 PM

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
  • sp1te likes this





Also tagged with one or more of these keywords: Resolved, featured image, crop, auto, size, customize, blog index