Displaying images for categories on the main page?

Question

PHP

It is necessary to display on the main page for each category, not only the name, but also the picture, which is added to the category through the admin panel. How to implement it in OpenCart 2.x?

Answer 1

1. Let's connect the image processing model. Let's add the menu and images to the output array.
Path: catalog/controller/common/header.php
Actions: Open the file for editing, press CTRL + F on the keyboard, a window for quick search in the file will open.
We need the line
$this->load->model('extension/extension');
immediately after it, insert
$this->load->model('tool/image');
we have connected the image processing model.
Now we need to find the iteration of the array, looking for the string
foreach ($categories as $category) {
In this iteration there are two arrays we need, one for the main menu items and one for the children.
This is an array of main categories
$data['categories'
'name' => $category['name'],
//Connect image output
'thumb' => $this->model_tool_image->resize($category['image'], $this->config->get(' config_image_category_width'), $this->config->get('config_image_category_height')),
//
'children' => $children_data,
'column' => $category['column'] ? $category['column'] : 1,
'href' => $this->url->link('product/category', 'path=' . $category['category_id'])
);
This is an array of child categories
$children_data[] = array(
'name' => $child['name'] . ($this->config-> get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
//Connect
'thumb' image output => $this->model_tool_image->resize($child['image'], $this->config->get('config_image_category_width'), $this->config->get( 'config_image_category_height')),
//
'href' => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id '])
);
I added the thumb line, it is responsible for the output. You will ask where the size of the generated icon comes from - from the admin panel, in the settings in the image tab "Image size in the list of categories".
You can also specify the width and height yourself, here is an example for a child category:
$this->model_tool_image->
Notice the $child variable is the child category and $category is the parent category.
2. Output variable to template.
Path: catalog/view/theme/*/common/header.tpl
Actions: Open the file for editing, press CTRL + F on the keyboard, a window will open for a quick file search. We need the line
<?php if ($categories) { ?>
href' => $this->url->link('product/category', 'path=' . $category['category_id'])
);
This is an array of child categories
$children_data[] = array(
'name' => $child['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product-> getTotalProducts($filter_data) . ')' : ''),
'thumb' => $this->model_tool_image->resize($child['image'], $this->config->get('config_image_category_width'), $this->config->get('config_image_category_height')) ,
//
'href' => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id'])
);
I added the thumb line, it is responsible for the output. You will ask where the size of the generated icon comes from - from the admin panel, in the settings in the image tab "Image size in the list of categories".
You can also specify the width and height yourself, here is an example for a child category:
$this->model_tool_image->resize($child['image'], 20, 20),
2. Output variable to template.
Path: catalog/view/theme/*/common/header.tpl
Actions: Open the file for editing, press CTRL + F on the keyboard, a window will open for a quick file search. We need the line
<?php if ($categories) { ?>
"/>

Answer 2

1) Any of a dozen "category wall" modules will do this without editing the code.
2) Use HTML pens to type and paste into the "Html block" module