Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#301 2015-04-17 19:22:42
Re: smd_thumbnail: manage multiple thumbnails of your images
A feature it is … :))
Offline
#302 2015-06-14 07:31:24
Re: smd_thumbnail: manage multiple thumbnails of your images
I thought setting quality to 100% the weight of the original image would never be exeeded … but it does. Even when the dimensions are smaller. E.g. 199 KB for an original image (1080 × 1440) towards (611 × 815) with 100% quality will give 342 KB … !? But with quality set to 75% it gives 76 KB. That’s quite a difference. Is this right?
Last edited by RedFox (2015-06-14 07:42:41)
Offline
#303 2015-06-14 08:36:50
Re: smd_thumbnail: manage multiple thumbnails of your images
Yes, the size differences for jpg quality settings are enormous, especially at the upper range. jpeg compression is always lossy, i.e. degrades detail in the image by generalising patterns in the image. If your original was saved, say as an 80% quality jpeg, the 100% can’t improve on the quality of the 80% original (except through other means such as sharpening), it will always degrade it a little more.
If you’re resizing an image, the pixels will be recomputed for the new size and the jpg compression re-applied. 100% means it seeks fewer/smaller patterns, the lower the quality, the more it generalises patterns in the image. The sweet spot is the quality level where the computer can generalize patterns in the image as much as possible, but we don’t perceive it with our eyes.
TXP Builders – finely-crafted code, design and txp
Offline
#304 2015-06-14 20:57:28
Re: smd_thumbnail: manage multiple thumbnails of your images
Would it be possible to add a new “border” feature to smd_thumbnail that would resize an image proportionally within the given width and height while including a border to equal the full width and height? Much like example #4 here: http://www.binarymoon.co.uk/demo/timthumb-zoom-crop/
Is anyone else interested in something like this?
Offline
#305 2015-06-14 22:03:36
Re: smd_thumbnail: manage multiple thumbnails of your images
photonomad wrote #291536:
Would it be possible to add a new “border” feature to smd_thumbnail that would resize an image proportionally within the given width and height while including a border to equal the full width and height? Much like example #4 here: http://www.binarymoon.co.uk/demo/timthumb-zoom-crop/
If I understand your requirement, it’s pretty straightforward to do most of that in CSS with or without the estimable smd_thumbnails. Responsive images info here and my SCSS for the thumbnails borders and padding etc
.thumb_gallery {margin-left:0;
li {
text-align: center;
display: inline-block;
img{
display: inline-block;
padding: 4px;
margin-bottom: 2px;
border: 1px solid #ddd;
background-color: #fff;
width: 95px;
@media #{$medium-up}{width: 100%;}
}
}
}Offline
#306 2015-06-15 08:29:48
Re: smd_thumbnail: manage multiple thumbnails of your images
photonomad wrote #291536:
Would it be possible to add a new “border” feature to smd_thumbnail that would resize an image proportionally within the given width and height while including a border to equal the full width and height?
Interesting. smd_thumbnail isn’t renowned for its image processing ability! The ‘crop’ feature (sort of) does this if your image is bigger and you don’t want it squished, but to actually resize it to maintain the aspect ratio and add a matte to fit the profile is not something I’d considered.
Primarily I suppose this is because I’m lazy and rely on Txp’s internal image handling routines which only support crop and sharpen. On the surface, it’s not rocket science after all.
But the UI to do so might be a tad clumsy when setting up the profile. Plus you’re out of luck if you want to change the pad colour in future, unless you happen to be using PNGs. Which brings me onto the final point: what about transparency? As it’s of no use to JPGs, there needs to be some fallback for a background colour in case your image doesn’t support transparency. Or should it skip such images? Or offer the option somehow?
This seems like one of those things that ought to be easy, but carries a lot of baggage given the current way smd_thumbnail works. Unless we can find a way round the UI and fallback mechanisms, I’m tempted to suggest not doing it in the plugin, and to process this sort of thing separately in Photoshop, sorry.
But I’m willing to consider an implementation if a decent workflow / UI can be figured out and this would be genuinely useful to folk. Ideas and suggestions always welcome.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
#307 2015-10-09 09:09:52
Re: smd_thumbnail: manage multiple thumbnails of your images
On this page (under construction) I’m trying to implement a slider.
With this piece of code in the article it works:
<ul class="flickity">
<li class="gallery-cell">
<txp:smd_thumbnail id="103" type="large" />
</li>
<li class="gallery-cell">
<txp:smd_thumbnail id="104" type="large" />
</li>
</ul>To make it more user-friendly I came up with this in the article:
<txp:smd_thumbnail id="103,104" type="large" form="flickity" />… and in the form:
<txp:images wraptag="ul" class="flickity">
<li class="gallery-cell"><txp:smd_thumbnail id='<txp:smd_thumbnail_info item="id" />' type='<txp:smd_thumbnail_info item="type" />' /></li>
</txp:images>Ah … it does something, but it’s not quit good enough. The question is: can it be done this way? Or do I have to use smd:macro?
Offline
#308 2015-10-09 10:03:59
Re: smd_thumbnail: manage multiple thumbnails of your images
It looks almost right, you’ve just got some additional br tags in the output. Try adding the attribute break="" to your txp:images tag:
<txp:images wraptag="ul" class="flickity" break=""> …TXP Builders – finely-crafted code, design and txp
Offline
#309 2015-10-09 10:37:42
Re: smd_thumbnail: manage multiple thumbnails of your images
Thanks @jacob … one problem solved … :) … but there’s still only one image and that image is being repeated by the … form, I guess … !?
Offline
#310 2015-10-09 12:17:26
Re: smd_thumbnail: manage multiple thumbnails of your images
Maybe switch things around. Use this in your article body:
<txp:images id="103,104" type="large" form="flickity" wraptag="ul" break="" class="flickity" />And then make your flickity form as follows:
<txp:smd_thumbnail type="large" wraptag="li" class="gallery-cell" />It is a bit of a handful to write in the body form so, yes, you could use smd_macro to make it more succinct, or you could insert this in your article body:
<txp:output_form form="slider">103,104</txp:output_form>And this in your slider form:
<txp:images id='<txp:yield />' type="large" wraptag="ul" break="" class="felicity">
<txp:smd_thumbnail type="large" wraptag="li" class="gallery-cell" />
</txp:images>TXP Builders – finely-crafted code, design and txp
Offline
#311 2015-10-09 13:45:14
Re: smd_thumbnail: manage multiple thumbnails of your images
jakob wrote #295539:
<txp:images id='<txp:yield />' type="large" wraptag="ul" break="" class="felicity">...
‘Felicity’ … !? … what are you thinking about? … ;-)
What do you think of this (smd_macro):
<txp:images id="{img_id}" wraptag="ul" break="" class="flickity">
<li class="gallery-cell"><txp:smd_thumbnail type="{style}" /></li>
</txp:images>And in the article:
<txp:slider id="61,104" type="large" />It does a great job … :)
Thanks again @jacob for joining in.
Offline
#312 2015-10-09 14:00:18
Re: smd_thumbnail: manage multiple thumbnails of your images
Looks great. And I agree that smd_macro makes this kind of thing much more succinct.
‘Felicity’ … !? … what are you thinking about? … ;-)
:-) I thought I’d caught all of those. Actually, it was the Mac’s auto-correct function. Felicity must be Siri’s girlfriend
TXP Builders – finely-crafted code, design and txp
Offline