load image depending on screen size

frankmanl · Post by **frankmanl** » Thu May 08, 2014 12:06 pm

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

KO · Post by KO » Fri May 09, 2014 6:54 am

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

Post by **paulbaker** » Fri May 09, 2014 2:31 pm

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.

frankmanl · Post by **frankmanl** » Sat May 10, 2014 12:22 pm

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;
}
(...)

(as you can see "phone size" in this case means "max-width: 768px")
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?

nikkio · Post by **nikkio** » Sat May 10, 2014 10:03 pm

Hi,

Have you checked this?

http://dev.cmsmadesimple.org/projects/mobiledetect

KO · Post by KO » Mon May 12, 2014 2:55 pm

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.

frankmanl · Post by **frankmanl** » Tue May 13, 2014 6:06 pm

Thanks, I'll have a look at mobile detect.

psy · Post by **psy** » Fri May 16, 2014 10:02 am

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

CMS Made Simple Forums

load image depending on screen size

load image depending on screen size

Re: load image depending on screen size

Re: load image depending on screen size

Re: load image depending on screen size

Re: load image depending on screen size

Re: load image depending on screen size

Re: load image depending on screen size

Re: load image depending on screen size