Aanroepen Global Conent Block vanuit UDT

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Locked
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Aanroepen Global Conent Block vanuit UDT

Post by Gregor »

Voor het tonen van foto's in een cgblog-artikel gebruik ik de udt 'foto'. Nu zou ik social media buttons onder de foto willen toevoegen. Deze social media buttons zijn afzonderlijke GCB's. In de cmsms documentatie vond ik:
$foo = 'footer';
$bar = $smarty->fetch('globalcontent:'.$foo);
$bar;
Zet ik dit over om in de UDt te gebruiken, dan ziet dat er als volgt uit:

Code: Select all

$foo = 'sharePinterest';
$bar = $smarty->fetch('globalcontent:'.$foo);
echo("<div class=\"floatbox_$side floatbox\" data-fb-options=\"group:cgblog-1\">");
$bar;
echo("<a href=\"$image_no_space\"> $image</a>");
     if ($title) {
          echo("<span class=\"cgblog_image_title\">$title</span>");
     }
     echo("<span class=\"cgblog_image_c2e\">(klik voor grote foto)</span>");
echo("</div><p>");
Dit geeft een foutmelding: 'Unknown resource type 'globalcontent''.

Wat is wel de juiste wijze om een GCB vanuit een UDT aan te roepen?
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: Aanroepen Global Conent Block vanuit UDT

Post by Rolf »

Er zou nu cms_template moeten staan. GCB's bestaan niet meer in 2.x...
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Aanroepen Global Conent Block vanuit UDT

Post by Gregor »

Rolf wrote:Er zou nu cms_template moeten staan. GCB's bestaan niet meer in 2.x...
Die doet het wel :)
Zou jij dit in de documentatie willen aanpassen Rolf?
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: Aanroepen Global Conent Block vanuit UDT

Post by Rolf »

Op welke pagina?
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
deactivated010521

Re: Aanroepen Global Conent Block vanuit UDT

Post by deactivated010521 »

Weet niet precies hoe de hele implementatie eruit ziet maar misschien heb je helemaal geen UDT nodig. Je kunt ook variabelen doorgeven aan een template. UDT is vooral geschikt voor het ophalen en bewerken van data. Niet dat ik nooit opmaak in een UDT gooi maar ik probeer dit wel zoveel mogelijk te beperken.

https://www.smarty.net/docsv2/en/tips.passing.vars.tpl

Code: Select all

== aanroep ==

{include file='cms_template:generic_test' foo='foofoo'}
{include file='cms_template:generic_test' foo='foo'}

== generic_test template ==

<pre>{$foo}</pre>
edit 1) Werkt ook voor Smarty 3 maar daar kon ik 123 geen documentatie over vinden.

edit 2) Werkt ook met objecten en array. {$foo->varOne}, {$foo.varTwo} || {$foo[0]} etc..

edit 3) Goede toepassing hiervan is vlgns mij ook het omzeilen van scope problemen. In een local scope geef je variabele door. In de template/output zet je alles binnen een {capture name='bar'}output{/capture} deze maak je daarna weer global {$bar=$bar scope=global} wellicht niet heel transparant ;)
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Aanroepen Global Conent Block vanuit UDT

Post by Gregor »

User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: Aanroepen Global Conent Block vanuit UDT

Post by Rolf »

Gedaan. Bedankt!
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Aanroepen Global Conent Block vanuit UDT

Post by Gregor »

De gedachte van Arnoud volgend, dan is mijn foto-udt "oneigelijk" gebruik van een UDT. De code van de foto-udt is:

Code: Select all

// Settings
// {foto file="folder/fotonaam.jpg" title="title" side="right | left"}
// Een voorbeeld:
// {foto file="Gallery/Zomer2015/Vakantie 2015/Vakantie 2015 - 52.jpg" title="Helemaal rond" side="left"}
//
// Defaults parameters
//
$mod = cms_utils::get_module('CGSmartImage'); // make sure the module is loaded
$image_heigth = 170;
$large_size = 640;
$path = 'uploads/images/';
// $path = isset($params['file']) ? $params['file'] : 'uploads/images';
$noremote = 'noremote=""';
$noembed = 'noembed=""';
$action = 'responsive';
// $alt = 'alt=""';
$notag = 'notag=0';
$cgblog_id = 0;

// Get Params
//
$image_width = isset($params['width']) ? $params['width'] : '120';
$file = isset($params['file']) ? $params['file'] : '';
// echo 'file = ' . $file;
$title = isset($params['title']) ? $params['title'] : 'Uisge Beatha';
// $title = $params['title'];
$alt = isset($params['title']) ? $params['title'] : 'alt="Uisge Beatha"';
// $alt = $params['title'];
$side = isset($params['side']) ? $params['side'] : 'left';
// echo 'side = ' .  $side;
// $cgblog_id = 3;
// $params['cgblog_id'];
$path_no_spaces = str_replace(' ', '%20', $path);
$pathfile = $path_no_spaces . $params['file'];
$image_no_space = str_replace(' ', '%20', $pathfile);
//
// build an array of params, same as the tag accepts
//
$params['src'] = $pathfile;
$params['width'] = $image_width;
$params['height'] = $image_heigth;
$params['action'] = $action;
$params['alt'] = $alt;
// $params['notag'] = $notag;
// $params['noremote'] = $noremote;
// $params['noembed'] = $noembed;
//
$outp = cgsi_utils::process_image($params);
$image = $outp['output'];
//
echo("<div class=\"floatbox_$side floatbox\" data-fb-options=\"group:cgblog-1\">");
// echo("$bar");
     echo("<a class=\"floatbox\" href=\"$image_no_space\"> $image</a>");
     if ($title) {
          echo("<span class=\"cgblog_image_title\">$title</span>");
     }
     echo("<span class=\"cgblog_image_c2e\">(klik voor grote foto)</span>");
echo("</div><p>");
Het omzetten naar een template zal te doen zijn. Beetje opletten bij het aanpassen van de database. Het aanroepen van een template vanuit een template zal eenvoudiger zijn dan vanuit een udt. Om de template voor de social media knoppen aan de foto-udt toe te voegen, daar moet ik de udt voor verbouwen.
deactivated010521

Re: Aanroepen Global Conent Block vanuit UDT

Post by deactivated010521 »

Als ik je code zo vluchtig bekijk: lees je verschillende (foto) variabelen uit en en kent een default toe wanneer er een ontbreekt. Daarna schaal je de afbeelding en gooit er wat opmaak omheen voor een JavaScript floatbox.

Dit is wel iets wat wel in een UDT thuishoort.

Na het schrijven van mijn bovenstaande opmerking lees ik zojuist:

https://docs.cmsmadesimple.org/tags/use ... ting-a-udt

Daar geven ze nog een tip die hetzelfde suggereert:

Return data, don't render data.
Smarty is perfectly suited to rendering data. Whereas creating complex layouts within a simple text area is clumsy at best. It is best to restrict your UDT's to gathering and returning data to smarty rather than formatting it. This also allows your user defined tags to be re-used in numerous places whilst leaving the styling and rendering of the data to the display level.

Mocht je ooit deze UDT dupliceren omdat je ander opmaak nodig hebt dan zal het onder "oneigenlijk gebruik" vallen. Als dit voor je hele website precies doet wat het moet doen dan zou ik het lekker zo laten.

Wil je de omaak scheiden van UDT code dan kan je in de Smarty display functie duiken: $smarty->display('your_markup_file');

https://www.smarty.net/docsv2/en/api.display.tpl

Omdat je zelf de auteur en ontwikkelaar van de website bent zal een extra udt toevoegen geen probleem zijn. Voor de gemiddelde CMSMS redacteur, kan dit wel wat lastig zijn. Maar dan is er altijd nog iets te verzinnen met het filteren van de <img> tag ingegeven door MicroTiny.


Ik ga binnenkort ook iets doen met het schalen van een afbeelding in verschillende formaten en "bijzondere" opmaak al dan niet via een afzonderlijke template. Voor de toepassing van responsive images. Jouw CGSmartImage aanroep vanuit een UDT daar kan ik dan wel wat mee. Tzt komt daar wel een voorbeeldje van.

In alleen CGSmartyImage en met het toekennen van variabelen kan je ver komen maar voor herhalende opmaak wil je dit niet iedere keer helemaal uitschrijven.

De toepassing die ik in gedachte heb:

https://responsiveimages.org

Als:

Code: Select all

{picture_element src='/images/iamresponsive.jpg', sizes='320, 640, 1024' breakpoints='x,y,z'}

Code: Select all

<picture>
  <source media="(min-width: 40em)"
    srcset="big.jpg 1x, big-hd.jpg 2x">
  <source 
    srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Aanroepen Global Conent Block vanuit UDT

Post by Gregor »

Zonder de code al teveel geweld aan te doen kan de foto-udt dus in gebruik blijven :)

De oplossing blijkt daarmee simpeler dan gedacht. In Floatbox is het mogelijk een "caption" toe te voegen die naar een id verwijst, dus:

Code: Select all

<div class="social_share" id="socialmediashare1">
  <div class="btn_facebook" id="facebook1">
     {include file='cms_template:shareFacebook'}
  </div>
  <div class="btn_twitter" id="twitter1">
     {include file='cms_template:shareTwitter'}
  </div>
  <div class="btn_googleplus" id="googleplus1">
     {include file='cms_template:shareGooglePlus'}
  </div>
  <div class="btn_pinterest" id="pinterest1">
     {include file='cms_template:sharePinterest'}
  </div>
</div>
En dan in de foto-udt:

Code: Select all

echo("<div class=\"floatbox_$side floatbox\" data-fb-options=\"group:cgblog-1 header:#socialmediashare1\">");
     echo("<a class=\"floatbox\" href=\"$image_no_space\"> $image</a>");
     if ($title) {
          echo("<span class=\"cgblog_image_title\">$title</span>");
          // echo("$bar");
     }
     echo("<span class=\"cgblog_image_c2e\">(klik voor grote foto)</span>");
echo("</div><p>");
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Aanroepen Global Conent Block vanuit UDT

Post by Gregor »

arnoud wrote:Ik ga binnenkort ook iets doen met het schalen van een afbeelding in verschillende formaten en "bijzondere" opmaak al dan niet via een afzonderlijke template. Voor de toepassing van responsive images. Jouw CGSmartImage aanroep vanuit een UDT daar kan ik dan wel wat mee. Tzt komt daar wel een voorbeeldje van.

In alleen CGSmartyImage en met het toekennen van variabelen kan je ver komen maar voor herhalende opmaak wil je dit niet iedere keer helemaal uitschrijven.

De toepassing die ik in gedachte heb:

https://responsiveimages.org

Als:

Code: Select all

{picture_element src='/images/iamresponsive.jpg', sizes='320, 640, 1024' breakpoints='x,y,z'}

Code: Select all

<picture>
  <source media="(min-width: 40em)"
    srcset="big.jpg 1x, big-hd.jpg 2x">
  <source 
    srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>
Als ik een artikel van mijn site op de iPhone bekijk en ik open een foto, dan komt deze er netjes in resize uit (alleen de SM-buttons staan er niet netjes boven). Het lijkt erop dat CGsmartimage het resizen netjes voor zijn rekening neemt. Dekt dit dan ook het idee dat je hebt en via responsiveimages.org laat zien?

Wat ik lastig vind, is om iets te maken en dan kan ik wel via firebug op een hd-scherm controleren en zonodig de css aanpassen, maar voor een tablet en telefoon zou ik daar ook wel een oplossing voor willen. Hoe doen de ontwikkelaars dat die dit voor hun werk doen?
deactivated010521

Re: Aanroepen Global Conent Block vanuit UDT

Post by deactivated010521 »

Responsive Images:

CGSmartImage heeft een Responsive Image oplossing die bij het inladen van de website een cookie plaatst met informatie over het schermformaat oid. Afhankelijk van deze cookie kan een afbeelding op een bepaald formaat geschaald worden. Als je tijdens het testen het schermformaat wijzigd moet je deze cookie verwijderen en een reload doen.

Het <picture> element laat het tonen van de juiste afbeelding aan de browser over. Feitelijk komt het erop neer dat je voor ieder schermformaat een afbeelding klaar zet. Smalscherm kleine afbeelding, breedscherm grote afbeelding.

Beide oplossingen zorgen ervoor dat er niet een hele grote plaat ingeladen hoeft te worden, die je vervolgens maar op een klein percentage toond. (Schalen in procenten is iets anders dan de werkelijke afmeetingen van een afbeelding aanpassen minder kb's).

<picture> is een nieuwe standaard voor <img>

Debugging:

FireFox heeft een mooie Responsive Design Mode (CTRL+Shift+m) hiermee kan je een website in verschillende formaten bekijken.

- Voor hele specifieke JavaScript problemen (die alleen op een mobiel apparaat of tablet voorkomen) zou je FireBug Lite kunnen proberen. Door tijdens het testen een script toe te voegen <__script__ src=> kan je zien of er error's in de console verschijnen.

- Ook zal je nog een mobiel apparaat kunnen emuleren. Zowel Android als IOS hebben developer kits. Voor de laatste heb je wel een Mac nodig.

- Dan heb je ook nog Browsersync http://browsersync.io Hiermee kan je op je desktop testen en worden all interacties gescynchroniseerd naar apparaten die de (development)website open hebben staan. Scoll je naar beneden dan zie je dit ook gebeuren op je mobieltje of tablet.

Dit werkt erg fijn voor een lokale development omgeving. Je moet CMSMS dan wel zodanig configuren dat deze via een ipadres (lokaal net werk) op je mobieltje te openen is. Ook dien er een script toegevoegd te worden.

- Voor het testen van verschillende breakpoints maak ik ook nog gebruik van een $debug switch. Deze zorgt ervoor dat er tijdens het testen aan de bovenkant van de webpagina een gekleurde balk verschijnt met de naam van het breakpoint. Ik doe dit in Sass maar zoiets zou ook kunnen in cms_stylesheet [[$xdebug-mq=true]] kunnen. Heb voor breakpoint testing ook wel eens plugins en andere scripten gezien zoals: http://breakpointtester.com/



** Tijdens het testen van breakpoints een gekleurde balk en de naam van de breakpoint op het scherm tonen:**

Code: Select all


  @media all {

    body {
      &::before {

        @if ($xdebug-mq == 1) {
          display: block;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          padding: .6em;
          font-weight: 900;
          text-align: center;
          z-index: 2000;
          opacity: .3;
        }

      }
    }


@media (min-width: 20em) and (max-width: 29.9em) {
  .mq-at-s {
    background-color: #c2af41;
    font-size: 11px;
    color: #3d50be; 
  }
    .mq-at-s::before {
      content: "at s"; 
      background-color: #999999;
    } 
}
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Aanroepen Global Conent Block vanuit UDT

Post by Gregor »

Je tip voor het gebruik van FF om de site op een ander device heeft geholpen om een css-"probleempje" te vinden en op te lossen. Dank.

Om voor elke schermgrootte een afbeelding neer te zetten, betekent nogal wat. Ik denk bijv. aan een workflow om meerdere afbeeldingen in verschillende grootte te maken, meer schijfruimte nodig, anders gaan denken over hoe dit te programmeren, om maar eens wat te noemen. Ga je als ontwikkelaar al je gebouwde sites bijv. aanpassen?
deactivated010521

Re: Aanroepen Global Conent Block vanuit UDT

Post by deactivated010521 »

Mooi dat FireFox responsive design mode bruikbaar is.

Als developer probeer ik nieuwe ontwikkelingen in de gaten te houden. Het is niet zo dat ik alle nieuwigheden direct implementeer maar herzie wel regelmatig mijn websites en technieken. Stukje bij beetje per aandachtsgebied.

Het is een beetje balanceren: Hoe is de browser support, adoptie, wordt de techniek veel toegepast. Ook is het van belang om te weten wat een nieuwe techniek doet. (progressive enhancement: / uitbreiding voor nieuwe browser / fallback of simpele weergave voor niet ondersteunende browsers). Is er een polyfill of implementatie die een nieuwe techniek mogelijk maken en na verloop van tijd weggehaald kan worden.... etc...

Je vasthouden aan iets oudere browsers en vertrouwde techieken is ook helemaal geen probleem.

Zelf ben ik wel wat rigoreuzer of noem het ongeduldig. Ik steek graag energie in de toekomst en heb minder aandacht voor voor het oude.

** Picture Element **

Het invoeren van verschillende afbeeldingen is geen doen. Voor afbeeldingen die uit een module of template komen is het wel uitstekend toe te passen en te automatiseren. Dit staat dan ook op mijn TODO lijst. Schrijfruimte is over het algemeen niet zo'n probleem maar hoe meer afbeeldingen hoe meer ruimte je natuurlijk nodig hebt.

picturelement heeft best aardige ondersteuning: http://caniuse.com/#search=picture

een polyfill voor oudere browsers: https://github.com/scottjehl/picturefill

en een fallback naar de vertrouwde <img> tag.
Locked

Return to “Dutch - Nederlands”