UDT met CGSI

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

UDT met CGSI

Post 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?
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: UDT met CGSI

Post by Gregor »

Iemand een idee waar het vullen/verwerken van de array misgaat?
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: UDT met CGSI

Post 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;
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: UDT met CGSI

Post 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>';
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
deactivated010521

Re: UDT met CGSI

Post 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
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: UDT met CGSI

Post 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!
- + - + - + - + - + - + -
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: UDT met CGSI

Post 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>");
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: UDT met CGSI

Post 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.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: UDT met CGSI

Post 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}....... 
?
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: UDT met CGSI

Post 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.
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: UDT met CGSI

Post by Gregor »

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

Return to “Dutch - Nederlands”