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

All times are UTC




Post new topic Reply to topic  [ 14 posts ] 
Author Message
 Post subject: Aanroepen Global Conent Block vanuit UDT
PostPosted: Fri Oct 20, 2017 7:55 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1725
Location: The Netherlands
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:
Quote:
$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:
$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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Aanroepen Global Conent Block vanuit UDT
PostPosted: Fri Oct 20, 2017 8:52 am 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 7442
Location: The Netherlands
Er zou nu cms_template moeten staan. GCB's bestaan niet meer in 2.x...

_________________
Image

Did my post help you solving a problem at your (customers) website and it saved you many hours of work? Great!! Consider buying me a cup of coffee in return! [ Click here ]



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Aanroepen Global Conent Block vanuit UDT
PostPosted: Fri Oct 20, 2017 9:07 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1725
Location: The Netherlands
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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Aanroepen Global Conent Block vanuit UDT
PostPosted: Fri Oct 20, 2017 10:03 am 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 7442
Location: The Netherlands
Op welke pagina?

_________________
Image

Did my post help you solving a problem at your (customers) website and it saved you many hours of work? Great!! Consider buying me a cup of coffee in return! [ Click here ]



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Aanroepen Global Conent Block vanuit UDT
PostPosted: Fri Oct 20, 2017 10:16 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1205
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:
== 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 ;)


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Aanroepen Global Conent Block vanuit UDT
PostPosted: Fri Oct 20, 2017 10:39 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1725
Location: The Netherlands
Rolf wrote:
Op welke pagina?
https://docs.cmsmadesimple.org/tags/user-defined-tags/writing-a-udt


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Aanroepen Global Conent Block vanuit UDT
PostPosted: Fri Oct 20, 2017 10:59 am 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 7442
Location: The Netherlands
Gedaan. Bedankt!

_________________
Image

Did my post help you solving a problem at your (customers) website and it saved you many hours of work? Great!! Consider buying me a cup of coffee in return! [ Click here ]



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Aanroepen Global Conent Block vanuit UDT
PostPosted: Fri Oct 20, 2017 12:12 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1725
Location: The Netherlands
De gedachte van Arnoud volgend, dan is mijn foto-udt "oneigelijk" gebruik van een UDT. De code van de foto-udt is:
Code:
// 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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Aanroepen Global Conent Block vanuit UDT
PostPosted: Fri Oct 20, 2017 12:49 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1205
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:
{picture_element src='/images/iamresponsive.jpg', sizes='320, 640, 1024' breakpoints='x,y,z'}


Code:
<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>


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Aanroepen Global Conent Block vanuit UDT
PostPosted: Sun Oct 22, 2017 11:03 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1725
Location: The Netherlands
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:
<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:
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>");


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Aanroepen Global Conent Block vanuit UDT
PostPosted: Sun Oct 22, 2017 11:18 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1725
Location: The Netherlands
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:
{picture_element src='/images/iamresponsive.jpg', sizes='320, 640, 1024' breakpoints='x,y,z'}


Code:
<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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Aanroepen Global Conent Block vanuit UDT
PostPosted: Mon Oct 23, 2017 10:26 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1205
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:

  @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;
    }
}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Aanroepen Global Conent Block vanuit UDT
PostPosted: Sat Oct 28, 2017 6:06 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1725
Location: The Netherlands
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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Aanroepen Global Conent Block vanuit UDT
PostPosted: Sun Oct 29, 2017 1:30 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1205
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 14 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:  
A2 Hosting