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?
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.
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.
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.
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!
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;
}
}
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