Een titelfoto op maat, door gebruikers aan te passen

Een board om T&T's te plaatsen m.b.t. CMSMS, PHP of Smarty

Moderator: velden

Locked
Guido
Forum Members
Forum Members
Posts: 221
Joined: Sat Aug 29, 2009 3:00 pm

Een titelfoto op maat, door gebruikers aan te passen

Post by Guido »

Ik ben bezig met een website die ik vaker wil kunnen gebruiken, zonder dat ik deze steeds voor een individueel geval hoef aan te passen. Nu kwam ik een probleem tegen:

Ik wilde (op de mobiele versie, maar op een desktop werkt dit hetzelfde) een titelfoto aan de pagina kunnen toevoegen met een bepaalde uitsnede. Als iemand zijn of haar eigen foto kan uploaden weet je echter nooit precies hoe groot deze uitgesneden moet worden en de afbeeldingseditor van CMSMS vind ik voor een doorsnee gebruiker niet erg makkelijk.

Ik heb het als volgt opgelost:
  1. Ik heb een file-upload veld aangemaakt in het sjabloon via de GBFilePicker. Dit ziet er in een sjabloon als volgt uit:

Code: Select all

{content_module block="Pagina_Titelfoto" assign="titelfoto" module="GBFilePicker" tab='Afbeeldingen' label='Kies een afbeelding als paginatitel. U kunt ook een nieuwe afbeelding uploaden.' media_type='image' mode='browser' dir='images/foto' show_subdirs='true' upload='true' create_dirs='true'}
Dit maakt in het admin-gedeelte van je pagina een tabblad met 'Afbeeldingen' aan en creëert een filepicker met upload mogelijkheden. Vervolgens wordt het resultaat van deze code (dus de lokatie van het bestand aan een variabele genaamd 'titelfoto' door gegeven.
  • Ik installeerde de module CustomGS en maakte hier twee dropdowns aan. Eén voor de uitsnede van de breedte en één voor de hoogte. Je kunt bijvoorbeeld in stappen van 100 pixels werken. Deze waarden geef ik in mijn sjabloon weer door aan variabelen.

Code: Select all

                {capture assign="breedte"}{$CustomGS.Breedte_titelfoto}{/capture}
                {capture assign="hoogte"}{$CustomGS.Hoogte_titelfoto}{/capture}
  • Via CGSmartImage maak ik een bestand aan met als bron de titelfoto, en als uitsnede de waarden die een gebruiker in CustomGS kan opgeven. Je zou overigens ook AdvancedContent of ECB kunnen gebruiken om dropdowns per pagina aan kunnen maken voor de breedte en hoogte van de uitsnede, maar voor een consistente look is dit beter.

Code: Select all

{capture assign="titelfotoMobiel"}{CGSmartImage src=$titelfoto filter_crop2size="$breedte,$hoogte,cl" noembed=1 notag=1}{/capture}
Ik gebruik {capture assign='variabele'} om het resultaat op te vangen. De eerder aangemaakte $breedte en $hoogte variabelen worden gebruikt voor de maten van de uitsnede. Via het filter 'crop2size' wordt een uitsnede gemaakt vanuit het midden op de horizontale as, en vanuit de linkerkant van de afbeelding via 'cl' optie van het 'crop2size' filter.

Ik wil het resultaat van CGSmartImage later weer in een <img> gaan gebruiken, dus ik voeg 'noembed' en 'notag' toe om alleen de lokatie van het bestand te krijgen.

Nu kan ik via

Code: Select all

<img src="titelfotoMobiel" width="100%"></img>
Een bestand krijgen dat uitgerekt wordt tot 100% van de breedte van het scherm, maar waarbij de gebruiker zelf kan bepalen welk gedeelte van de foto uitgesneden wordt.

Let op: als je de waarden uit CustomGS in een stylesheet gebruikt, vink dan bij de 'hoogte' en 'breedte' opties die je aanmaakt "stylesheet buffer legen na wijzigingen" aan. Anders heeft een verandering pas effect na het legen van de website buffer.
Guido
Forum Members
Forum Members
Posts: 221
Joined: Sat Aug 29, 2009 3:00 pm

Re: Een titelfoto op maat, door gebruikers aan te passen

Post by Guido »

Even een update: ik was nog steeds een beetje aan het zoeken naar verschillende afbeeldingseditor en zag dat iemand een koppeling naar de PIXLR editor had gemaakt voor CMSMS in de forge.

Redelijk geavanceerd, maar zeer mooi. Ik krijg het nog niet voor elkaar om lokaal te saven alleen. Geen foutmelding (wel een 'image saved' boodschap), maar nergens een nieuw bestand na bewerking.
HarmO
Power Poster
Power Poster
Posts: 251
Joined: Thu Jan 26, 2012 3:22 pm
Location: Belgium

Re: Een titelfoto op maat, door gebruikers aan te passen

Post by HarmO »

Leuk, ben zelf ook met zo'n template bezig.
en heb eigenlijk hetzelfde probleem.

Ik ga is zien of ik niet iets gelijkaardig kan toepassen.
Kind regards,
HarmO
Guido
Forum Members
Forum Members
Posts: 221
Joined: Sat Aug 29, 2009 3:00 pm

Re: Een titelfoto op maat, door gebruikers aan te passen

Post by Guido »

Top. Je zou zelfs nog een dropdown kunnen maken voor de verschillende uitgangspunten van het 'crop2size' filter. Je kan dan het laatste argument van dit filter (wat in bovenstaand voorbeeld als 'cl' oftewel ' center-left' staat voorgeprogrammeerd) door een gebruiker laten kiezen.

Zo kan iemand dus een grote foto uploaden en helemaal naar wens laten uitsnijden. Tegelijkertijd wordt de foto zo klein mogelijk gemaakt zodat de laadtijd optimaal blijft.
Locked

Return to “Tips en Trucs”