Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
How is your boss expecting to turn a 2:1 (ish) ratio image into a a 2:2 (ish) ratio image?
Andrew thanks for pointing that out,
so in short you are saying that I just need to change the ratio of these pictures? will that help to fill up the ipad? also if I change the ratio of the images with the ipad in mind, does that mean I will have to do a media query for the ipad?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Before getting to the solution, these are the issues you might face:
– When using a 2:2 ratio image at desktop, you might have to cut off part of the height so that it’s not massive.
— This might affect the way your slider calculates its height, it shouldn’t but it might so watch out for any large gaps below your images.
— Think about loading times for your site
Maybe you could incorporate ‘srcset’ into your slider images, but this will probably require a lot of work in the Dashboard to accept multiple images per carousel slide + a lot of work in the template of the carousel. This would be the ideal solution, but it can be a lot of work.
Or you could continue using the same 2:1 ratio image on desktop and then mimick a 2:2 ratio image on tablet by expanding the image in height and then cutting off any excess width – but you might find that you will need a massive image on desktop for this not to look blurry on tablet.
It might be good to let your boss know that this is not a simple fix and you need some time to explore the best options. Then you can come back to him with the options and explain why this is taking so long – so that you don’t get fired 🙂
okay I’m going to try the 2:2 in the ways you mentioned above when I get home in about an hour, then i’ll get back to you here. Please stay with me on this and thank you for your guidance, I really appreciate it!
so I tried the 2:2 ratio image that Andrew suggested and it looks much better on the ipad. you can see what I did in http://www.visioncy.org/test3, to see ipad view just type this url http://mobiletest.me/ipad_mini_emulator/?u=http://www.visioncy.org/test3 , its not yet refined but looks better than before. thank you Andrew.
My problem now is the 2:2 pic doesn’t look good on desktop, its too long(height), this page is meant to have no scroll on desktop but when I use the 2:2 image I now have to scroll down to the 3 buttons at the bottom. can someone please help me on how to do a media query for ipad so that I can use different size images for ipad and desktop. I’m not an expert so if there is any other method please let me know. thank you.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Maybe try some CSS to cut the image off so that it appears shorter:
@media screen and (min-width: 940px) {
.vc_images_carousel {
height: 500px;
overflow: hidden;
}
.vc_images_carousel img {
margin-top: -100px
}
}
it worked just as you said it would :). Thank you so much Andrew! you can see how it looks on visioncy.org/test3. how can I apply a different image for ipad version only? because the picture is too stretched this way, but I believe if we can use the media query you sent me to use a different image by defining the url?
Thank you so much for your patience with me, I’m sorry I keep asking questions.
