Jump to:

3434 Posts in 1026 Topics by 866 members

Template Questions

SilverStripe Forums » Template Questions » Delivering smaller images for mobile

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

Page: 1
Go to End
Author Topic: 551 Views
  • MrChimp
    Avatar
    Community Member
    6 Posts

    Delivering smaller images for mobile Link to this post

    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 %>

  • Webdoc
    Avatar
    Community Member
    332 Posts

    Re: Delivering smaller images for mobile Link to this post

    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!

  • MrChimp
    Avatar
    Community Member
    6 Posts

    Re: Delivering smaller images for mobile Link to this post

    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.

  • Webdoc
    Avatar
    Community Member
    332 Posts

    Re: Delivering smaller images for mobile Link to this post

    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!

  • IOTI
    Avatar
    Community Member
    189 Posts

    Re: Delivering smaller images for mobile Link to this post

    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!

    551 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.