CMS Made Simple Forums
https://forum.cmsmadesimple.org/

UDT met CGSI
https://forum.cmsmadesimple.org/viewtopic.php?f=13&t=78257
Page 1 of 1

Author:  Gregor [ Thu Apr 19, 2018 5:02 am ]
Post subject:  UDT met CGSI

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-beatha.eu/m3dQeMJS en hier de link naar het artikel https://www.uisge-beatha.eu/2018/03/Nieuwe-uitlaat-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:
// 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?

Author:  Gregor [ Fri Apr 27, 2018 10:53 am ]
Post subject:  Re: UDT met CGSI

Iemand een idee waar het vullen/verwerken van de array misgaat?

Author:  Rolf [ Fri Apr 27, 2018 1:53 pm ]
Post subject:  Re: UDT met CGSI

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:
// {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;

Author:  Rolf [ Fri Apr 27, 2018 4:53 pm ]
Post subject:  Re: UDT met CGSI

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:
/**
 * 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>';

Author:  arnoud [ Sat Apr 28, 2018 10:09 am ]
Post subject:  Re: UDT met CGSI

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

Author:  Rolf [ Sat Apr 28, 2018 7:55 pm ]
Post subject:  Re: UDT met CGSI

Ik ga hem zeker nog verder uitwerken en een plug-in bestand van maken i.p.v. een UDT. Komt op mn blog!

Author:  Gregor [ Tue May 01, 2018 6:15 pm ]
Post subject:  Re: UDT met CGSI

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/Gecorrodeerde-uitlaatbocht
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:
/**
 * 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>");

Author:  Gregor [ Wed May 02, 2018 1:39 pm ]
Post subject:  Re: UDT met CGSI

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:
{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:
......href="{CGSmartImage src={$fotos}.......
dan zijn de spaties verdwenen. Op zich niet erg, behalve dat het niet valideert bij W3C.

Author:  velden [ Wed May 02, 2018 8:46 pm ]
Post subject:  Re: UDT met CGSI

Niet getest maar kun je dat niet oplossen door de cms_escape te verplaatsen naar CGSI:

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


?

Author:  Gregor [ Wed May 02, 2018 9:36 pm ]
Post subject:  Re: UDT met CGSI

velden wrote:
Niet getest maar kun je dat niet oplossen door de cms_escape te verplaatsen naar CGSI:

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

Author:  Gregor [ Fri May 11, 2018 8:49 pm ]
Post subject:  Re: UDT met CGSI

Opgelost; bij de options van Floatbox "type: image" toegevoegd en de data uri kan in de href worden opgenomen.

Page 1 of 1 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/