Jump to content


Photo
- - - - -

Featured Image truncated on iPad

featured image

Best Answer Rob , 25 September 2013 - 04:18 AM

Hi Dave,

 

I'm afraid the problem is that your graphic is wider than the iPad browser allows.  Often, browsers will crop images.  It's not Framework doing that.

 

But, that said, there are solutions.

1.  Resize your image and add some background color on either side so that what is cropped is simply empty space.  This is a best practice for slides with text in the graphics.  Simply open the image in your normal graphics editor, resize it down and add some background color to either side.

2.  Use the Browser-Specific CSS plugin and re-size the slider for that browser only.  This will give you more info. http://support.pagel...r-specific-css/   You'll find that if your CSS skills are good, you can accomplish this quickly.

3.  Change the size from static to aspect ratio (static is not responsive, while aspect ratio is).  There are some drawbacks to this, but it's easy to change, and worth a try.   You can learn more about aspect ratio here: http://support.pagel...tions/features/

 

I hope one of these solutions work for you. Please let us know.

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 davidcosgrove

davidcosgrove

    Advanced Member

  • Members

  • 34 posts
  • LocationCT
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 24 September 2013 - 03:00 PM

Hi,

 

Our website

Please Login or Register to see this Hidden Content

truncates the home page feature slider images when viewed on an iPad, but looks perfect on standard PC/laptop.

 

You can see a screenshot of the iPad at

Please Login or Register to see this Hidden Content

 

We are hosting on WP Engine, using the latest WP and PageLines theme.

 

Here is a screenshot of the Page Options Features panel -

Please Login or Register to see this Hidden Content

 

Thanks for your help.

 

Dave



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 September 2013 - 04:18 AM   Best Answer

Hi Dave,

 

I'm afraid the problem is that your graphic is wider than the iPad browser allows.  Often, browsers will crop images.  It's not Framework doing that.

 

But, that said, there are solutions.

1.  Resize your image and add some background color on either side so that what is cropped is simply empty space.  This is a best practice for slides with text in the graphics.  Simply open the image in your normal graphics editor, resize it down and add some background color to either side.

2.  Use the Browser-Specific CSS plugin and re-size the slider for that browser only.  This will give you more info.

Please Login or Register to see this Hidden Content

   You'll find that if your CSS skills are good, you can accomplish this quickly.

3.  Change the size from static to aspect ratio (static is not responsive, while aspect ratio is).  There are some drawbacks to this, but it's easy to change, and worth a try.   You can learn more about aspect ratio here:

Please Login or Register to see this Hidden Content

 

I hope one of these solutions work for you. Please let us know.



#3 davidcosgrove

davidcosgrove

    Advanced Member

  • Members

  • 34 posts
  • LocationCT
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 25 September 2013 - 05:31 PM

Hi Rob,

 

Thank you very much for your help - I have been tinkering with the aspect ratio option, and I am hoping that with some adjustments I can get it to work.

 

Here is one of the feature images, which is 1070x300 -

Please Login or Register to see this Hidden Content

 

I used this online aspect ratio calculator

Please Login or Register to see this Hidden Content

 

It said the aspect ratio was 107:30 which translates into 3.566 - so I plugged 3.566 into the Aspect Mode box and set height mode to Aspect Height - the features look exactly the same on my laptop and PC as they did with fixed height, but they do not seem to have changed at all for the iPad - am I missing a step or doing something incorrect?

 

Thanks again for your help.

 

Dave



#4 davidcosgrove

davidcosgrove

    Advanced Member

  • Members

  • 34 posts
  • LocationCT
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 25 September 2013 - 11:44 PM

Hi Rob,

 

It's now working perfectly fine - caches needed to be cleared.  The featured images now are scaling on the iPad, iPhone, Samsung Galaxy tablet, etc. etc.

 

Thanks again for your help!

 

Dave



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 26 September 2013 - 05:42 AM

Excellent news!







Also tagged with one or more of these keywords: featured image