Elxis CMS Forum

Extensions => Bots and plugins => Topic started by: kyomar on October 03, 2013, 04:47:53

Title: Gallery plugin - scaled images (page speed)
Post by: kyomar on October 03, 2013, 04:47:53

Hi, I am in the process to optimize website speed (testing with pagespeed and yslow). Pagespeed I get only 60% while yslow stands now at 90%. Page speed's recommendation is "served scaled images" with the following info:

http://.../media/images/gallery_frontpage/photo.jpg is resized in HTML or CSS from 600x450 to 60x60. Serving a scaled image could save 72.7KiB (98% reduction).

How can I create "real" thumbs (scaled images) with the gallery plugin and not just downsized ones?

Thank you for your help!

Title: Re: Gallery plugin - scaled images (page speed)
Post by: datahell on October 08, 2013, 11:55:39

Read these 3 notes (best solution: 1, easiest solution: 3)

1
You can easily create thumbnails with Elxis and optionally save them into cache (under repository/cache/thumbnails/) but you have to create a viewer for that.

Here is how to do it.
Normal image HTML:
<img src="http://www.example.com/media/images/test.jpg" alt="image" />

Creating and showing thumbnails:
<img src="http://www.example.com/inner.php/viewer?f=media/images/test.jpg" alt="image" />

Inside the viewer script:

Code: [Select]

$f = trim(filter_input(INPUT_GET, 'f', FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH));
$img = 'components/com_emedia/images/image_not_found.png';
if (($f != '') && file_exists(ELXIS_PATH.'/'.$f)) {
$ext = strtolower(pathinfo(ELXIS_PATH.'/'.$f, PATHINFO_EXTENSION));
if (in_array($ext, array('png', 'gif', 'jpeg', 'jpg'))) { $img = $f; }
}

$thumb = eFactory::getElxis()->obj('thumb');
$thumb->make($img, 100, 100, true, true);

make method of the thumb Elxis helper:

Code: [Select]

public function make($image, $width=0, $height=0, $crop=true, $use_cache=true)
2
If you want just to resize an image (attention the original image will be resized!):

Code: [Select]

eFactory::getFiles()->resizeImage('media/images/test.png', 100, 100, false);
3
Finally here is a trick especially for the gallery plugin.
Suppose you have uploaded your images in folder media/images/mygallery/
For each image create a thumbnail, put it is the same folder and name it like this
big image: test.jpg
thumbnail: test_thumb.jpg
big image: something.png
thumbnail: something_thumb.png

Got it?

Now, find file components/com_content/plugins/gallery/gallery.plugin.php
rename it to something like components/com_content/plugins/gallery/gallery.plugin_original.php
and get the file I attach you and put it in its place. It is a modified version that will display the "_thumb" files you have created instead of the big ones.
Your problem is solved!

Title: Re: Gallery plugin - scaled images (page speed)
Post by: kyomar on October 09, 2013, 13:12:53

Thank you very much datahell - works great. I have implemented solution 3 and the result exceeds my expectations. Page speed increased from 64 to 84% and yslow is 90%. Elxis rocks!

Title: Example of thumbnail generation
Post by: datahell on March 11, 2014, 19:00:25

I reply to this old post because I want to show in more details how to create thumbnails in Elxis 4.x (one of the methods).

In the example below I have a large image ($large) and I want to create a thumbnail for it ($thumb) of size 100x100 pixels with crop enabled.

Code: [Select]

<?php 
$elxis = eFactory::getElxis();
$eFiles = eFactory::getFiles();

$large = 'media/images/something.png';
$thumb = 'modules/mod_sample/files/something.png';

//set image url to the large image (fail over URL, it will be replaced by the thumbnail URL on success)
$image = $elxis->secureBase().'/'.$large;

if (!file_exists(ELXIS_PATH.'/'.$thumb)) { //thumb does not exist -> create it
//copy large image to destination path
$ok = $eFiles->copy($large, $thumb);
if ($ok) { //copy success
//resize it
$ok = $eFiles->resizeImage($thumb, 100, 100, true);
if ($ok) { //resize success, set image to thumbnail url
$image = $elxis->secureBase().'/'.$thumb;
} else { //resize failed, delete copied image
$eFiles->deleteFile($thumb);
}
}
} else {
//thumbnail already exists, set image to thumbnail url
$image = $elxis->secureBase().'/'.$thumb;
}

//display the image thumbnail
echo '<img src="'.$image.'" alt="thumbnail" width="100" height="100" />';

?>


Title: Re: Gallery plugin - scaled images (page speed)
Post by: nikos on March 13, 2014, 00:08:16

Excellent Datahell !!!

The last one code is brilliant and helped me a lot to understand the mechanism of creating thumbnails and to complete a gallery plugin on which i was working.

Thank you very much!