Jump to:

23007 Posts in 11866 Topics by 2828 members

General Questions

SilverStripe Forums » General Questions » Automatically Resize Images in Content

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Page: 1
Go to End
Author Topic: 1363 Views
  • zenmonkey
    Avatar
    Community Member
    524 Posts

    Automatically Resize Images in Content Link to this post

    Is there any way to access image objects in the Content section of page in order to resize them? Or better yet resize and wrap in a link to the full size?

  • cycle
    Avatar
    Community Member
    5 Posts

    Re: Automatically Resize Images in Content Link to this post

    Ah yes, we've all seen it happen. 1-3 MB Images with width/height set to <300px. Loading slows down to a crawl and the browser scale artifacts ruin your otherwise slick site!

    So this *would* be a killer feature indeed! I've been using MODx for a long time and even now stick to it because, among other things, it can do this, at least with the legacy MODx evolution branch that is ( by a plugin called Directresize ).

    I am currently scouting around, thinking whether I should get my hands dirty with SilverStripe because I am not fully satisfied with MODx development.

    Is this feature somewhere on the radar? I can code php but am completely unfamiliar with SS and its framework so I'd imagine it'd be rather tough to implement myself.

  • ajshort
    Avatar
    Community Member
    244 Posts

    Re: Automatically Resize Images in Content Link to this post

    This is already implemented - when you save a page any images you resize are automatically resampled down to the proper size. If you want to link to the full version just insert your image like normal, then use the insert link button to link to the full version.

  • cycle
    Avatar
    Community Member
    5 Posts

    Re: Automatically Resize Images in Content Link to this post

    That's pretty cool but leaves 2 things to be desired (which may be covered already but I don't know about yet):

    1. Instead of the full version use a scaled version with a configurable maximum dimension. For example a max width of 800. This would save bandwidth and guarantee it'll fit in virtually any browser window.

    2. The image link to the full version should be lightbox/slimbox style. This involves some minor extra markup, to be added programatically e.g. rel="lightbox". Without some kind of popup the enduser only sees the image and must use the back button.

    I hope you can follow what I am trying to say, thanks for your information!

  • Martijn
    Avatar
    Community Member
    271 Posts

    Re: Automatically Resize Images in Content Link to this post

    I fixed this with a ContentParser so resized images will be wrapped inside a tags with links to the fullsize image and use nyroModal to create a lighbox popup (http://nyromodal.nyrodev.com/):

    in template use :$Content.Parse(ImageLightboxParser)

    (this wraps all images in a <a> tag, so if you have a improvement, please let me know )

    <?php

    /**
    * Adds nyroModal links to resized images
    */

    class ImageLightboxParser extends TextParser{
       
       public function parse() {
          
          // match image src
          $pattern = '/<img[^>]+src[\\s=\'"]';
          $pattern .= '+([^"\'>\\s]+)/is';
          if(preg_match_all($pattern,$this->content,$match)){
             $i = 0;
             foreach ($match[0] as $m){
                if(strstr($m, '_resampled/resizedimage')){
                   // get original image url
                   $href = preg_replace('/_resampled\/resizedimage[0-9]*-/', '', $match[1][$i]);
                   // add a tag with original image url
                   $this->content   = str_replace ($m,'<a class="nyroModal" href="'.$href.'">'.$match[0][$i],$this->content);
                }else{
                   $this->content   = str_replace ($m,'<a>'.$match[0][$i],$this->content);
                }
                $i++;
             }
             
             // add missing </a> tag after each image
             $this->content = preg_replace('/<img[^>]+>/', '${0}</a>', $this->content);
             
          }
          //this should be fixed now : call the active shortcodeparsers
          return ShortcodeParser::get_active()->parse($this->content);
          //return $this->content;
       }
    }

  • cycle
    Avatar
    Community Member
    5 Posts

    Re: Automatically Resize Images in Content Link to this post

    Thanks for sharing your code. Without any critisism, my search continues because (correct me if I'm wrong):

    - This seems to parse the entire html for every request instead of on saving a page
    - It always uses full size uploaded image, ideally you'd want a popup version with configurable max dimension

    1363 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.