• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 4 posts ] 
Author Message
 Post subject: Een titelfoto op maat, door gebruikers aan te passen
PostPosted: Wed Nov 12, 2014 10:23 am 
Offline
Forum Members
Forum Members

Joined: Sat Aug 29, 2009 3:00 pm
Posts: 221
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:
{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.

  1. 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:
                {capture assign="breedte"}{$CustomGS.Breedte_titelfoto}{/capture}
                {capture assign="hoogte"}{$CustomGS.Hoogte_titelfoto}{/capture}

  1. 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:
{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:
<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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Een titelfoto op maat, door gebruikers aan te passen
PostPosted: Wed Nov 12, 2014 11:07 am 
Offline
Forum Members
Forum Members

Joined: Sat Aug 29, 2009 3:00 pm
Posts: 221
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Een titelfoto op maat, door gebruikers aan te passen
PostPosted: Wed Nov 12, 2014 3:18 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Thu Jan 26, 2012 3:22 pm
Posts: 235
Location: Belgium
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Een titelfoto op maat, door gebruikers aan te passen
PostPosted: Wed Nov 12, 2014 4:42 pm 
Offline
Forum Members
Forum Members

Joined: Sat Aug 29, 2009 3:00 pm
Posts: 221
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 4 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
HostPapa CMS Made Simple hosting