Page 1 of 1
load image depending on screen size
Posted: Thu May 08, 2014 12:06 pm
by frankmanl
For a responsive design I made two header images, desktop-banner.jpg and phone-banner.jpg.
I load them both and use CSS to display one of them, depending on screen width (I use
display:block for one and
display:none for the other).
It works, but it is not too elegant.
I wonder if this can be done differently, something like
Code: Select all
if screen has phone size
load phone-banner.jpg
else
load desktop-banner.jpg
endif
I also thought about using the images as background images in a <div>-tag (set with CSS), but when resizing the screen both width and height of the div should scale with the resizing - I don't have a clue as how to scale the div's height ...
Frank
Re: load image depending on screen size
Posted: Fri May 09, 2014 6:54 am
by KO
Have you looked up CSS Media Queries? I think you should check them if you have not used them before.
https://developer.mozilla.org/en-US/doc ... ia_queries
Re: load image depending on screen size
Posted: Fri May 09, 2014 2:31 pm
by paulbaker
Trouble is "phone size" could mean quite a lot of different sizes. And is the phone held in portrait or landscape view? That gives different widths too.
Twitter Bootstrap 3 approaches this by resizing the image in the css. See the answer to this for the css:
http://stackoverflow.com/questions/1793 ... ootstrap-3
And yeah, Twitter Bootstrap 3 (and all the "starter" frameworks) use CSS Media Queries, so definitely agree with KO that they are worth spending time learning about.
Re: load image depending on screen size
Posted: Sat May 10, 2014 12:22 pm
by frankmanl
I already use CSS media queries to decide which image is shown:
Code: Select all
.max768 {
display: block;
}
.min769 {
display: none;
}
(...)
@media only screen and (min-width: 769px) {
.max768 {
display: none;
}
.min769{
display: block;
}
(...)
In my template I use:
Code: Select all
<div class="max768"><img src="phone-banner.jpg" /></div>
<div class="min769"><img src="dekstop-banner.jpg" /></div>
But this makes the page load both images although it displays only one, depending on screen width.
As said, I think it's not too elegant and I would like to load only the one image that is needed.
I'm wondering, is that possible at all?
Re: load image depending on screen size
Posted: Sat May 10, 2014 10:03 pm
by nikkio
Re: load image depending on screen size
Posted: Mon May 12, 2014 2:55 pm
by KO
If you need to use img tag, then that mobiledetect is the way I would go. Just create some kind of smarty if/else with it in template.
If you were using it as background-image then you could do this with media queries only.
Re: load image depending on screen size
Posted: Tue May 13, 2014 6:06 pm
by frankmanl
Thanks, I'll have a look at mobile detect.
Re: load image depending on screen size
Posted: Fri May 16, 2014 10:02 am
by psy
CGExtensions module has the tag {cge_is_smartphone [assign=name]}.
I typically use this for phone numbers above the <head> tag:
Code: Select all
{cge_is_smartphone assign=smartphone}
then in the content when I need to insert a phone number:
Code: Select all
{if isset($smartphone)}<a href="tel:555-555-5555">Click to call</a>{else}555-555-5555{/if}
You could use the same logic to determine which image to show.
No solution, either in php or css media queries, is 100% accurate but you can get close.
Tip for the unwary: once assigned the tag to 'phone' then used 'phone' as the field alias in a FormBuilder form. Caused a bit of grief. LOL