Semi automatic gallery on cms pages in prestashop 1.6

[sitte]

Hello. I wanted to share the way to extend standard cms pages. With this code You can add any images to Your cms pages and they will be converted to gallery with popup and the first image will be extracted and shown on cms articles list page. It is first version so it needs some more work.

 

Steps:

• change cms.tpl file
• add loading of fancybox to cms controller
• add 2 functions to smarty
• add styles

After changes You can add any images to cms article (position, parameters does not metter) and they will be converted to popup gallery and put on end of the cms article page. Also the list of articles in category cms page will change and show first image on the left, title and first 250 chars of article.

 

 

 

1. Change in /themes/theme_name/cms.tpl (it changes look of cms list of articles and article itself)

from:

{$cms->content}

to:

{$cms->content|prepare_cms1}
{literal}<script type="text/javascript">$(document).ready(function() {$("a.fancybox").fancybox();});</script>{/literal}

The same file from:

<li>
   <a href="{$link->getCMSLink($cmspages.id_cms, $cmspages.link_rewrite)|escape:'html':'UTF-8'}">{$cmspages.meta_title|escape:'html':'UTF-8'}</a>
</li>

to:

<li class="artykul_cms col-xs-12">
   {assign var='obrazek' value=$cmspages.content|get_img}
   {if $obrazek}
      <a href="{$link->getCMSLink($cmspages.id_cms, $cmspages.link_rewrite)|escape:'html':'UTF-8'}" class="foto_na_liscie" style="background-image:url('{$obrazek}')"></a>
   {else}
      <a href="{$link->getCMSLink($cmspages.id_cms, $cmspages.link_rewrite)|escape:'html':'UTF-8'}" class="foto_na_liscie" style="background-image:url('{$img_dir}/brak_zdjecia.png')"></a>
   {/if}
   <a href="{$link->getCMSLink($cmspages.id_cms, $cmspages.link_rewrite)|escape:'html':'UTF-8'}"><h2>{$cmspages.meta_title|escape:'html':'UTF-8'}</h2></a>
   {$cmspages.content|strip_tags|truncate:250:"":true}
</li>

on red i set the default image if none in article is found.

 

2. New file /override/controllers/front/CmsController.php (it ads override to cms page controller and adds fancybox script and css)

<?php
class CmsController extends CmsControllerCore
{
	public function setMedia()
	{
		parent::setMedia();
		$this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
		$this->addJqueryPlugin('fancybox');
	}
}

3. New file /tools/smarty/plugins/modifier.prepare_cms1.php (it ads php function to smarty to remove images from content and add gallery on end)

<?php
function smarty_modifier_prepare_cms1($string)
{if ($string=='') return '';
$zwrot=preg_replace('#<img([^>]*)>#im', '', $string);
$doc=new DOMDocument(); $doc->loadHTML($string); $xml=simplexml_import_dom($doc);
$images=$xml->xpath("//img[not(contains(@alt, 'nie'))]"); 
$zwrot.='<ul class="galeria row">';
foreach($images as $node) {
	$zwrot .= '<li class="col-xs-4"><a class="fancybox" rel="galeria" href="'.((string) $atrybuty=$node->attributes()->src).'"><img itemprop="image" class="img-responsive" src="'.((string) $atrybuty=$node->attributes()->src).'" alt="" /></a></li>';
}
$zwrot.='</ul>';
return $zwrot;
}
?>

4. New file /tools/smarty/plugins/modifier.get_img.php (it ads php function to smarty to extract first image. It's for cms articles list page)

<?php
function smarty_modifier_get_img($string)
{
$doc=new DOMDocument(); $doc->loadHTML($string); $xml=simplexml_import_dom($doc);
$images=$xml->xpath('//img'); return $images[0]['src'];
}
?>

5. New file /themes/theme_name/css/autoload/autogallery.css /Or modify any css file (it sets the styles for new code)

/*CMS*/
li.artykul_cms{ padding:10px 10px; overflow:hidden;} 
li.artykul_cms .foto_na_liscie{width:200px; height:140px; overflow:hidden; float:left; background-size:cover; background-position: center center; margin:0 20px 0 0;}
li.artykul_cms h2{margin:0;}
ul.galeria li{list-style:none;}

If You find andy mistakes please give me a know, I'll fix it.

 

Best regards

Barto

 

 

 

 

 

 

 

[Guest nzefarbt]

Thank you for your modification. Can you make it to show all images as gallery but without to move them to the end of page?

[sitte]

Do You want to replace the static images into clickable ones? If so - You just need to alter 3rd step into:

    <?php
    function smarty_modifier_prepare_cms1($string)
    {if ($string=='') return '';
    $zwrot=preg_replace('#<img[^>]+src="([^"]*)[^>]*>#im', '<a class="fancybox" rel="galeria" href="$1"><img itemprop="image" class="img-responsive miniatura" src="$1" alt="" /></a>', $string);
    return $zwrot;
    }
    ?>

I didn't test it but it shuld work. If not give me know, i'll test it. My code will celan all other params form img so if You need them also give me know.

 

You'll need to set a css style for thumbnails. For example:

.miniatura{width:200px; margin:0 0 20px 10px; float:right;}

[Skayfer]

Hi,

 

Your code disable images alt. After modification it is not displayed.

[Skayfer]

Can you check it and fix ? Otherwise great tutorial .

[Skayfer]

And add change image size name will be good.