CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

foto UDT en CGSmartyImage

https://forum.cmsmadesimple.org/viewtopic.php?t=76500

Page 1 of 1

foto UDT en CGSmartyImage

Posted: Tue Apr 25, 2017 7:18 am
by Gregor
Voor de foto's in de blogartikelen gebruik ik een UDT genaamd foto. De code is als volgt:

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"}


$small_size = 150;
$large_size = 640;
$path = 'uploads/images';

// Get Params
$cgblog_id = 3;
// $params['cgblog_id'];

$path_no_spaces = str_replace(' ', '%20', $path);
$image = $path_no_spaces . '/' . $params['file'];

$title = $params['title'];
// echo 'title= ' . $title;
$side= $params['side'];
// echo 'side = ' .  $side;
// Get Name of small file (*_sm.jpg)
// echo 'image 0 = ' . $image;
// echo 'matches 0 = ' . $matches;

if (!file_exists(dirname($image) . '/' . basename($image))) {
    echo("<div class=\"news_image_$side\">\n");
    echo("Foto bestaat niet");
    echo("</div>\n");
    return;
}

if (file_exists(dirname($image) . '/' . basename($image) . '_sm')) {
  $small_image = dirname($image) . '/' . basename($image) . '_sm';
  } else {

  if (!file_exists(dirname($image) . '/thumb_' . basename($image))) {
    preg_match('/^(.*)(\..*)$/', $image, $matches);
    $small_image = $matches[1] . '_sm.jpg';
    // echo '$small_image != ' . $small_image;
    } else {

    // if thumb_ exists
    $small_image = dirname($image) . '/thumb_' . basename($image);
    // echo '$small_image 1 = ' . $small_image;
    // $small_image = 'thumb_' . $matches[1] . '.jpg';
    // echo '$small_image 2 = ' . $small_image;
    }
}

// echo 'image = ' . $image;
// echo 'matches = ' . $matches;
// echo 'small_image = ' . $small_image;

// If the small file already exists, we're done with the heavy processing.

if (!file_exists($small_image)) {
  list($width, $height) = getimagesize($image);

// Get new sizes

  $img = imagecreatefromjpeg($image);
  $imgratio=$width/$height;
  if ($imgratio > 1) {
    $large_width = $large_size;
    $large_height = $large_size / $imgratio;
    $small_width = $small_size;
    $small_height = $small_size / $imgratio;
  } else {
    $large_height = $large_size;
    $large_width = $large_size * $imgratio;
    $small_height = $small_size;
    $small_width = $small_size * $imgratio;
  }

// Generate small image

  $resized_img = imagecreatetruecolor($small_width, $small_height);
  imagecopyresampled($resized_img, $img, 0, 0, 0, 0, $small_width, $small_height, $width, $height);
  imagejpeg($resized_img, $small_image);

// If large image is larger than $large_size, resize that as well
 
  if ($width > $large_size || $height > $large_size) {
    $resized_img = imagecreatetruecolor($large_width, $large_height);
    imagecopyresampled($resized_img, $img, 0, 0, 0, 0, $large_width, $large_height, $width, $height);
    imagejpeg($resized_img, $image);
  }
}
//
// echo the html
// data-fb-options=\"group:1\"
//
echo("<div class=\"floatbox_$side floatbox\" data-fb-options=\"group:cgblog-1\">\n");
//
// example:
// <a id="pid-{$image->fileid}" class="albumnav" href="{$imagefileurl}" title="{$imagetitlename}" rel="gallery-{$galleryid}" data-fb-options="caption:#TweetGallery-{$image->fileid}" ><img src="{$imagethumburl}" title = "{$imagetitlename}" alt="{$imagetitlename}" /></a>
 
$image_no_space = str_replace(' ', '%20', $image);
echo("<a href=\"$image_no_space\" title=\"$title\">\n");

$small_image_no_space = str_replace(' ', '%20', $small_image);
echo("<img src=\"$small_image_no_space\" alt=\"$title\" title=\"$title\"><br />\n");
echo("</a>\n");
if ($title) {
  echo("<span class=\"cgblog_image_title\">$title</span><br />\n");
}
echo("<span class=\"cgblog_image_c2e\">(klik voor grote foto)</span>\n");
echo("</div>\n");
Nu kwam ik er bij toeval achter dat er CG een SmartyImage heeft die, als ik het goed begrijp een deel van de functionaliteit van mijn foto-UDT kan overnemen. In de UDT maak ik gebruik van floatbox voor de weergave van de grotere foto en scrollen door de overige foto's binnen een artikel.
Voorbeeld: https://www.uisge-beatha.eu/2017/02/Lew ... euwen.html

Een van de beperkingen van de udt is bijv. het weergeven van artikelen op mobiele telefoon. Een tablet en pc gaan ok.

Ik heb een poosje zitten studeren hoe (en of) het mogelijk is om CGSMI en de foto-UDT te integreren, maar loop vast op de wijze hoe de udt uiteindelijk de foto laat zien. Iemand een suggestie of en hoe hiermee verder te gaan?

Re: foto UDT en CGSmartyImage

Posted: Tue Apr 25, 2017 8:37 am
by velden
Ik weet niet precies wat je doet (je website is volgens mij stuk op dit moment) maar ik zou zeker naar CGSI kijken.

Lees dan ook even de help over het gebruik van aliassen. Daar stop je al je opties in en dat maakt het aanroepen weer wat eenvoudiger.

Ik heb zelf wel goede ervaring met Photoswipe http://photoswipe.com/ Wel goed de documentatie lezen. Het heeft moet namelijk wel de afmetingen van de afbeeldingen weten op voorhand. Overigens gebruik ik hetzelf alleen in combinatie met Gallery of LISE. Niet in content.

Re: foto UDT en CGSmartyImage

Posted: Tue Apr 25, 2017 9:01 am
by Gregor
Dankje, had een udt teveel opgeruimd :/

Re: foto UDT en CGSmartyImage

Posted: Wed Apr 26, 2017 8:12 pm
by Gregor
Ben aan het experimenteren om de foto UDT aan te passen zodat ik CGSI kan gebruiken, nu ben ik een heel eind, maar loop waarschijnlijk in de syntax binnen de UDT vast:

Code: Select all

echo("<div class=\"floatbox_$side floatbox\" data-fb-options=\"group:cgblog-1\">\n");

$image_no_space = str_replace(' ', '%20', $image);

$plaatje = "{CGSmartImage src=\"$image_no_space\" width=\"150\"}"; 
echo $plaatje;

if ($title) {
  echo("<span class=\"cgblog_image_title\">$title</span><br />\n");
}
echo("<span class=\"cgblog_image_c2e\">(klik voor grote foto)</span>\n");
echo("</div>\n");
Als output krijg ik:
{CGSmartImage src="uploads/images/Gallery/Zomer2015/Vakantie%202015/Vakantie%202015%20-%2052.jpg" width="150"}Helemaal rond
(klik voor grote foto)
Maar zou graag zien dat CGSI als module wordt uitgevoerd. Hoe zou ik dat stukje werkend kunnen krijgen?

Re: foto UDT en CGSmartyImage

Posted: Thu Apr 27, 2017 6:37 am
by Gregor
Het volgende geprobeerd, dat laat in ieder geval de tekst {CGSmarty........} niet meer zien, maar de module wordt nog niet uitgevoerd.

Code: Select all

echo("<div class=\"floatbox_$side floatbox\" data-fb-options=\"group:cgblog-1\">\n");
//
// example:
// <a id="pid-{$image->fileid}" class="albumnav" href="{$imagefileurl}" title="{$imagetitlename}" rel="gallery-{$galleryid}" data-fb-options="caption:#TweetGallery-{$image->fileid}" ><img src="{$imagethumburl}" title = "{$imagetitlename}" alt="{$imagetitlename}" /></a>

$image_no_space = str_replace(' ', '%20', $image);

$plaatje = "{CGSmartImage src='".$image_no_space."' width='150'}"; 
$smarty->display('eval:'.$plaatje);


if ($title) {
  echo("<span class=\"cgblog_image_title\">$title</span><br />\n");
}
echo("<span class=\"cgblog_image_c2e\">(klik voor grote foto)</span>\n");
echo("</div>\n");

Re: foto UDT en CGSmartyImage

Posted: Fri Apr 28, 2017 10:21 am
by Gregor
Het zal in de syntax zitten, echter ik zie niet waar/hoe ik dit kan oplossen. Er is vast iemand die het wel ziet ;)

Re: foto UDT en CGSmartyImage

Posted: Fri Apr 28, 2017 5:15 pm
by deactivated010521
Een Smarty tag in een UDT uitvoeren kan alleen middels een eval:

ongetest voorbeeld:

Code: Select all

$smarty->fetch('eval:'."{CGSmartImage}");
Het is overigens beter om direct de PHP methods van de CGSmartImage module te gebruiken.

Code: Select all

$mod = cms_utils::get_module('CGSmartImage');
$outp = cgsi_utils::process_image($params);
Mogelijk kan je hier wat inspiratie opdoen:

viewtopic.php?f=6&t=65594

Re: foto UDT en CGSmartyImage

Posted: Sat Apr 29, 2017 7:25 am
by Gregor
Dank je Arnoud, dat was een duwtje in de oplossingsrichting!

Voor het tonen van foto's in een artikel gebruik ik floatbox en omdat ik artikelen veelal offline schrijf (aan boord niet altijd internet) heb ik ook een UDT gemaakt waar alle code inzit en met de juiste parameters komt het geheel dan netjes in de pagina van de site te staan.

Met de gedane suggestie krijg ik nu wel de foto als output en kan ik de grotere versie van de foto tonen. De tekst die bij de foto hoort, die staat alleen nog niet op de juiste plek.

Ter illustratie:
https://www.uisge-beatha.eu/test.html

Stukje css:

Code: Select all

[[* css dedicated for floatbox in CGBLOG *]]
.floatbox_left,
.floatbox_right {
    margin-bottom:10px;
    position:relative;
    text-align:center;
    top:3px
}

.floatbox_left {
    float:left;
    margin-right:10px
}

.floatbox_right {
    float:right;
    margin-left:10px
}

.cgblog_image_title,
.cgblog_image_c2e {
    font-size:11px;
    font-style:italic
}

.cgblog_image_title {
    font-size:12px;
    font-style:normal;
    font-weight:400;
    line-height:16px
}
De source van de 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
//
$mod = cms_utils::get_module('CGSmartImage'); // make sure the module is loaded
$small_size = 150;
$image_width = 150;
$large_size = 640;
$path = 'uploads/images';
$noremote = 'noremote=""';
$noembed = 'noembed=""';

// Get Params
//
$file = $params['file'];
// echo 'file = ' . $file;
$title = $params['title'];
// echo 'title= ' . $title;
$side= $params['side'];
// 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'] = 150;
// $params['noremote'] = $noremote;
// $params['noembed'] = $noembed;
// $params['height'] = 100;
$outp = cgsi_utils::process_image($params);
// echo $outp;
$image = $outp['output'];
//
// The html
//
echo("<div class=\"floatbox_$side floatbox\" data-fb-options=\"group:cgblog-1\">\n");
echo("<a href=\"$image_no_space\"> $image</a>\n");
     if ($title) {
          echo("<span class=\"cgblog_image_title\">$title</span><br />\n");
     }
     echo("<span class=\"cgblog_image_c2e\">(klik voor grote foto)</span>\n");
echo("</div>\n");

Edit: css toegevoegd en mogelijke oplossing in UDT toegevoegd

Re: foto UDT en CGSmartyImage

Posted: Sun Apr 30, 2017 5:53 pm
by Gregor
In het css heb ik het opgelost door "display:block" toe te voegen. Het lijkt te werken in de cgblog-artikelen, maar wellicht is er een betere oplossing.

Code: Select all

.cgblog_image_title,
.cgblog_image_c2e {
    font-size:11px;
    font-style:italic;
    display: block;
}

.cgblog_image_title {
    font-size:12px;
    font-style:normal;
    font-weight:400;
    line-height:16px;
}
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited