header2

2017 01 10 JUG071

Foto's op een Joomla website

In Joomla 4 komt een geheel nieuwe media manager, is ons beloofd. Tot die tijd, nu eind 2017, moeten we het doen wat er nu is.

Net als veel anderen voeg ik JCE Editor Pro als eerste extensie toe aan elke website die ik beheer. JCE Editor Pro kost wel iets maar je krijgt er veel voor terug. Heb je JCE PRO toegevoegd dan beheer je in de backend je afbeeldingen op je website niet meer via 'Media' onder 'Inhoud' maar onder 'JCE Editor PRO-File Browser' onder 'Componenten'. Niet alleen is het beheer van de folders nu veel eenvoudiger maar ook het uploaden en bewerken van foto's biedt veel meer mogelijkheden.

Een foto met een pop-up?

Meet&GreetStap 1 is het plaatsten van een foto in een artikel. Stap 2 is het linken van de foto aan het origineel om een pop-up te krijgen. Het lukt niet meteen. Dus check ik of de plug-ins wel goed staan. Dit blijkt niet het geval te zijn. In de instellingen van JCE moet nog 'JCE Mediabox Popups' worden aangezet. (Componenten->JCE->Profile->Editor Profiles->Pluginparameters->Links).

Het is even zoeken wat je wel en niet moet aanzetten. Zo had ik de auto-popup aangezet met als gevolg dat de foto direct 'popte' zodra het menu item Ledenhonk werd aangeklikt. Die instelling moet dus op uit staan.

De foto die tevoorschijn komt, is ook niet erg fraai, klein en niet scherp. Kan dat beter? Ja, dat kan alleen als de link naar de foto een tweede versie van die foto is die groter is. Wat de popup nu laat zien is de maximale grootte van de foto die is geüpload.

 Een foto met meerdere pop-up foto's?

Wat is er mooier dan één foto? Een hele serie foto's, een fotogalerij. Dat kan met aparte extensies maar in JCE is het ook mogelijk. Bij het uploaden van de foto's heb ik 'resize' op 640x480 gezet. De afbeelding in dit artikel heb ik verkleind naar 200x150. Vervolgens maak ik van deze foto een galerij door de eerste foto te linken aan alle drie foto's in het mapje 'huisdieren'. Bij de pop-up de instelling moeten alle drie foto's  dezelfde naam hebben in het venster 'groep'. Bij 'Links' moet bij de hoofdfoto worden aangezet: Hide popup links: no'. De andere foto's moeten bij 'Link' onder "hide popup links: yes'. Een beetje contra-intuïtief dus.

Tintin2 Tintin1ratNog steeds vind ik de foto's niet erg mooi. En het kadertje rond de pop-ups is een beetje knullig, een beetje zoals de vakantie-kiekjes van vroeger. Met flink ingrijpen in de css-code zal wel van alles naar eigen hand te zetten zijn maar dat willen we nu even niet.

Het artikel moet je alle plaatjes zetten, vervolgens bewerken en daarna nog eens de juiste link maken: bewerkelijk.

Tot nog toe zijn alle foto's die hier zijn getoond, gemaakt met een mobiele telefoon. Die heeft natuurlijk zo z'n beperkingen waardoor de foto's wellicht niet ècht heel scherp zijn.

Een mooie grote foto in een mooie pop-up?

Wat nu als je een mooie grote foto uploadt, deze niet cropt (verkleint) bij het plaatsen in de JCE Image Manager Extended maar er eerst een Thumbnail van maakt. Vervolgens wordt de hele foto ge-upload en daarvan worden pop-ups gemaakt. Grote foto's uploaden werkt alleen als in 'Profile' de upload grootte is aangepast.

Hierbij het resultaat van dezelfde tumbnail met dezelfde foto in twee verschillende grootten. Zoek de verschillen!

 bootje tumbnailbootje tumbnail

 

 

 

Als je even kijkt dan zie je dat bootje 1 toch wel wat scherper is. Maar ja, wel meer dan 3 keer zo groot dan bootje 2. Op de mobiele telefoon is het verschil echt niet te zien. Ook in het laden zit nauwelijks verschil.

Het witte kadertje lijkt toch wel heel erg op kiekjes uit een oud familiealbum. Schattig maar ook wat knullig en onprofessioneel. Om meer mogelijkheden te hebben en de foto's beter te presenteren zijn andere extensies beschikbaar, bijvoorbeeld extensies die foto's presenteren in een 'dia show', een 'slide show'.

Beeld optimaliseren!

(onderstaande naderhand toegevoegd door Wim)
De grote foto van de boot is 2,8 MB zwaar, de kleinere 859 kB.
De suggestie is dat die kleine 1200 px breed is, maar beide afbeeldingen zijn geschaald naar 1040 px.
Hoe of met welk programma is de grote foto verkleind naar 1200 px, Wouter?
Ik heb de grote foto (4032 px breed) gedownload, en simpel verkleind naar 1040 px met het Mac-programma Preview/Voorvertoning. Dan is-ie slechts 352 kB zwaar; dat is 59% lichter.
Als ik die afbeelding ook nog eens laat verkleinen door tinypng.com, dan wordt ie slechts 188 kB zwaar; dan scheelt in totaal 88%.

Een eerlijker vergelijking is misschien om de foto te verkleinen niet naar 1040 maar naar 1200 px. Dat wordt ie met Voorvertoning 459 kB zwaar, toch nog een vermindering met 47,5%. Tinypng verkleint het nóg eens met 56% naar 201,7 kB; een totale verkleining dus met 76,5%
Zoek de verschillen! (maar verdoe je tijd niet daarmee)


Dag Wim,

Ik doe alles met JCE PRO. Dat kan ook verkleinen, croppen, bijsnijden en nog wat meer. Ietwat onhandig want je moet soms even uit het programma voordat de wijzigingen worden doorgevoerd. De (dure) plugin van PWT (Perfect Web Team: Sander en zijn trawanten) kan veel meer. Maar in Joomla 4 dat er nu aan komt, kan nog veel meer. Met Joomla 4 komt Joomla straks langszij WP wat beeldbewerking betreft. Het wordt tijd. WP is veel gelikter maar ook ietwat chaotisch (en instabieler) wat ik begrijp.

Wat je schrijft over het verkleinen, klopt helemaal. Mijn punt is dit: het blijft handwerk om te zoeken naar de juiste balans tussen de grootte van het bestand en de scherpte ervan. Met foto's met weinig scherptediepte zoals in het voorbeeld van de bootjes, komt het niet zo nauw. Wil je echte messcherpe precisiefoto's dan komt het er zeer op aan.

Leuke discussie: wordt vervolgd!