Template of UDT?

[Gregor]

Onder een blog artikel plaats ik nogal eens een link naar de bijbehorende foto's. Nu wil ik daar 1 foto met wat illustratieve tekst laten zien en heb o.b.v. het code voorbeeld can Calguy in CGSI de volgende template gemaakt:

Code: Select all

{assign var='files' value='uploads/images/Gallery/Winter1617/Lummelbeslag/*.jpg'|glob}
{if count($files)}
   <div class="floatbox_left floatbox" data-fb-options="doSlideshow:true group:demo2 caption:href">
   <a href="uploads/images/Gallery/Winter1617/Lummelbeslag/Lummelbeslag - 01.jpg">{CGSmartImage src="uploads/images/Gallery/Winter1617/Lummelbeslag/Lummelbeslag - 01.jpg" width="150"}</a>
   {foreach from=$files item='file' }
      {if !$file|contains:"thumb_"}
         <a href="{CGSmartImage src=$file notag=1 noembed=1}"></a>
      {/if}
   {/foreach}
   </div>
{/if}

In de basis werkt dit, echter waar nu harde verwijzingen staan wil ik parameters gaan gebruiken. Doe ik dit dan verstandiger in een template of een UDT? In deze laatste weet ik hoe een parameter door te geven. Bij een template ben ik daar nog niet achter en zou een voorbeeld helpen

[velden]

'parameters' doorgeven aan een template doe je typisch met een Content block (voor page templates) en (extra) Field Definitions (voor modules).

Maar in dit geval zou je zeker een de Gallery tag moeten gebruiken. Tenminste het lijkt erop dat de afbeeldingen in de Gallery module staan.

Dus maak een Field Definitions in CGBlogs voor de Gallery directory.

En in je CGBlog template doe je dan iets als

Code: Select all

...
{Gallery dir=$item->fields.fieldname.value template=MyGalleryTemplateForBlogs...}
...

De code hierboven is een voorbeeld zal vast iets anders zijn maar je snapt het idee denk ik wel.

Dan in het blog artikel vul je (handmatig) de directory in die Gallery nodig heeft voor de dir parameter. Denk zoiets als 'Gallery/Winter1617/Lummelbeslag' (Dat kun je in het overzicht van galleries zien.

Uiteraard zorg je ervoor dat het template 'MyGalleryTemplateForBlogs' (andere naam mag ook ) de output geeft zoals jij die in je voorbeeld aanhaalde.

[Gregor]

Dank je Velden.

Idee is dat er een foto wordt getoond en niet via Gallery de hele set van foto's die in de bewuste folder staan; daarmee wordt de laadtijd van de pagina veel te lang. CGSI lijkt de mogelijkheid te hebben dit op zo'n manier te doen dat de foto's wel onderwater ofzo beschikbaar komen. Klikt de bezoeker op de foto, dan krijg je via de class 'floatbox' die foto's te zien die bij het bewuste artikel horen. Een voorbeeldje vind je hier, de eerste van de drie verticale foto's: https://www.uisge-beatha.eu/test.html Allerlei opleukende tekst enzo zijn daar nog weggelaten, was puur om te zien of ik de template werkend zou krijgen.

[velden]

Het is belangrijk om te beseffen wat CMSMS voor je kan doen (server-side) en wat de browser/javascript doet (client-side).

CMSMS zorgt uiteindelijk voor html en jij/de browser bepaalt wat er mee gebeurt. Als je een één <img> tag 'output' en de rest van de afbeeldingen op een andere manier dan gebeurt er hetzelfde als in jouw voorbeeld.

CGSI zorgt voor het verkleinen/aanpassen van de afbeeldingen. Dat staat er min of meer los van. Een extraatje dat CGSI biedt is dat het afbeeldingen kan aanbieden in een grootte die afhankelijk is van de grootte van het beeldscherm van de bezoeker.

[Gregor]

Ik overzie nog niet hoe ik de Gallery template zo kan maken dat ik 1 foto te zien krijgen en als die wordt aangeklikt er een slideshow ontstaat.

Uit de manual haal ik dat {$Gallerydir} de folder zou moeten geven. Echter als mijn aanroep is:

Code: Select all

{Gallery dir='Winter1617/Lummelbeslag' template='Gallery4CGBlog'}

dan laat {$gallerydir} als verwacht alleen "Lummelbeslag" zien (= een subfolder). Wat nu als ik 'Winter1617/Lummelbeslag' zou willen zien?

[velden]

Ik overzie nog niet hoe ik de Gallery template zo kan maken dat ik 1 foto te zien krijgen en als die wordt aangeklikt er een slideshow ontstaat.

Dat kun je misschien het beste zien door een voorbeeld template van Gallery te bekijken en testen.

Aan de voorkant is het normaal gesproken wat Javascript dat er voor zorgt dat de slideshow mogelijk is. De documentatie die behoort bij dat stukje javascript beschrijft welke html ervoor nodig is.
Je Gallery template bouw je dan zo dat die voor de juiste html zorgt. Tevens kun je in Gallery in het template ook de benodigde Javascript en zelfs CSS meegeven.

Bekijk en test eens de voorbeeld templates die met Gallery meekomen. Je kunt er ook nog andere templates voor downloaden en importeren zelfs

[Gregor]

Gallery is werkend op mijn site met floatbox en nog wat toevoegingen Dit is een

De templates bij Gallery heb ik inderdaad doorgelezen.

Het "probleem" zit 'm daarin dat ik niet altijd online ben bij het maken / toevoegen van content, dus ik kan aan Gallery wel de dir-parameter doorgeven, heb nl. zelf de folder met images er naartoe geladen, maar bijv. een nummer meegeven aan de img-parameter is nagenoeg niet te doen omdat ik die alleen online kan zien en dus voor het schrijven bedacht moet hebben welke foto dat wordt. Daar komt ook de initiële vraag vandaan of ik die code in een UDT of template zou moeten zetten; dan kan ik nl. allemaal offline klaar maken en dan bij online zijn hoef ik in cgblog alleen nog maar de tekst via copy/paste erin te zetten en ben ik klaar.

Als er een werkwijze is die simpeler is, dan ben ik daar zeker benieuwd naar. Wat ik nu uit Gallery begrijp, is dat ik veel voorinformatie moet hebben om uiteindelijk 1 foto met wat tekst onderaan het artikel weer te geven waarna de gebruiker bij het klikken op die foto, een slideshow te zien krijgt.

[velden]

Even voor de duidelijkheid: per blog artikel wil je één foto tonen?
En als er op die foto wordt geklikt worden de overige foto's (op wat voor manier dan ook) getoond.

Per blog artikel maak je één Gallery (directory) aan?

Als ik het zo goed zeg dan zou je gebruik kunnen maken van de functionaliteit van Gallery waarbij je een foto (per Gallery) als 'cover-foto' kunt selecteren. Dat zou dan de foto worden die je toont op de pagina. Je hoeft dan geen gebruik te maken van de img parameter.

[Gregor]

Zoals je je het in de eerste alinea beschrijft, is het idd. Ter illustratie zie de volgende link https://www.uisge-beatha.eu/2017/04/Lew ... ement.html Onder het artikel staat:

In het fotoalbum is een fotoverslag te vinden: Lewmar ramen vervangen.

Dit laatste zou ik door een foto willen vervangen waar dan op kan worden geklikt en er, net als bij de foto's in het artikel, een popup komt met de class 'floatbox' en waarin dan een slideshow kan worden getoond met alle foto's die in die betreffende folder zitten. Hoe dat in Floatbox werkt staat in de eerste post, mocht je dat willen terugzien.

Een blogartikel kan uit foto's van meerdere Gallery subfolders bestaan. Het komt vaker voor dat meerdere artikelen foto's uit dezelfde subfolder hebben. Bijv. aan de schroef zijn er twee verschillende dingen gedaan, deze beschrijf ik in twee artikelen, maar de foto's komen uit een en dezelfde subfolder. Dat die in eenzelfde slideshow worden getoond, dat is voor ok. Het tonen van de foto per Gallery is prima.

Ik heb ook zitten denken om de Facebook-foto te gebruiken; in het cgblog-artikel heb ik een "field definition" gemaakt waarmee ik een foto kan selecteren die dan als og:image gebruikt wordt bij het plaatsen van het artikel op FB. Dit idee is verder niet uitgewerkt omdat ik al langer artikelen schrijf dan ik "lid" ben van FB en er dus veel cgblog-artikelen nog zonder FB-image zijn (ruim 200.....)

Structuur van de folder is:

uploads/images/Gallery/
- Winter1617
--- Kompas vullen
--- Lummelbeslag
--- etc.
- Zomer2016
--- Vakantie 2016
--- Dek schilderen
--- Boot dopen
--- etc.
- etc.

[Rinker]

Gallery module heeft ook een optie om 1 foto te laten zien, je moet dan wel de id weten van de foto,

Code: Select all

{Gallery img='12'}

.

Het is handig om dan bij de News of Blog module een extra veld toe te voegen waarbij om het Gallery ID wordt gevraagd.

Deze lees je dan uit in je template.

Ook kun je een in Gallery een simpel template maken voor de enkele foto en daarbij de grootte instellen die gewenst is, deze template kun je dan toevoegen aan je Gallery module aanroep.

[Gregor]

Probeer via een template de foto's te laten zien die bij een artikel horen. Via het aanroepen van de template met de bijbehorende parameters.

De aanroep is:

Code: Select all

{global_content name='fotoalbum' album='Winter1617/Kajuitramen' foto='Kajuitramen - 01'}

De template ziet er als volgt uit:

Code: Select all

{assign var='files' value='uploads/images/Gallery/{$gcb_params.album}/*.jpg'|glob}
{if count($files)}
   <div class="floatbox" data-fb-options="doSlideshow:true group:cgblog caption:href">
   <a href="uploads/images/Gallery/{$gcb_params.album}/{$gcb_params.foto}.jpg">{CGSmartImage src="uploads/images/Gallery/{$gcb_params.album}/{$gcb_params.foto}.jpg" width="150"}</a>
   {foreach from=$files item='file'}
      {if !$file|contains:"thumb_"}
         <a href="{CGSmartImage src=$file notag=1 noembed=1}"></a>
      {/if}
   {/foreach}
   </div>
{/if}

Bovenstaande code laat geen foto zien; het eerste if-statement wordt als false gezien. Ik heb de parameters laten weergeven en die kloppen.

Als ik de template aanroep met de waarden direct ingevuld, dan werkt het wel, het eerste if-statement is true. De code is:

Code: Select all

{assign var='files' value='uploads/images/Gallery/Winter1617/Kajuitramen/*.jpg'|glob}
{if count($files)}
   <div class="floatbox_left floatbox" data-fb-options="doSlideshow:true group:cgblog caption:href">
   <a href="uploads/images/Gallery/Winter1617/Kajuitramen/Kajuitramen - 01.jpg">{CGSmartImage src="uploads/images/Gallery/Winter1617/Kajuitramen/Kajuitramen - 01.jpg" width="150"}</a>
   {foreach from=$files item='file'}
      {if !$file|contains:"thumb_"}
         <a href="{CGSmartImage src=$file notag=1 noembed=1}"></a>
      {/if}
   {/foreach}
   </div>
{/if}

Iemand die mij wil uitleggen waarom de eerste code niet werkt?

[velden]

Waarschijnlijk moet je dubbele quotes gebruiken:

Code: Select all

{assign var='files' value="uploads/images/Gallery/{$gcb_params.album}/*.jpg"|glob}

[Gregor]

Dat is inderdaad de oplossing

Waarom zijn er dan dubbele quotes nodig als er een variabele in de string zit?

[velden]

http://php.net/manual/en/language.types.string.php

[Gregor]

Dank je voor de link.