Hi,
New to Pinegrow. I like what I see so far. Can anyone tell me how to do different size header images? One size to show for desktop / Laptop, and the other size for mobile version. Greatly appreciated. I’m coming from Dreamweaver, just use to right clicking and hiding element.
Thanks
Randy
No need for different sizes, Bootstrap will resize automatically over devices provided added to page correctly.
Add a big image, preview in browser, make browser window narrower and see what happens. If image rescales here it will be fine on smaller screens.
You can do the same in standard Dreamweaver html pages as well with just a couple of lines of css. Much easier than messing with more than one image size.
well… that depends… on just what Mobile is.
iPad, iPhone, Blackberry, …Android toaster etc etc.
as well as what @mandarin suggests, there are other ways to do it too.
The Bootstrap framework… kind of takes care of it.
but you end up with your overly LARGE for mobile images being presented in a smaller format - but the whole image is still downloaded. inefficient.
ie, a stupidly large 4MB banner image would be downloaded to your nice shiny mobile device, but shrunk to fit just nice
not very efficient for Phone data connections. Ok for the display render, but would be slow and costly to data package.
And also terribly slow compared to the , say 73KB image that it should have had.
There are also other frameworks that do this too, so that you end up with the end result but really not data efficient.
So! you need different images… different size… but… what sizes?
back to the first point about just what is mobile - in your eyes? do you have user data for your new shiny site? recoreded/anticipated user device data? say …
Hey! 95% of this sites clients use an iPhone! sorted!
If not then you have to cater for the best selection of screen sizes you can currently anticipate your user base having and supply them accordingly so that each device downloads its most apt image size.
This will employ break points, or “Media Queries” where the device reports back its viewing portal size
Pinegrow manages Breakpoints, Media queries quite well.
and
and basically, for each media query you would have a link to the BEST SIZE IMAGE for that viewport.
so check those out first , see here,
and also have a look over this, it explains the concepts quite well.
https://cloudfour.com/thinks/responsive-images-101-part-9-image-breakpoints/
and here is an online tool you could use to create your responsive images, until you figure it all out locally.
which follows on from this article.
which explains its principle quite well.
as does this
And then, I hope someone else chimes in and shows you how to implement this all in Pinegrow, which is probably just what you wanted!
But. I felt this might be beneficial if you didnt want to go down the framework route, were coming from Dreamweaver and maybe didn’t get the “whole image thing” picture.
If you do, sorry, wasn’t meant to be patronising, just trying to help 