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.

General Questions /

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

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

Automatically Resize Images in Content


Go to End


6 Posts   2570 Views

Avatar
zenmonkey

Community Member, 545 Posts

16 November 2010 at 8:50am

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

Community Member, 5 Posts

27 December 2010 at 9:33pm

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

Community Member, 244 Posts

28 December 2010 at 12:01am

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

Community Member, 5 Posts

28 December 2010 at 12:56am

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

Community Member, 271 Posts

28 December 2010 at 6:41am

Edited: 28/12/2010 6:43am

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

Community Member, 5 Posts

29 December 2010 at 4:04am

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