Novinky
Home / Programovani / Prestashop / Přidání náhledových obrázků do seznamu CMS

Přidání náhledových obrázků do seznamu CMS

Nedávno se na mě obrátil klient s prosbou, že se mu nelíbí výpis stránek CMS, tedy jakýsi blog, že je to příliš strohé. V tom měl pravdu, defaultní šablona toto řeší vlastně jen orámečkovanými nadpisy, nic moc. Domluvili jsme se, že přidáme náhledové obrázky pro každou CMS stránku, to by pro „rozbití“ nevýrazného vzhledu mělo stačit a zároveň to nebude působit přeplácaně. Jak ale na to, když toto není standartní funkcionalita Prestashopu?
Laborování nezabralo ani tolik času. Úkol sestává v zásadě ze dvou částí. Umožnit v administraci nahrání náhledového obrázku pro každou stránku, a poté obrázek zobrazit ve frontendu.
Takže v databázi si vytvoříme sloupec v příslušné tabulce, kam si uložíme název náhledového obrázku. Příslušná tabulka je cms_lang, sloupec navzeme nějak smysluplně, třeba cms_img. Do sloupce budeme ukládat název souboru, postačí nám tedy třeba varchar(255).
V dalším kroku upravíme model CMS, resp. ho rozšíříme o požadovaný obrázek. Předpokládám, že důvod použití overrides nemusím vysvětlat. Takže třídu CMS přepíšeme v override/classes/CMS.php, výsledek bude vypadat zhruba takto:

class CMS extends CMSCore
{
// add a public field to store the CMS image
public $CMS_IMG;

/**
* @see ObjectModel::$definition
*/
public static $definition = array(
'table' => 'cms',
'primary' => 'id_cms',
'multilang' => true,
'fields' => array(
'id_cms_category' => array('type' => self::TYPE_INT, 'validate' => 'isUnsignedInt'),
'position' => array('type' => self::TYPE_INT),
'active' => array('type' => self::TYPE_BOOL),
// Lang fields
'meta_description' => array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isGenericName', 'size' => 255),
'meta_keywords' => array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isGenericName', 'size' => 255),
'meta_title' => array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isGenericName', 'required' => true, 'size' => 128),
'content' => array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isString', 'size' => 3999999999999),

// rozšíření modelu o obrázek
'cms_img' => array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isString', 'size' => 3999999999999), ),
);
}

V administraci se necháme inspirovat prací s obrázky na jiných místech, půjde to tedy rychle. Override kontroléru AdminCmsController tedy uložíme do override/controllers/admin/AdminCmsController.php:

class AdminCmsController extends AdminCmsControllerCore
{
public function renderForm()
{
$this->display = 'edit';
$this->toolbar_btn['save-and-preview'] = array(
'href' => '#',
'desc' => $this->l('Save and preview')
);
$this->initToolbar();
if (!$this->loadObject(true))
return;
$categories = CMSCategory::getCategories($this->context->language->id, false);
$html_categories = CMSCategory::recurseCMSCategory($categories, $categories[0][1], 1, $this->getFieldValue($this->object, 'id_cms_category'), 1);

// Add code to get image url
$image_url = '';
$imgName = $this->getImageValue($this->object);
if($imgName) {
$image = _PS_IMG_DIR_ . 'cms/' . $imgName;
$image_url = ImageManager::thumbnail($image, $this->table.'_'.(int)$this->object->id.'.'.$this->imageType, 350,
$this->imageType, true, true);
}

$this->fields_form = array(
'tinymce' => true,
'legend' => array(
'title' => $this->l('CMS Page'),
'image' => '../img/admin/tab-categories.gif'
),
'input' => array(
// custom template
array(
'type' => 'select_category',
'label' => $this->l('CMS Category'),
'name' => 'id_cms_category',
'options' => array(
'html' => $html_categories,
),
),
array(
'type' => 'text',
'label' => $this->l('Meta title:'),
'name' => 'meta_title',
'id' => 'name', // for copy2friendlyUrl compatibility
'lang' => true,
'required' => true,
'class' => 'copy2friendlyUrl',
'hint' => $this->l('Invalid characters:').' <>;=#{}',
'size' => 50
),
array(
'type' => 'text',
'label' => $this->l('Meta description'),
'name' => 'meta_description',
'lang' => true,
'hint' => $this->l('Invalid characters:').' <>;=#{}',
'size' => 70
),
array(
'type' => 'tags',
'label' => $this->l('Meta keywords'),
'name' => 'meta_keywords',
'lang' => true,
'hint' => $this->l('Invalid characters:').' <>;=#{}',
'size' => 70,
'desc' => $this->l('To add "tags" click in the field, write something, then press "Enter"')
),
array(
'type' => 'text',
'label' => $this->l('Friendly URL'),
'name' => 'link_rewrite',
'required' => true,
'lang' => true,
'hint' => $this->l('Only letters and the minus (-) character are allowed')
),
array(
'type' => 'textarea',
'label' => $this->l('Page content'),
'name' => 'content',
'autoload_rte' => true,
'lang' => true,
'rows' => 5,
'cols' => 40,
'hint' => $this->l('Invalid characters:').' <>;=#{}'
),
/* Add an fileupload component to the form */
array(
'type' => 'file',
'label' => $this->l('Náhledový obrázek'),
'name' => 'cms_img',
'desc' => $this->l('Zvolte náhledový obrázek'),
'lang' => true,
'display_image' => true,
'image' => $image_url ? $image_url : false,
),
array(
'type' => 'radio',
'label' => $this->l('Displayed:'),
'name' => 'active',
'required' => false,
'class' => 't',
'is_bool' => true,
'values' => array(
array(
'id' => 'active_on',
'value' => 1,
'label' => $this->l('Enabled')
),
array(
'id' => 'active_off',
'value' => 0,
'label' => $this->l('Disabled')
)
),
),
),
'submit' => array(
'title' => $this->l(' Save '),
'class' => 'button'
)
);
if (Shop::isFeatureActive())
{
$this->fields_form['input'][] = array(
'type' => 'shop',
'label' => $this->l('Shop association:'),
'name' => 'checkBoxShopAsso',
);
}
$this->tpl_form_vars = array(
'active' => $this->object->active
);
return AdminControllerCore::renderForm();
}

public function postProcess()
{
$languages = Language::getLanguages(false);
$update_images_values = false;

foreach ($languages as $lang)
{
if (isset($_FILES['cms_img'])
&& isset($_FILES['cms_img']['tmp_name'])
&& !empty($_FILES['cms_img']['tmp_name']))
{
if ($error = ImageManager::validateUpload($_FILES['cms_img'], 4000000))
return $error;
else
{
$ext = substr($_FILES['cms_img']['name'], strrpos($_FILES['cms_img']['name'], '.') + 1);
$file_name = md5($_FILES['cms_img']['name']).'.'.$ext;

if (!move_uploaded_file($_FILES['cms_img']['tmp_name'],
_PS_IMG_DIR_ .'cms'.DIRECTORY_SEPARATOR.$file_name))
return Tools::displayError($this->l('An error occurred while attempting to upload the file.'));
else
{
$values['cms_img'][$lang['id_lang']] = $file_name;
}
}

$update_images_values = true;
$cms = new CMS((int)Tools::getValue('id_cms'));
$cms->CMS_IMG = $file_name;
$cms->update();
}
}

parent::postProcess();
}

public function getImageValue()
{
$db = Db::getInstance();
$sql = 'SELECT cms_img FROM '._DB_PREFIX_.'cms_lang WHERE id_cms = ' . $this->object->id;
return $db->getValue($sql);
}
}

To by bylo v backendu vše, nyní můžeme snadno ukládat obrázky k příslušné CMS stránce, uloží se do složky img/cms a záznam se uloží do databáze. Nyní upravíme kontrolér pro frontend tak, aby smarty načerpalo uložený obrázek. Vytvoříme tedy soubor override/controllers/front/CmsController.php:

class CmsController extends CmsControllerCore
{

/**
* Assign template vars related to page content
* @see CmsControllerCore::initContent()
*/
public function initContent()
{
if(!empty($this->cms->CMS_IMG)) {
$this->context->smarty->assign('cms_image', _PS_IMG_ . 'cms/' . $this->cms->cms_img);
}

parent::initContent();
}
}

Tím máme hotovo a můžeme náhledový obrázek použít. Např. výpis seznamu CMS stránek pro šablonu default-bootstrap najdeme v themes/default-bootstrap/cms.tlp kolem řádku 65. Stačí nám tam vložit obrázek umístěný na
{$img_ps_dir}cms/{$cmspages.cms_img} a máme hotovo úplně :) Samozřejmě ho vložíme na potřebné místo výpisu a nastylujeme tak, ať nám do stránky pěkně zapadá.. Ale programátorskou část máme zdárně splněnu!

Scroll To Top