Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions

Delivering smaller images for mobile


Reply

5 Posts   588 Views

Avatar
MrChimp

18 June 2013 at 12:47am Community Member, 6 Posts

I have an image with some very large images. I would like to deliver smaller images if our site is accessed from a mobile browser. Is there a straight forward way to do this with Silverstripe?

If would ideally like to do something like:

<% if IsMobile %>
<% $Image.Cropped(640,360) %>
<% else %>
<% $Image.Cropped(1280,720) %>
<% end_if %>

Avatar
Webdoc

18 June 2013 at 5:26am (Last edited: 18 June 2013 5:33am), Community Member, 332 Posts

There is also alternative using css image width.
1. add to Page.ss the mobile css line
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
2. add css to mobile.css file something like this:

@media screen and (max-device-width: 480px){
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}

.crop img {
width: 400px;
height: 300px;
margin: -75px 0 0 -100px;
}
}

html of that css looks like this:

<div class="crop">
   <img src="imagefilename.jpg" />
</div>


or

<p class="crop">
   <img src="imagefilename.jpg" />
</p>


-------------------------------------------------------------------------------------------------------
Arvixe Web Hosting / SilverStripe Community Liaison | Looking for quality [url=http://www.arvixe.com/preloaded_silverstripe_hosting/]SilverStripe Web Hosting[/url]? Look no further than [url=http://www.arvixe.com/]Arvixe Web Hosting[/url]!

Avatar
MrChimp

25 June 2013 at 10:04pm Community Member, 6 Posts

The site is responsive so I'm already doing that but this still requires that the mobile users download the full size images which isn't ideal.

Avatar
Webdoc

25 June 2013 at 11:02pm (Last edited: 25 June 2013 11:05pm), Community Member, 332 Posts

in your mobile theme use
<% control Image %>
<img src="$CroppedImage(100,100).URL" alt="$Title" />
<% end_control %>

also read this - http://archive.ssbits.com/detecting-mobile-browsers-to-re-theme-your-site/
---------------------------------------------------------------------------------------------------------------------
Arvixe Web Hosting / SilverStripe Community Liaison | Looking for quality [url=http://www.arvixe.com/preloaded_silverstripe_hosting/]SilverStripe Web Hosting[/url]? Look no further than [url=http://www.arvixe.com/]Arvixe Web Hosting[/url]!

Avatar
IOTI

26 June 2013 at 12:28am Community Member, 189 Posts

You could try the [url=https://github.com/silverstripe/silverstripe-mobile]mobile module[/url]. It provides a isMobile function that you could use in your template. I haven't tested it in SS3 myself but the docs say its support so you should be good to go!