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.

General Questions

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

Automatically Resize Images in Content


Reply

6 Posts   1476 Views

Avatar
zenmonkey

16 November 2010 at 8:50am Community Member, 528 Posts

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?

Avatar
cycle

27 December 2010 at 9:33pm Community Member, 5 Posts

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.

Avatar
ajshort

28 December 2010 at 12:01am Community Member, 244 Posts

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.

Avatar
cycle

28 December 2010 at 12:56am Community Member, 5 Posts

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!

Avatar
Martijn

28 December 2010 at 6:41am (Last edited: 28 December 2010 6:43am), Community Member, 271 Posts

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;
   }
}

Avatar
cycle

29 December 2010 at 4:04am Community Member, 5 Posts

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