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   630 Views

Avatar
MrChimp

Community Member, 6 Posts

18 June 2013 at 12:47am

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

Community Member, 332 Posts

18 June 2013 at 5:26am

Edited: 18/06/2013 5:33am

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

Community Member, 6 Posts

25 June 2013 at 10:04pm

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

Community Member, 332 Posts

25 June 2013 at 11:02pm

Edited: 25/06/2013 11:05pm

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
copernican

Community Member, 189 Posts

26 June 2013 at 12:28am

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!