Forums

Please improve thumbnails in 8.0

Permalink
I'm asking this for a second time:https://www.concrete5.org/community/forums/5-7-discussion/reasons-wh...
I'm building sites on C5 for almost a year now and thumbnails always been an issue. It's a common situation when designer demands you to create a block of fixed height and auto-width. Adding miniatures of right height to this blocks always creates pain in my lower back. Would be much appreciated if you'll implement at least first 2 points from my previous topic in 8.0. Ty.
 
ob7dev replied on at Permalink Reply
ob7dev
I don't understand. How is that an issue with thumbnails? Please excuse my lack of experience with c5 thumbnails as I've never used them outside the page list block.
MaestroMagnifico replied on at Permalink Reply
Last site i did:http://creditconference.ru/
Go to the bottom of the page (almost) where there's bunch of partners logos. Images there have max height and max width. How do you create thumbnails like this with C5? The answer is - you can't. I had to add miniatures with max width of 200px and auto height, and then add auto-height with CSS. You can't create thumbnails of exact right size with C5 right now in half of situations.
ob7dev replied on at Permalink Reply
ob7dev
You can generate your own thumbnails at any size you need (as long as its not larger than the original) based on the file ID by using the image helper.
$ih = Core::make('helper/image');
$f = File::getByID(FID);
$thumb = $ih->getThumbnail($f, 200, 200, true);
echo $thumb->src

Is that along the lines of what you need?
MaestroMagnifico replied on at Permalink Reply
Sweet. Can I set "auto" as 2d and 3d params? And will it work if I want 200 width and auto height? Also, how do I check if thumbnail already exists to not create it twice? Also, how do I get this thumbnail afrer?
Now I'm 
public function getSpeakerThumb($fID) {
    $fileObject = File::getByID($fID);
    $type = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle('partner_footer');
    if (is_object($fileObject)) {
        $src = $fileObject->getThumbnailURL($type->getBaseVersion());
        return $src;
    }
    return false;
}


Also, what about situations if I need image of max width 200px and max-height 100px but I don't want to crop them? So if image is 300x100, it should turn out 200x70px.
ob7dev replied on at Permalink Best Answer Reply
ob7dev
I think it requires a number, never tried feeding auto as one of the parameters, as its not CSS. But you can achieve the same by setting crop to false.
$thumb = $ih->getThumbnail($f, 200, 100, false);

would turn 300x100 image to 200x100 ( I think, honestly havn't used this method in a while)
or
$thumb = $ih->getThumbnail($f, 200, 9999, false);
to crop the image 200px wide and always maintain original aspect ratio. So a 300x100 image would crop to 200x66.7.

You can achieve basically any size you need outside making a thumbnail larger than the original image. Heres the api page: http://documentation.concrete5.org/api/class-Concrete.Core.File.Ima...


Your function would return the thumb src instead:
public function getSpeakerThumb($fID) {
    $fileObject = File::getByID($fID);
    if (is_object($fileObject)) {
        $ih = Core::make('helper/image');  // <-- u need the image helper    
        return $ih->getThumbnail($fileObject, 200, 200, false)->src;
    }
    return false;
}
mnakalay replied on at Permalink Reply
mnakalay
It is true that the thumbnail functionality is simply not good enough:
- no fixed height
- all images resized get a jpg extension no matter what the original image was. It's not converted into a jpg, it is resized as the original image and then gets a jpg extension.
- resized images are huge. I uploaded 19ko png images and they were resized into 245ko images.

Having said so, the purpose of it is:
1- images are resized from the get go and then ready to use so it's easy on server resources. On the other hand, the thumbnail function mentioned by ob7dev resizes images on page load so it can really slow down a page load depending on how many images you have and how big they are.
2-thumbnail types allow you to have a picture tag in the content block and to control image sizes and retina support from your theme configuration so it's a better responsive model.

I should point out, however, that probably 99% of galleries and other image add-ons in the marketplace still use the thumbnail function instead of thumbnail types so it certainly has its place and although it was going to be deprecated quickly the core team decided to keep it around for a bit longer.
ob7dev replied on at Permalink Reply
ob7dev
Here's a good solution for compressing images to certain dimensions:
#/bin/bash
image=$1
width=$2
quality=$3
if [[ ! "$1" || ! "$2" || ! "$3" ]]; then
   echo "Usage: compress-image <file-name> <output-width> <quality 0-100>"
else
   mogrify -path . -filter Triangle -define filter:support=2 -thumbnail "$width" -unsharp 0.25x0.25+8+0.065 -dither None -posterize 136 -quality "$quality" -define jpeg:fancy-upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude-chunk=all -interlace none -colorspace sRGB -strip "$image"
fi

Of course, it's a bash script ran from terminal, not something built into c5. It gets image sizes down even smaller than using something like Photoshop's export for web. Anyone here with a Unix like system is welcome to try it out. I believe it could be ported to run via c5 since it uses ImageMagick, but its good to know the core team is working on a better solution!
MaestroMagnifico replied on at Permalink Reply
0ob7dev, thanks for your solution. I just got spare time to test it. But will getSpeakerThumb function above recreate thumbnail every time? I'm not sure how to test this right. I've put this function in block's controller and called it from viewer like so:
$src = $controller->getSpeakerThumb($photoID);
It seems like it returns same link everytime I update page. But it's for image in cache:
/application/files/cache/cdd2765885950b93eb58e8420dd7bd6f.png
I'm not sure will it recreate thumbnail again if cache will drop.

Also, this way of resizing killed transparency for PNGs:
http://dl2.joxi.net/drive/2016/11/30/0001/2051/108547/47/d1d530ab25...
This is a big issue. I guess I'll have to write my own function to resize images for current project.
ob7dev replied on at Permalink Reply
ob7dev
If the sites cache is off it will recreate it everytime. Otheriwse I think it loads the cached version once its been made. If you clear the sites cache it will make a new one I believe.

As for the example you posted, can you also post what it looks like before cropping so we can compare the two?
MaestroMagnifico replied on at Permalink Reply
Here's first one
http://savepic.ru/12436177.png
Images on example above was rotated -90 deg with CSS btw. Transparency was around each original image but after resizing it became white parts. Second from top image was white so it merged with background and became all white as you can see.

I'm not sure why images even caching in my C5, i disabled all cache options in settings. I'll try to experement with dropping cache manually today. But first I need to find where original thumbnail is placed.
ob7dev replied on at Permalink Reply
ob7dev
This may be of some help to you:
http://www.mesuva.com.au/blog/concrete5/using-concrete57s-thumbnail...
MaestroMagnifico replied on at Permalink Reply
This is how I used thumbnails before. The problem with this is that you have to create thumbnail type. And then this thumbnail creates for every uploaded picture no matter if you want it or not. This is one of the main reasons I started to investigate alternative ways of creating thumbnails.
ob7dev replied on at Permalink Reply
ob7dev
A similar post with some useful info:
https://www.concrete5.org/community/forums/customizing_c5/full-viewp...