[Solved] Blocktopmenu : make category thumbnails clickable and linked

[greenpesto]

Hello,

 

I am working on the default bootstrap theme (1.6.0.6) and i think the category thumbnails within the menu are really useful, however i would like to make them clickable and linked to their assigned category. With no luck so far.

In the blocktopmenu.php file, I have tried to include the thumbnail <div> inside a <a href>, as you can see below, but it doesn't work:

$html .= '<a href="'.$link.'" title="'.$category['name'].'">';
$html .= '<div><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file)
.'" alt="'.Tools::SafeOutput($category['name']).'" title="'
.Tools::SafeOutput($category['name']).'" class="imgm" /></div>';
$html .= '</a>';

My syntax seems ok though...any idea on this ?

 

Thanks

Edited June 10, 2014 by greenpesto (see edit history)

[vekia]

if you check page source, do you see <a href=""> there ? (associated with these images)

[greenpesto]

Hi,

 

Checked the source code and the <a href> doesn't appear.

I have also tried to insert plain text in the $html string, as a test, but it does not reflect in the source either. Very odd.

I did clear my browser cache to make sure it wasn't a simple refresh problem, it didn't change anything.

[mandus]

						$html .= '<li id="category-thumbnail">';

						foreach ($files as $file)
							if (preg_match('/'.$category['id_category'].'-([0-9])?_thumb.jpg/i', $file) === 1)
								$html .= '<div><a href="'.$link.'" title="'.$category['name'].'"><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file)
								.'" alt="'.Tools::SafeOutput($category['name']).'" title="'
								.Tools::SafeOutput($category['name']).'" class="imgm" /></a></div>';

						$html .= '</li>';

works for me

Edited June 10, 2014 by mandus (see edit history)

[greenpesto]

						$html .= '<li id="category-thumbnail">';

						foreach ($files as $file)
							if (preg_match('/'.$category['id_category'].'-([0-9])?_thumb.jpg/i', $file) === 1)
								$html .= '<div><a href="'.$link.'" title="'.$category['name'].'"><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file)
								.'" alt="'.Tools::SafeOutput($category['name']).'" title="'
								.Tools::SafeOutput($category['name']).'" class="imgm" /></a></div>';

						$html .= '</li>';

works for me

 

 

It works ! thanks for your help mandus, much appreciated.

 

Marking this thread as solved then.

[vodalus]

I am also trying to make the thumbnail images clickable but for some reason the link on the thumbnail (line 496) is not the same as the link on the text (line 476) even though they both use the same $link variable. I can't figure it out. 

 

The link is assigned just before the text link - $link = $this->context->link->getPageLink('index');

 

The value of this same variable is changed when it is used to wrap the thumbnail image inside <a></a> tags and I just can't see why. Can anyone enlighten me?

 

Here is the generateCategoriesMenu() function

private function generateCategoriesMenu($categories)
	{
		$html = '';

		foreach ($categories as $key => $category)
		{
			if ($category['level_depth'] > 1)
			{
				$cat = new Category($category['id_category']);
				$link = Tools::HtmlEntitiesUTF8($cat->getLink());
			}
			else
				$link = $this->context->link->getPageLink('index');
			$html .= '<li'.(($this->page_name == 'category'
				&& (int)Tools::getValue('id_category') == (int)$category['id_category']) ? ' class="sfHoverForce"' : '').'>';
			<!-- first use of $link -->$html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a><!-- end link -->';

			if (isset($category['children']) && !empty($category['children']))
			{
				$html .= '<ul>';
				
				
				$html .= $this->generateCategoriesMenu($category['children']);

				if ((int)$category['level_depth'] == 2)
				{
					$files = scandir(_PS_CAT_IMG_DIR_);

					if (count($files) > 0)
					{
						$html .= '<li id="category-thumbnail">';

						foreach ($files as $file)
							
							if (preg_match('/'.$category['id_category'].'-([0-9])?_thumb.jpg/i', $file) === 1)
								<!-- second use of $link -->$html .= '<div><a href="'.$link.'" title="'.$category['name'].'"><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file)
								.'" alt="'.Tools::SafeOutput($category['name']).'" title="'
								.Tools::SafeOutput($category['name']).'" class="imgm" /></a></div>';

						$html .= '</li>';
					}
				}

				$html .= '</ul>';
			}

			$html .= '</li>';
		}

		return $html;
	}

Edited July 10, 2014 by vodalus (see edit history)

[greenpesto]

 

I am also trying to make the thumbnail images clickable but for some reason the link on the thumbnail (line 496) is not the same as the link on the text (line 476) even though they both use the same $link variable. I can't figure it out. 

 

 

I've noticed the same thing, not 100% sure why but my guess is it depdends on the context of the object you want to click.

 

In the case of the text link (<li> in the menu), it is actually pointing to the specfic $link of the sub-category, which is ok.

In the case of the thumbail, the same $link variable is actually pointing to the parent-category of this sub-category. Example : if you have 1 parent-category with 3 sub-categories and 3 thumbnails, well the 3 thumbnails will all point to the parent-category page.

 

It makes more sense when you take a look at the admin side of things : when you want to upload these thumbnails, you actually upload them on the parent-category page, thus they are associated with the parent-category and not with individual sub-categories pages...which might explain why the $link is different at the end.

 

I don't know if i'm clear here but that's my understanding. Hope this helps.

[vodalus]

Thanks for that greenpesto. 

 

It's still a mystery to me why it changes when the link is assigned to a variable and reused rather than regenerated by a function. I tried assigning the link to another variable and reusing that on the image instead of the $link but that also changed. 

 

I've no idea how to fix it but I guess it's not a huge deal. 

[Webshop250]

Hi Greenpesto,

 

I have figured it out, but is it aslo possible to link to subcategories?

Edited July 16, 2014 by Webshop250 (see edit history)

[greenpesto]

Hi Greenpesto,

 

I have figured it out, but is it aslo possible to link to subcategories?

 

Hi,

 

Surely, there is a way to make it work like this however i really don't know how.

I didn't dig into this further because i'm fine with the way it works now (text links to subcategories, and thumbnails link to parent category) but as we said with vodalus 2 posts above, you may want to focus on the $link variable and its context in order to change the thumbnails a href.

 

Let us know if you manage to do it :-) !

[josias]

And.. where to upload the thumbnails? in which directory and format?

 

I see in the code

"'/'.$category['id_category'].'-([0-9])?_thumb.jpg/i"

But I dont understand where to upload and the name should I use

 

Thank you!

 

 

[greenpesto]

And.. where to upload the thumbnails? in which directory and format?

 

I see in the code

"'/'.$category['id_category'].'-([0-9])?_thumb.jpg/i"

But I dont understand where to upload and the name should I use

 

Thank you!

 

To upload a thumbnail, you must go on your Back Office interface, click Catalog > Categories, then click on the dropdown menu of a category (right hand side) and select > Modify/Edit (with the small pencil icon). From here you can upload an image for the category and a maximum of 3 thumbnails.

[josias]

To upload a thumbnail, you must go on your Back Office interface, click Catalog > Categories, then click on the dropdown menu of a category (right hand side) and select > Modify/Edit (with the small pencil icon). From here you can upload an image for the category and a maximum of 3 thumbnails.

 

Thank you for answering.

However if inside the main I place a link for a thing different than category.. how to do?

for example if I place in this menu a link to "contact with us". how to place a thumbnail in this link? the same for other CMS addresses

[alano3city]

ahh ok it was all about adding this to blocktopmenu.php from main module directory

[AZC]

Hi,

 

Has anyone worked out how to link the category thumbnails to a subcategory rather than the parent category?

 

The solution above worked but all 3 thumbnails just link straight to the parent category.

 

Thanks