[SOLVED] Image mapping on the home page

[uddhava]

Like in the category view, i would like to have a image mapping (scenes) on the home page.
There have been request before, but untill now no answers have been given.

I tried to add code to the /index.tpl but that didnt work.
Any clue which file i should change here ?

I have created an image map and enabled it for the home page. Strangely enough there are 2 home pages in prestashop possible.... :-O

[rocky]

Add the following code to index.php in the root directory of Prestashop before the $smarty->display:

/* Scenes  (could be externalised to another controler if you need them */
$smarty->assign('scenes', Scene::getScenes(1, intval($cookie->id_lang), true, false));

Then you can put the following at the top of index.tpl in your theme's directory:

{if $scenes}
   <!-- Scenes -->
   {include file=$tpl_dir./scenes.tpl scenes=$scenes}
{/if}

Once you've done this, you can go to Catalog > Image mapping, edit an image map and tick the "Home" category. It is odd that Prestashop has the option to tick the "Home" category, but no code to display image maps on the homepage. It must be a bug in Prestashop, I guess.

[uddhava]

Thanks, i will try it out when i need it.
Although i dont like hacking the core files, because after an upgrade this 'fix' will probably be lost.
And then i will scratch my head what is changed....

So this might be a good feature request?

[uddhava]

According to the bug tracker, the "bug" will be fixed.
The option to set the scenes for the Home page will be deleted (grayed out).

I guess this is not really a "solution"
I think rocky's suggestion is much better.

[frontwards]

Hi! Rocky has a great solution, but it was missing one thing in index.php in order to work for me:

/* CSS ans JS files calls */
$css_files = array(__PS_BASE_URI__.'css/jquery.cluetip.css' => 'all', _THEME_CSS_DIR_.'scenes.css' => 'all');

Thank you Rocky!

[Geunix]

Hello!
Where exactly did you put this missing text in index.php? Did you put it alone, or along with rocky's text? Thanks!

[frontwards]

Hello!
Where exactly did you put this missing text in index.php? Did you put it alone, or along with rocky's text? Thanks!

Hi, here is my complete index.php file

<?php

include(dirname(__FILE__).'/config/config.inc.php');

if(intval(Configuration::get('PS_REWRITING_SETTINGS')) === 1)
   $rewrited_url = __PS_BASE_URI__;

/* CSS ans JS files calls */
$css_files = array(__PS_BASE_URI__.'css/jquery.cluetip.css' => 'all', _THEME_CSS_DIR_.'scenes.css' => 'all');

include(dirname(__FILE__).'/header.php');

$smarty->assign('HOOK_HOME', Module::hookExec('home'));

/* Scenes  (could be externalised to another controler if you need them */
$smarty->assign('scenes', Scene::getScenes(1, intval($cookie->id_lang), true, false));

$smarty->display(_PS_THEME_DIR_.'index.tpl');

include(dirname(__FILE__).'/footer.php');

?>

[paranaschi]

Hi!

Exactly that is my problem yet.
My Version is 1.3.1.1 and I can´t create a scene on the startsite/homepage.
I´ve tried the code from Rocky but nothing changed.

Do you have any ideas?

Thanks a lot!

Greetings
Natascha

[projectpb]

i cant get this to work neither and i have version 3.1.1 also . also instead of mapping it to a product page how about to a Manufacturers link on the site and remove the little gray box.

on my home page i have a Image with Manufacturers i sell for and it will be cool to map the image to the Manufacturers by their logos on the image www.projectpb.com

Thanks Jeff

[Psysub]

I just wanted to say that there are lots of places that lead to this thread as the answer to being able to select home for the image mapper, but I have done everything just as stated, even the last secondarily added part, and it does not work. I also read somewhere the version 1.4 would have this as an option, and I have 1.4 and it does not. If someone could come up with some code that works or show how the steps on this thread were explained incorrectly, it would be a great thing because many people have posted who would like this as an option.

[tirm]

hi psysub i like the way you add customer service phone number at the top of page how did you do that?

[jhonsonlu]

Hello!
Where exactly did you put this missing text in index.php? Did you put it alone, or along with rocky's text? Thanks!

Hi, here is my complete index.php file

<?php

include(dirname(__FILE__).'/config/config.inc.php');

if(intval(Configuration::get('PS_REWRITING_SETTINGS')) === 1)
   $rewrited_url = __PS_BASE_URI__;

/* CSS ans JS files calls */
$css_files = array(__PS_BASE_URI__.'css/jquery.cluetip.css' => 'all', _THEME_CSS_DIR_.'scenes.css' => 'all');

include(dirname(__FILE__).'/header.php');

$smarty->assign('HOOK_HOME', Module::hookExec('home'));

/* Scenes  (could be externalised to another controler if you need them */
$smarty->assign('scenes', Scene::getScenes(1, intval($cookie->id_lang), true, false));

$smarty->display(_PS_THEME_DIR_.'index.tpl');

include(dirname(__FILE__).'/footer.php');

?>

and whats about themes in index.tpl directory,
should be edited as rocky posts. I've tried what you wrote above, but didn't work for me

[jhonsonlu]

Hello!
Where exactly did you put this missing text in index.php? Did you put it alone, or along with rocky's text? Thanks!

Hi, here is my complete index.php file

<?php

include(dirname(__FILE__).'/config/config.inc.php');

if(intval(Configuration::get('PS_REWRITING_SETTINGS')) === 1)
   $rewrited_url = __PS_BASE_URI__;

/* CSS ans JS files calls */
$css_files = array(__PS_BASE_URI__.'css/jquery.cluetip.css' => 'all', _THEME_CSS_DIR_.'scenes.css' => 'all');

include(dirname(__FILE__).'/header.php');

$smarty->assign('HOOK_HOME', Module::hookExec('home'));

/* Scenes  (could be externalised to another controler if you need them */
$smarty->assign('scenes', Scene::getScenes(1, intval($cookie->id_lang), true, false));

$smarty->display(_PS_THEME_DIR_.'index.tpl');

include(dirname(__FILE__).'/footer.php');

?>

and whats about themes in index.tpl directory,
should be edited as rocky posts. I've tried what you wrote above, but didn't work for me

somebody help me please, i really need this feature :-S i 'm using 1.3.7.0

[marecekloool]

Hello,
anyone came up with a solution for PS 1.4 and above ? Thank you

[mdorado]

Hello,
anyone came up with a solution for PS 1.4 and above ? Thank you

create a new file on overwrite/classes/controllers named IndexController.php

<?php
class IndexController extends IndexControllerCore
{
   public function __construct()
   {
       parent::__construct();
   }

   public function setMedia()
   {
       parent::setMedia();
       Tools::addCSS(array(
           _PS_CSS_DIR_.'jquery.cluetip.css' => 'all',
           _THEME_CSS_DIR_.'scenes.css' => 'all'));
   }

   public function process()
   {
       parent::process();

       self::$smarty->assign('scenes', Scene::getScenes((int)(1), (int)(self::$cookie->id_lang), true, false));
                       /* Scenes images formats */
               if ($sceneImageTypes = ImageType::getImagesTypes('scenes'))
               {
                   foreach ($sceneImageTypes AS $sceneImageType)
                   {
                       if ($sceneImageType['name'] == 'thumb_scene')
                           $thumbSceneImageType = $sceneImageType;
                       elseif ($sceneImageType['name'] == 'large_scene')
                           $largeSceneImageType = $sceneImageType;
                   }
                   self::$smarty->assign('thumbSceneImageType', isset($thumbSceneImageType) ? $thumbSceneImageType : NULL);
                   self::$smarty->assign('largeSceneImageType', isset($largeSceneImageType) ? $largeSceneImageType : NULL);
               }
   }

}

then modify index.tpl

{if $scenes}
       <!-- Scenes -->
       {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
{/if} 
{$HOOK_HOME}

create a scene or image mapping and select you set the homepage checkbox

done!

[Nuvish]

Wonderful mdorado..

Thanks a lot for this

[pow]

Great mdorado!

[Prestadaube]

Hello, What should I update If I want to display 2 scenes on the homepage?

 

(I'd like 2 scenes: "What's New" and "Coming Soon")

 

Thanks for your help!

[Hermeswein]

Thanks a lot mdorado! Works wonderful.

 

Quick remark: There was a typo in mdorado's post:

 

The folder where the new file IndexController.php is to be placed is override\controllers

[linaeazn]

Hi,

 

i just tested the mdorado's solution. But it just don't work for me, nothing happen.

 

The index.tpl file to change, is in the root of the template, right ?

[rokasv]

Found an easy way for mapping frontpage picture:

 

1. Google, download and install arbitrary HTML module

2. Create picture with links (google for tutorials if dunno how)

3. Place arbitrary module on homepage (dont forget to move it to top position of frontpage modules)

4. Upload pictures (the ones you got when creating picture with links)

5. Paste html code (the one you got when creating picture) to arbitrary module placed on homepage

6. Edit html code to get right links to where you uploaded pictures

7. Delete frontpage picture in frontpage editor module

8. Refresh

 

Here you are

[design4VIP]

it is easier to download this one:

http://addons.prestashop.com/en/front-office-features/4376-pds-home-scenes.html

[laurapessoa]

Is it possible to map the Homepage image without using other modules? I have tryied the Rocky's and other solutions in this post but it doesn't work for me.

 

Thank you very much.

[goosedesign]

Anyone figured out how to do this in 1.5.3?

Edited February 24, 2013 by goosedesign (see edit history)

[imi]

Try this in override/controllers/front/IndexController.php. Don't forget to change $this->category->id to your home category id.

 

<?php
class IndexController extends IndexControllerCore
{
public function __construct()
{
 parent::__construct();
}

public function setMedia() {
 parent::setMedia();
 if ($this->context->getMobileDevice() == false)
 {
  //TODO : check why cluetip css is include without js file
  $this->addCSS(array(
   _THEME_CSS_DIR_.'scenes.css' => 'all',
   _THEME_CSS_DIR_.'category.css' => 'all',
   _THEME_CSS_DIR_.'product_list.css' => 'all',
  ));
  if (Configuration::get('PS_COMPARATOR_MAX_ITEM') > 0)
   $this->addJS(_THEME_JS_DIR_.'products-comparison.js');
 }
}

public function process()
{
 parent::process();
 $this->assignScenes(); 
}
/**
 * Assign scenes template vars
 */

protected function assignScenes()
{
 $this->category->id=2;
 // Scenes (could be externalised to another controler if you need them)
 $scenes = Scene::getScenes($this->category->id, $this->context->language->id, true, false);
 $this->context->smarty->assign('scenes', $scenes);

 // Scenes images formats
 if ($scenes && ($sceneImageTypes = ImageType::getImagesTypes('scenes')))
 {
  foreach ($sceneImageTypes as $sceneImageType)
  {
   if ($sceneImageType['name'] == ImageType::getFormatedName('m_scene'))
 $thumbSceneImageType = $sceneImageType;
   elseif ($sceneImageType['name'] == ImageType::getFormatedName('scene'))
   $largeSceneImageType = $sceneImageType;
  }

  $this->context->smarty->assign(array(
 'thumbSceneImageType' => isset($thumbSceneImageType) ? $thumbSceneImageType : null,
 'largeSceneImageType' => isset($largeSceneImageType) ? $largeSceneImageType : null,
  ));
 }
}


}

 

In your index.tpl:

 

{if $scenes}
<!-- Scenes -->
{include file="$tpl_dir./scenes.tpl" scenes=$scenes}
{/if}

[goosedesign]

Try this in override/controllers/front/IndexController.php. Don't forget to change $this->category->id to your home category id.

 

 

Woohoo! Thank you thank you thank you, it works!

[goosedesign]

Great! Upgraded to 1.5.4. Broken again!

 

Ah no phew here we go: http://www.prestashop.com/forums/topic/238197-solved-overrides-not-working-anymore-in-154/

Edited June 3, 2013 by goosedesign (see edit history)

[Snade]

Cant get it running on 1.5.6.2, anyone have any ideas? 
Maybe even different approach ?