Page 1 of 1

UDT met CGSI

Posted: Thu Apr 19, 2018 5:02 am
by Gregor
In de blog-artikelen maak ik gebruik van een foto-udt met daarin cgsi. In de performace reports zie ik dat de foto's in het artikel 'gewoon' worden geladen, dus zonder dat deze door CGSI worden 'gehaald'. Ter illustratie deze link voor het performance report https://gtmetrix.com/reports/www.uisge- ... u/m3dQeMJS en hier de link naar het artikel https://www.uisge-beatha.eu/2018/03/Nie ... t-elleboog

Het lijkt erop dat er in het vullen en processen van de array iets misgaat, zie alleen niet wat. Het vb. is afgeleid van een post elders op het forum. De complete udt ziet er als volgt uit:

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" alt="some text"}
//
// Defaults parameters
//
$smartimage = cms_utils::get_module('CGSmartImage'); // make sure the module is loaded
$cgblog = cms_utils::get_module('CGBlog');  // changed this line.
$gCms = cmsms();
// var_dump($cgblog);
$image_heigth = 170;
$large_size = 640;
$path = 'uploads/images/';
// $path = isset($params['file']) ? $params['file'] : 'uploads/images';
$noremote = '0';
$noembed = '0';
$noresponsive = '1';
$notag = '0';
/* CGBlog article related  (string) */
$cgblog_id = isset($params['cgblog_id']) ? $params['cgblog_id'] : '436'; //random number
//
// Get Params
$fotofile = $params['file'];
$path_parts = pathinfo($fotofile);
$fotofile = $path_parts['filename']; // name of the photo from the file-parameter
$fotofile = str_replace(' ','_',$fotofile);
$image_width = isset($params['width']) ? $params['width'] : '120';
$file = isset($params['file']) ? $params['file'] : '';
 
$title = isset($params['title']) ? $params['title'] : 'Uisge Beatha';
$alt = isset($params['alt']) ? $params['alt'].', '."Uisge Beatha, Zeilen, Watersport" : "Uisge Beatha, Zeilen, Watersport";
$side = isset($params['side']) ? $params['side'] : 'left';
$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 module accepts
$params = array();
//
$params['src'] = $pathfile;
$params['noresponsive'] = $noresponsive;
$params['notag'] = $notag;
$params['title'] = $title;
$params['noembed'] = $noembed;
$params['width'] = $image_width;
$params['height'] = $image_heigth;
$params['alt'] = $alt;
$params['noremote'] = $noremote;
//
//  "params: ".$params|print_r;
// echo "<br/>";
$outp = cgsi_utils::process_image($params);
$image = $outp['output'];
//
$paramshref = array();
$output = array();
$paramshref['src'] = $pathfile;  
$paramshref['noresponsive'] = $noresponsive;
$paramshref['noembed'] = 1;
$paramshref['notag'] = 1;
$paramshref['title'] = $title;

$outphref = cgsi_utils::process_image($paramshref); // reduced number of parameters for href 
$href = $outphref['output'];
$href=str_replace(' ','%20',$href); // replace spaces in order to validate W3C $pathfile;

echo("<div id=\"$fotofile\" class=\"floatbox_$side floatbox\" data-fb-options=\"group:cgblog-$cgblog_id header:#socialmediashare1 caption:href\">");
     echo("<a id=\"a_$fotofile\" data-rel=\"foto_blog\" class=\"floatbox\" href=\"$href\"> $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>");
Iemand een idee waar dit niet goed loopt?

Re: UDT met CGSI

Posted: Fri Apr 27, 2018 10:53 am
by Gregor
Iemand een idee waar het vullen/verwerken van de array misgaat?

Re: UDT met CGSI

Posted: Fri Apr 27, 2018 1:53 pm
by Rolf
Heb het even geprobeerd. Begonnen met opruimen, bomen en het bos... heb er ook meer uitgehaald omdat de popup ed bij mijn testsite natuurlijk niet werkt want die is niet geïnstalleerd. De code kan nog wel verder worden vereenvoudigd/verbeterd maar het gaat even om het testen.

Met dit werkt hier direct. De foto wordt verwerkt in CGSI en is dus verschaald!!

Code: Select all

// {foto file="folder/fotonaam.jpg" title="title" side="right | left"}
// {foto file="Gallery/Zomer2015/Vakantie 2015/Vakantie 2015 - 52.jpg" title="Helemaal rond" side="left" alt="some text"}

$cgblog = cms_utils::get_module('CGBlog');
$smartimage = cms_utils::get_module('CGSmartImage');

$image_heigth = 170;
$image_width = isset($params['width']) ? $params['width'] : '120';
$large_size = 640;
$path = 'uploads/images/';

$noremote = '0';
$noembed = '0';
$noresponsive = '1';
$notag = '0';

$fotofile = $params['file'];
$path_parts = pathinfo($fotofile);
$fotofile = $path_parts['filename']; // name of the photo from the file-parameter
$fotofile = str_replace(' ','_',$fotofile);

$file = isset($params['file']) ? $params['file'] : '';
 
$title = isset($params['title']) ? $params['title'] : 'Uisge Beatha';
$alt = isset($params['alt']) ? $params['alt'] : "Uisge Beatha, Zeilen, Watersport";
$side = isset($params['side']) ? $params['side'] : 'left';
$path_no_spaces = str_replace(' ', '%20', $path);
$pathfile = $path_no_spaces . $params['file'];
$image_no_space = str_replace(' ', '%20', $pathfile);

$params = array();
$params['src'] = $pathfile;
$params['noresponsive'] = $noresponsive;
$params['notag'] = $notag;
$params['title'] = $title;
$params['noembed'] = $noembed;
$params['width'] = $image_width;
$params['height'] = $image_heigth;
$params['alt'] = $alt;
$params['noremote'] = $noremote;

$outp = cgsi_utils::process_image($params);
$image = $outp['output'];

echo $image;

Re: UDT met CGSI

Posted: Fri Apr 27, 2018 4:53 pm
by Rolf
Deze vereenvoudigde UDT code maakt een pop-up als een "fancybox" voorbeeld (als de bijbehorende jQuery en CSS aanwezig is natuurlijk).
In jouw geval zul je wellicht een paar parameters nog moeten toevoegen en de laatste html regel moeten aanpassen.

Code: Select all

/**
 * User Defined Tag named "Photo"
 * {Photo file='path/to/file.jpg'}
 * {Photo file='path/to/file.jpg' height='' width='' alt='' title=''}
 */

// +++++ Dependencies +++++
$cgcontentutils = cms_utils::get_module('CGContentUtils');
if ( !$cgcontentutils ) {
  echo 'ERROR: CGContentUtils module not installed';
  return FALSE;
}

$cgsmartimage = cms_utils::get_module('CGSmartImage');
if ( !$cgsmartimage ) {
  echo 'ERROR: CGSmartImage module not installed';
  return FALSE;
}

// +++++ Parameters +++++
$src = isset($params['file']) ? $params['file'] : '';
if ( empty($src) ) { 
  echo 'ERROR: Missing "file" parameter';
  return FALSE;
}

if ( @!is_array( getimagesize($src) ) ) {
  echo 'ERROR: Source file is not an image';
  return FALSE;
}

$alt = isset($params['alt']) ? $params['alt'] : 'CMS Made Simple';
$title = isset($params['title']) ? $params['title'] : 'CMS Made Simple';

$thumb_heigth = isset($params['heigth']) ? $params['heigth'] : '170';
$thumb_width = isset($params['width']) ? $params['width'] : '120';
$photo_height = '800';
$photo_width = '600';

$noembed = '0';
$noremote = '0';
$noresponsive = '1';

// +++++ Create Thumbnail +++++
$params = array();
$params['alt'] = $alt;
$params['height'] = $thumb_heigth;
$params['noembed'] = $noembed;
$params['noremote'] = $noremote;
$params['noresponsive'] = $noresponsive;
$params['notag'] = '0';
$params['src'] = $src;
$params['title'] = $title;
$params['width'] = $thumb_width;

$cgsi_utils = cgsi_utils::process_image($params);
$thumb = $cgsi_utils['output'];

// +++++ Create Photo +++++
$params = array();
$params['alt'] = $alt;
$params['height'] = $photo_heigth;
$params['noembed'] = $noembed;
$params['noremote'] = $noremote;
$params['noresponsive'] = $noresponsive;
$params['notag'] = '1';
$params['src'] = $src;
$params['title'] = $title;
$params['width'] = $photo_width;

$cgsi_utils = cgsi_utils::process_image($params);
$photo = $cgsi_utils['output'];

// +++++ HTML Output +++++
echo '<a href="' . $photo . '" class="fancybox">' . $thumb . '</a>';

Re: UDT met CGSI

Posted: Sat Apr 28, 2018 10:09 am
by deactivated010521
Het idee van zo'n SmartImage UDT spreekt me wel aan.

Ik heb een tijdje geleden een variant gemaakt waarbij ik de 'html' in een 'generieke' designmanager template zet. De UDT schaalt meerdere afbeeldingen en geeft data door aan de template.

Hiermee blijft de UDT wat overzichterlijker en valt er ook te varieeren als je eens een andere 'html'-opmaak nodig hebt.

(Op het moment gebruikt mijn UDT maar 1 template maar een template parameter en check of de template bestaat zou een mooie uitbreiding zijn).

Misschien hebben jullie wat aan mijn voorbeeld:

https://github.com/FrontEndStudio/cmsms ... lement.php

https://github.com/FrontEndStudio/cmsms ... ent.91.tpl

Re: UDT met CGSI

Posted: Sat Apr 28, 2018 7:55 pm
by Rolf
Ik ga hem zeker nog verder uitwerken en een plug-in bestand van maken i.p.v. een UDT. Komt op mn blog!

Re: UDT met CGSI

Posted: Tue May 01, 2018 6:15 pm
by Gregor
Dank voor jullie reacties!

@Arnoud: mooi idee om een template te gebruiken, denk in de situatie zoals ik de udt gebruik, dat het wellicht wat 'overkill' is omdat ik foto's òf link òf rechts plaats. Maar misschien zie jij dat anders en ben daar dna wel benieuwd naar.

@Rolf: je voorbeeld enigszins aangepast naar mijn eigen situatie. Een paar dingen vallen op:
1. om een W3C-validatie te bereiken met foto's, mogen er in 'href' geen spaties staan. Haal ik de spaties uit $src, dan lijkt het erop dat $photo leeg is. realiseer me dat cgsi geen spaties in de output houdt.
2. als ik de spaties negeer en $photo heeft eenoutput vanuit CGSI aan href= voeg, dan vindt floatbox het niet leuk meer; ik vermoed dat er in $photo een " wordt geplaatst waardoor de variabele $photo verminkt wordt. Op de volgende link kan je dat zien gebeuren: https://www.cmscanbesimple.com/2018/03/ ... tlaatbocht
3. $file wordt niet herkend als foto-bestand waardoor getimagesize vindt dat deze een foutmelding moet geven. Voor nu van commentaar voorzien om het geheel te laten werken.

De code die ik met enkele aanpassingen in jouw voorbeeld van heb gemaakt is:

Code: Select all

/**
 * User Defined Tag named "Photo"
 * {foto file='path/to/file.jpg'}
 * {foto file='path/to/file.jpg' height='' width='' alt='' title='' side=''}
 */

// +++++ Dependencies +++++
$cgcontentutils = cms_utils::get_module('CGContentUtils');
if ( !$cgcontentutils ) {
  echo 'ERROR: CGContentUtils module not installed';
  return FALSE;
}

$cgsmartimage = cms_utils::get_module('CGSmartImage');
if ( !$cgsmartimage ) {
  echo 'ERROR: CGSmartImage module not installed';
  return FALSE;
}

// +++++ Parameters +++++
$src = isset($params['file']) ? $params['file'] : '';
if ( empty($src) ) { 
  echo 'ERROR: Missing "file" parameter';
  return FALSE;
}

//if ( @!is_array( getimagesize($src) ) ) {
//  echo 'ERROR: Source file is not an image';  // 01may18: source is not recognized as a photo. Reason unknown
//  return FALSE;
// }

$path = 'uploads/images';
$src = $path . '/' . $src;
$src_no_spaces = str_replace(' ','%20',$src); // replace spaces in order to validate W3C href;
$fotofile = $params['file'];
$path_parts = pathinfo($fotofile);
$fotofile = str_replace(' ','_',$path_parts['filename']); // name of the photo from the file-parameter
$cgblog_id = isset($params['cgblog_id']) ? $params['cgblog_id'] : '436'; //random number, although can't get cgblogid in UDT

$side = isset($params['side']) ? $params['side'] : 'left';

$alt = isset($params['alt']) ? $params['alt'].', '."Uisge Beatha, Zeilen, Watersport" : "Uisge Beatha, Zeilen, Watersport";
$title = isset($params['title']) ? $params['title'] : 'Uisge Beatha';

$thumb_heigth = isset($params['heigth']) ? $params['heigth'] : '170';
$thumb_width = isset($params['width']) ? $params['width'] : '120';
$photo_height = '480';
$photo_width = '640';

$noembed = '0';
$noremote = '0';
$noresponsive = '1';

// +++++ Create Thumbnail +++++
$params = array();
$params['alt'] = $alt;
$params['height'] = $thumb_heigth;
$params['noembed'] = $noembed;
$params['noremote'] = $noremote;
$params['noresponsive'] = $noresponsive;
$params['notag'] = '0';
$params['src'] = $src;
$params['title'] = $title;
$params['width'] = $thumb_width;

$cgsi_utils = cgsi_utils::process_image($params);
$thumb = $cgsi_utils['output'];

// +++++ Create Photo +++++
$params = array();
$params['alt'] = $alt;
$params['height'] = $photo_heigth;
$params['noembed'] = $noembed;
$params['noremote'] = $noremote;
$params['noresponsive'] = $noresponsive;
$params['notag'] = '1';
$params['src'] = $src;  // in case the file has no spaces, no $photo is created (seems empty)
$params['title'] = $title;
$params['width'] = $photo_width;

$cgsi_utils = cgsi_utils::process_image($params);
$photo = $cgsi_utils['output'];

// +++++ HTML Output +++++
// echo '<a href="' . $photo . '" class="fancybox">' . $thumb . '</a>';

echo("<div id=\"$fotofile\" class=\"floatbox_$side floatbox\" data-fb-options=\"group:cgblog-$cgblog_id header:#socialmediashare1 caption:href\">");
     echo("<a id=\"a_$fotofile\" data-rel=\"foto_blog\" class=\"floatbox\" href=\"$photo\"> $thumb</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>");

Re: UDT met CGSI

Posted: Wed May 02, 2018 1:39 pm
by Gregor
Toch terugkomend op de spaties. Href mag geen spaties bevatten en dat is op te lossten met {....|cms_escape:'urlpathinfo'}. Het lijkt er echter op dat GCSI de spaties die vervangen zijn door %20 eruit haalt en weer spaties van maakt, dat constateer ik als ik het volgende testje doe:

Code: Select all

{assign var='fotos' value="{root_url}/{$file|cms_escape:'urlpathinfo'}"}
Lees ik {$foto} uit, dan zie ik de url met %20 op de plaatsen waar een spatie staat en kijk ik naar de source na deze opdracht:

Code: Select all

......href="{CGSmartImage src={$fotos}....... 
dan zijn de spaties verdwenen. Op zich niet erg, behalve dat het niet valideert bij W3C.

Re: UDT met CGSI

Posted: Wed May 02, 2018 8:46 pm
by velden
Niet getest maar kun je dat niet oplossen door de cms_escape te verplaatsen naar CGSI:

Code: Select all

....href="{CGSmartImage|cms_escape:'urlpathinfo' src={$fotos}....... 
?

Re: UDT met CGSI

Posted: Wed May 02, 2018 9:36 pm
by Gregor
velden wrote:Niet getest maar kun je dat niet oplossen door de cms_escape te verplaatsen naar CGSI:

Code: Select all

....href="{CGSmartImage|cms_escape:'urlpathinfo' src={$fotos}....... 
?
Creatief!

De 'speciale' karakters worden inderdaad vervangen, echter het leidt tot een 404-fout, nl. dat het bestand niet kan worden gevonden.

Re: UDT met CGSI

Posted: Fri May 11, 2018 8:49 pm
by Gregor
Opgelost; bij de options van Floatbox "type: image" toegevoegd en de data uri kan in de href worden opgenomen.