smd_thumbnail: manage multiple thumbnails of your images

jstubbs · 2013-01-15 00:41:24

Thanks Stef – the latest beta version you posted does omit the width and height:

<txp:smd_thumbnail type="medium" id="15" class="left" width="0" height="0" />

Returns:

<img src="/images/medium/15.jpg" url="/images/medium/15.jpg" alt="" type="medium" name="jonathan.jpg" author="jstubbs" date="2013-01-14 10:11:19" class="left" title="Image=800 × 600&nbsp;Profile=0 × 0">

The title attribute is definitely not good. For example on client sites where smd_thumbnail is virtually a required plugin (its awesome Stef!) we can’t really expect that clients will always enter caption data. On responsive sites, clients already have to add width="0" and height="0" and in my experience caption and title fields don’t get any data.

If it were me, by default I’d want just the required attributes to display unless specific attributes are entered in the tag construct. From the above, date, type and author could go. For title, maybe set it to the image name?

Bloke · 2013-01-15 21:52:39

jstubbs wrote:

On responsive sites, clients already have to add width="0" and height="0"

OK, so let’s take stock here. The original intent of <txp:smd_thumbnail> was to be a drop-in replacement for <txp:thumbnail> hence it behaves the same way with regards width and height. Now we have responsive sites — something that didn’t really exist when the original core thumbnail tag was written — does it make sense for smd_thumbnail to deviate from the core with regards image sizing so you have to set fewer attributes for the majority of cases?

If so, how should it work? Omit width and height unless you explicitly say “put them in the tag”? Thus images will always appear at the size they are uploaded / created and will scale if CSS dictates?

I appreciate I’ll probably never be able to make every user happy with a default <img> tag (which is why I introduced container support so you could make your own if the default doesn’t suit) but I’d like to get to a stage where the default covers the majority of use cases in a logical manner. Ideas?

If it were me, by default I’d want just the required attributes to display unless specific attributes are entered in the tag

Eeek, that’s what it’s supposed to do. Introducing the container support fouled up my default <img> tag. I’ve fixed it now so the only attributes allowed in the tag are alt, title, class plus width and height. Subject to what comes out of the discussion of the above point regarding image sizes, the width and height may disappear by default.

Last edited by Bloke (2013-01-15 21:53:32)

jstubbs · 2013-01-16 01:09:48

I can see that users might want both scenarios when it comes to width and height – either no output at all for responsive sites or the actual width/height. Since its pretty easy to turn off width/height with width="0" and height="0" maybe it is better to leave it as-is.

Date/type/author – these should not be added to the tag unless explicitly placed in the tag IMO. I’m not sure if you took these attributes out in the latest beta version?

Bloke · 2013-01-16 09:25:59

jstubbs wrote:

maybe it is better to leave it as-is.

OK, please try again and see if it’s any better. I’ve ditched the made-up title. If there’s no caption there’s no title.

Pat64 · 2013-03-08 09:40:45

Hi Stef ;)

You’re looking for. Now you’ve got it:

#@language fr-fr
smd_thumb_actions => Actions
smd_thumb_all_sizes => Toutes les tailles
smd_thumb_all_thumbs => Créer
smd_thumb_batch_legend => Créer/Recréer des vignettes
smd_thumb_batch_preamble => Pour les profils actifs :
smd_thumb_btn_pnl => Profils
smd_thumb_btn_tools => Outils
smd_thumb_btn_tools_prefs => Outils/Préf.
smd_thumb_bySel => Sélectionnées
smd_thumb_byCat => Par catégorie
smd_thumb_byUsr => Par auteur
smd_thumb_byAll => Tous
smd_thumb_create => Création
smd_thumb_create_group_confirm => Créer les vignettes pour TOUS les profils existant ? Les précédentes vignettes seront écrasées.
smd_thumb_delete => Suppression
smd_thumb_delete_confirm => Voulez-vous vraiment supprimer le profil {name} ? Les vignettes de ce type seront TOUTES supprimées.
smd_thumb_image => Image=
smd_thumb_new => Nouveau profil
smd_thumb_prefs => Préférences 
smd_thumb_profile => Profil= 
smd_thumb_profile_deleted => Le profil "{name}" a été supprimé.
smd_thumb_profile_exists => Le profil "{name}" existe déjà.
smd_thumb_profile_heading => Profils de vignettes
smd_thumb_profile_preftool_heading => Outils et préférences du vignettage
smd_thumb_profile_tool_heading => Outils de vignettage
smd_thumb_quality => Qualité (%)
smd_thumb_sharpen => Rendre net
smd_thumb_tables_not_installed => Tables non installées : essayez de réinstaller le plugin.
smd_thumb_thumbnail_heading => Vignettes
smd_thumb_txp_auto_replace => Recréer les vignettes au téléchargement des images :
smd_thumb_txp_create => Créer
smd_thumb_txp_create_from => Créer les vignettes à partir de :
smd_thumb_txp_create_from_full => l'image originale
smd_thumb_txp_create_from_thumb => la vignette
smd_thumb_txp_default_sync =>
smd_thumb_txp_delete => Supprimer
smd_thumb_upload => Remplacer les vignettes sélectionnées

Bloke · 2013-03-08 09:43:11

Pat64 wrote:

You’re looking for. Now you’ve got it:

Brilliant, thanks. Beta download updated with the new Textpack strings built in.

Last edited by Bloke (2013-03-08 09:47:16)

jpdupont · 2013-03-08 09:49:40

Thanks Pat (and Stef !)

Pat64 · 2013-03-08 09:53:04

@Stef: that’s always a pleasure, man. Thanks lot for your(s) plugin(s) ;)

Last edited by Pat64 (2013-03-08 09:53:19)

RedFox · 2013-03-08 12:09:44

I’m investigating if I can use retina.js in combination of smd_thumbnail … !?

I’m using the plug-in already to make and insert a 480 × 300px ‘thumbnail’ in the body article.

The code (smd_macro):

<div id="slider" class="flexslider">
<txp:images id="{img_id}" wraptag="ul" break="li" class="slides">
<txp:smd_thumbnail type="{style}" />
</txp:images>
</div>

As far as I know I need a 960 × 600 as a high resolution image. So besides a type ‘main’ I need something like ‘main2’ for the retina images.

The problem is that the folder of ‘main2’ has another path. And retina.js is looking in ‘main’. This is true, not?

Are there people who have done this before? I need some help here.

BTW … there are many cons and pros to use or use not high resolution images already … would you think it’s really necessary if the images (jpg) are only 480 × 300px?

Last edited by RedFox (2013-03-08 12:52:49)

uli · 2013-03-08 15:54:52

RedFox wrote:

Are there people who have done this before? I need some help here.

I’ve not done this but late autumn had a look at the code of retina.js (beautified) to see whether I thought I could adapt this should I need to.

The essential spot in retina.js will be

n+"@2x."+r

And as you say, it needs to look in a different directory, plus we don’t have the (at)2x name extension. So, try to replace the above “code quote” with something like

"YOUR-RETINA-FOLDER-NAME/"+n+"."+r

and post your results. Edit: Note that I altered the replacement code.

(Whoa, when it comes to posting @ in code I rarely can retain an inclination for Textile.)

Last edited by uli (2013-03-08 16:10:07)

uli · 2013-03-12 14:41:40

Any tangible results, Joop?

Maybe you should add a ../ in front of YOUR-RETINA-FOLDER-NAME, in addition to my proposal, as you seem to have the sets of images in neighboured folders (main/main2).

Gocom · 2013-03-12 15:09:02

uli wrote:

Maybe you should add a ../ in front of YOUR-RETINA-FOLDER-NAME, in addition to my proposal, as you seem to have the sets of images in neighboured folders (main/main2).

It uses JavaScript to check whether the server responds with correct content-type to the image path. The paths, like any other link on a page are relative to the document location opposed to the working directory (the images). The path can be relative either to the page (like your normal image URLs), or if possible ideally absolute paths (from root) or full URLs.

The ../ component would work if images in question are on a page (requested from) at the first level sub-directory and the images directory is on the root, and the path isn’t an absolute.

As URLs go, you really shouldn’t use .. or . components in middle of them, only at the beginning. If you need to travel up, you will have to parse the URL and format a new one, or replace it.

If you want to alter the path retina.js looks into, you should/could modify the RetinaImagePath function in the original source code. It uses some very basic regular expressions, which you could alter to inject a new component to the URL or change the parent directory component’s name.

You can find the source repository on GitHub. The project doesn’t seem to use any crazy build scripts, so you should be able to compress/compile it with any tool of your choice after you have done edits.

Last edited by Gocom (2013-03-12 15:20:54)

jpdupont · 2013-03-12 16:23:05

I read the doc and the forum but I don’t find it …

Stef, is it possible to avoid the creation of thumbnails if the image is smaller than the thumbnail expected ?

uli · 2013-03-12 16:23:05

That’s revealing, Jukka, thanks.

Joop, I’m afraid I’ve to quit accompanying you here, I was refering to a different version of the script: the download (which is the older one), not the Git version, and there are significant differences between the two. I’d dare trying that locally but can’t advise you, sorry.

RedFox · 2013-03-12 20:16:45

It’s okay, Uli … I’m not in a hurry!

Textpattern CMS

Textpattern CMS support forum

#196 2013-01-15 00:41:24

Re: smd_thumbnail: manage multiple thumbnails of your images

#197 2013-01-15 21:52:39

Re: smd_thumbnail: manage multiple thumbnails of your images

#198 2013-01-16 01:09:48

Re: smd_thumbnail: manage multiple thumbnails of your images

#199 2013-01-16 09:25:59

Re: smd_thumbnail: manage multiple thumbnails of your images

#200 2013-03-08 09:40:45

Re: smd_thumbnail: manage multiple thumbnails of your images

#201 2013-03-08 09:43:11

Re: smd_thumbnail: manage multiple thumbnails of your images

#202 2013-03-08 09:49:40

Re: smd_thumbnail: manage multiple thumbnails of your images

#203 2013-03-08 09:53:04

Re: smd_thumbnail: manage multiple thumbnails of your images

#204 2013-03-08 12:09:44

Re: smd_thumbnail: manage multiple thumbnails of your images

#205 2013-03-08 15:54:52

Re: smd_thumbnail: manage multiple thumbnails of your images

#206 2013-03-12 14:41:40

Re: smd_thumbnail: manage multiple thumbnails of your images

#207 2013-03-12 15:09:02

Re: smd_thumbnail: manage multiple thumbnails of your images

#208 2013-03-12 16:23:05

Re: smd_thumbnail: manage multiple thumbnails of your images

#209 2013-03-12 16:23:05

Re: smd_thumbnail: manage multiple thumbnails of your images

#210 2013-03-12 20:16:45

Re: smd_thumbnail: manage multiple thumbnails of your images

Board footer