How to show subcategory image in header category m

Question

On Opencart version 2.0.2.0 I need to display the subcategory image (thumb) beside the name when the header category dropdown menu is open. I try to get it by myself acting on code but nothing tried has worked. I need your help thanks in advance.

In the code below header.tpl you see where I want the subcategory image. It wil appear in the dropdown menu. How to customize the header.php file to achieve that?

<?php if ($categories) { ?>
<div class="container">
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <?php foreach ($categories as $category) { ?>
        <?php if ($category['children']) { ?>
        <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
              <ul class="list-unstyled">
                <?php foreach ($children as $child) { ?>
                <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>

                 SUBCATEGORY IMAGE HERE

                <?php } ?>
              </ul>
              <?php } ?>
            </div>
            <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
        </li>
        <?php } else { ?>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
        <?php } ?>
        <?php } ?>
      </ul>
    </div>
  </nav>
</div>
<?php } ?>

Answer 1

In your header.php (catalog > controller > common) these is this array which is responsible for the category child data, which displays in header

$children_data;

so you just need to add thumb/ image in this array and good thing is that it is in already fetched data so just add image to this array. For this you have to add resize (good habit) image first, just load image model

    $this->load->model('tool/image');

after this line (no restriction, add anywhere you want ;) )

    $this->load->model('catalog/product');

now add image index in your category child array

    $children_data[] = array(

i added like this

    $children_data[] = array(
    'image'  => $child['image'] ? $this->model_tool_image->resize($child['image'], 20, 20) : false,

it will check if category has image or not, if you want to display image always then you can use this

    'image'  => $child['image'] ? $this->model_tool_image->resize($child['image'], 20, 20) : $this->model_tool_image->resize('your-default-image.jpg', 20, 20),

now your controller work is done. It's time to view these changes in template. Add this code to header.tpl (catalog > view > theme > your-theme (mine default) > template >) and add this code like you want in your question

      <?php if($child['image']){ ?>
            <img src="<?php echo $child['image']; ?>" />
      <?php } ?>

It will display like this

Isn't it sweet :)

Note - Please add this changes with vqmod/ ocmod . Direct changes in core files is bad idea.