Generate friendly url for thumbnail image and use mod_rewrite to parse the url. This extra depend on phpThumbOf for rendering the thumbnail, but will do fine to generate url only. That's the main different with phpThumbOf. Using friendlyThumbOf, the thumbnail will be rendered later when there is a 'real' request to the server.
####Features####
- Enable/disable friendly feature
- Modify the url prefix (by default "image")
- Enable/disable to append context to url, like
http://mydomain.com/image/contextKey/anyMode/image.jpg
- Add, modify and delete any mode as you wish from System Events. By default, there are 4 modes provided: default
mw950
, thumbw90&h120
, mediumw=300&h=400
, and largew=900&h=1200
- Sample mod_rewrite with 4 advanced scenarios can be found on doc core/components/friendlythumbof/doc/ht.access
- TO DO: Plugin for cleaning up the cache
####Usage#### Call the snippet from resource or chunk:
[[friendlyThumbOf? &input=`media/logo.jpg` &mode=`thumb`]]
/* will generate a url like http://mydomain.com/image/thumb/media/logo.jpg */
[[friendlyThumbOf? &input=`path/to/my/image.jpg` &mode=`anotherMode`]]
/* will generate a url like http://mydomain.com/image/anotherMode/path/to/my/image.jpg */
For CMP, like gallery or image browser, the snippet also can be used to display the thumbail. For example:
<script type="text/javascript">
var thumbUrl = "[[friendlyThumbOf? &mode=`thumb` &base=`1`]]";
//will generate http://mydomain.com/image/thumb (without trailing slash)
var imgGallery = ['gallery/photo1.jpg','gallery/photo2.jpg'];
Ext.each(imgGallery, function(img){
document.write('<img src="' + thumbUrl + '/' + img + '" />');
});
//...
Another example is using runSnippet to get the base thumbnail url:
<?php
$thumbUrl = $modx->runSnippet('friendlyThumbOf', array('mode'=>'anotherThumb', 'base'=>1));
/* will generate http://mydomain.com/image/anotherThumb (without trailing slash) */
$imgGallery = array('gallery/photo1.jpg','gallery/photo2.jpg');
foreach($imgGallery as $img) {
echo '<img src="' . $thumbUrl . '/' . $img . '" />';
}
//...