Showing results for 
Search instead for 
Did you mean: 

getting sub category list with images 2.1

getting sub category list with images 2.1

I'm new to magento and really been racking my brain to figure out how to get sub categories to show images on parent page


anyone that can help i will be totally grateful   


looking to do this for sub categories under main category


Re: getting sub category list with images 2.1

Create Static Block,

Name as Subcategory Listing,

Keep content inside block,


set content inside block,


{{block class="Vendor\Modulename\Block\Subcategory" template="Vendor_Modulename::listing.phtml"}}

Now Open your main category,
Now changes on Display Setting tab as below,
Display mode set to static block only.
Set CMS Block from dropdown listing,Subcategory Listing.
Save Category.

Crate one block file in your module,

namespace Vendor\Modulename\Block;

use Magento\Framework\App\Filesystem\DirectoryList;

class Subcategory extends \Magento\Catalog\Block\Product\ListProduct
    protected $catalogProductVisibility;
    protected $_categoryHelper;
    protected $categoryFactory;
    protected $_catalogLayer;

    public function __construct(
        \Magento\Catalog\Block\Product\Context $context,     
        \Magento\Catalog\Helper\Category $categoryHelper,   
        \Magento\Catalog\Model\CategoryFactory $categoryFactory,
        \Magento\Framework\Filesystem $filesystem,
        \Magento\Framework\Data\Helper\PostHelper $postDataHelper,
        \Magento\Catalog\Model\Layer\Resolver $layerResolver,
        \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository,
        \Magento\Framework\Url\Helper\Data $urlHelper,      
        array $data = []
    ) {
        $this->_categoryHelper = $categoryHelper;
        $this->categoryFactory = $categoryFactory;  
        $this->_catalogLayer = $layerResolver->get();        
        $this->storeManager = $context->getStoreManager();
        $this->_filesystem = $filesystem;  

    public function getCurrentCategoryInfo(){
        $categories = $this->_catalogLayer->getCurrentCategory()->getChildrenCategories();
        return $categories;

    public function getStoreCategories($sorted = false, $asCollection = false, $toLoad = true)
        return $this->_categoryHelper->getStoreCategories($sorted , $asCollection, $toLoad);
    public function getCategoryData($id){
        return $category = $this->categoryFactory->create()->load($id);       

In template file,

   $currentCategory = $this->getCurrentCategoryInfo();
   $noOfCategory  = count($currentCategory);
<?php if($noOfCategory) { ?>
<ul class="listing-category">
   foreach($currentCategory as $categoryDetails){
      $categoryId = $categoryDetails->getId();

      $categoryObj = $this->getCategoryData($categoryId);      
        $categoryImage = $categoryObj->getData('image');
        $categoryUrl = $categoryObj->getUrl();
        $categoryName = $categoryDetails->getName();

        $imageUrlPlaceHolder = $block->getViewFileUrl('images/no-img.jpg');

        if(!empty($categoryImage) && $categoryImage !== ''){
            $imageUrl = $this->_filesystem->getDirectoryRead(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA)->getAbsolutePath('catalog/category/').$image;    
    <li class="listing-item">
         <div class="product details product-item-details">
                <a href="<?php echo $categoryUrl; ?>">                                   
                    <img src="<?php echo $imageUrl; ?>"/>
                    <div class="listing-category-info">
                        <span class="category-name"><?php echo $categoryName; ?></span>
<?php } //endforeach ?>
<?php } //main if end here ?>

Clear cache.


Now check your main category.


if issue solved, Click kudos/accept as solutions.


If Issue Solved, Click Kudos/Accept As solutions.

Re: getting sub category list with images 2.1

Totally new to this can you tell me where each file goes please thanks