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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Delivering smaller images for mobile


Go to End


5 Posts   1967 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, 349 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 SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!

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, 349 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 SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!

Avatar
copernican

Community Member, 189 Posts

26 June 2013 at 12:28am

You could try the mobile module. 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!