Een titelfoto op maat, door gebruikers aan te passen
Posted: Wed Nov 12, 2014 10:23 am
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:
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 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
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.
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:
- 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'}
- 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 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>
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.