Categories alignment in TOP MENU with images problem

[serpeal79]

Hi. I've modified the function generateCategoriesMenu in blocktopmenu.php in order to add categories photographs on top of categories names. This is the site (Prestashop 1.6.0.14):

 

http://www.djstore.es

 

The things is that categories are unaligned, I mean, there are lines with 5 categories, lines with 3, lines with 1, and I don't understand why. I would like each line to have the maximun categories it can contain.

 

This is my generateCategoriesMenu code:

	protected function generateCategoriesMenu($categories, $is_children = 0)
	{
		$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"' : '').'>';

			/* sergio - this code show categories images on top of categories names in top menu */
			
			$html .= '<a href="'.$link.'" title="'.$category['name'].'">';
			
			if ((int)$category['level_depth'] > 2)
			{

				$files = scandir(_PS_CAT_IMG_DIR_);

				if (count($files) > 0)
				{
					foreach ($files as $file)
					if (preg_match('/^'.$category['id_category'].'.jpg/i', $file) === 1)
						$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.=$category['name'].'</a>';
		
			/* end sergio */

			// Uncomment the line below to leave the original code.
			//$html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';


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

				if ((int)$category['level_depth'] > 1 && !$is_children)
				{
					$files = scandir(_PS_CAT_IMG_DIR_);

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

						foreach ($files as $file)
							if (preg_match('/^'.$category['id_category'].'-([0-9])?_thumb.jpg/i', $file) === 1)
								$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 .= '</li>';
					}
				}

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

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

		return $html;
	}

Any ideas?

 

Thanks in advance.

 

Sergio