0

I want to display main categories on home page like below image, enter image description here

for that I tried below code in phtml file, but it shows only category name, not display category image,

<?php 

    $categoryHelper = $this->helper('Magento\Catalog\Helper\Category');
    $outputhelper   = $this->helper('Magento\Catalog\Helper\Output');
    foreach($categoryHelper->getStoreCategories() as $category):     
?>
<li>
    <?php 
        $_imgHtml   = '';
        if ($_imgUrl = $category->getImageUrl()) {
            $_imgHtml = '<img src="' . $_imgUrl . '" />';
            $_imgHtml = $outputhelper->categoryAttribute($category, $_imgHtml, 'image');
        }
    ?>
    <a href="<?php echo $categoryHelper->getCategoryUrl($category) ?>">
        <?php echo $_imgHtml; ?><?php echo $category->getName() ?>
    </a>
</li>
<?php endforeach; ?>

i have created one phtml file in

Magento_Catalog/templates/product/display_by_cat.phtml

folder

here is my new updated Code..but has also not shown the category image.

<?php

    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $categoryHelper = $this->helper('Magento\Catalog\Helper\Category');
    $_helper = $this->helper('Magento\Catalog\Helper\Output');
    $cat = $categoryHelper->getStoreCategories()
    
?>
<ul class="sub-cat-ul">
    <?php
    foreach ($cat as $cats) {
        $_category = $objectManager->create('Magento\Catalog\Model\Category')->load($cats->getId());
        $_outputhelper = $this->helper('Magento\Catalog\Helper\Output');
        $caturl = $cats->getUrl();
        
        $_imgHtml = '';
                if ($_imgUrl = $_category->getImageUrl()) {

                    $_imgHtml = '<img src="' . $_imgUrl . '" />';
                    $_imgHtml = $_outputhelper->categoryAttribute($_category, $_imgHtml, 'image');
                }
       ?>
       <li>
            <?php
            if ($_category->getImageUrl()) { ?>
                <?php echo '<a class="info no-bg" href="'.$caturl.'" title="'.$cats->getName().'">' .$_imgHtml. '</a>' ?>
            <?php } else { ?>
                <?php echo '<a class="info" href="'.$caturl.'" title="'.$cats->getName().'">' .$_imgHtml. '</a>' ?>
            <?php } ?>        
            <h4><a href="<?php echo $caturl ?>"><?php echo $cats->getName(); ?></a></h4>
        </li>
    <?php } ?>
</ul>

It is the Output.. enter image description here and call this phtml file in cms block. please help me on this.

5
  • What is value of $_imgUrl?
    – Ankit
    Apr 15, 2021 at 11:17
  • i have updated my question please see that.@Ankit
    – rocky9310
    Apr 16, 2021 at 6:15
  • you updated the code but still my question's answer is not their.
    – Ankit
    Apr 16, 2021 at 6:28
  • $_imgUrl? shows the path of image. <img src="/pub/media/catalog/category/mh03-green_main_1.jpg">
    – rocky9310
    Apr 16, 2021 at 6:54
  • you can see the above image, in inspect element
    – rocky9310
    Apr 16, 2021 at 6:54

3 Answers 3

0

Please append the base media URL or base URL only to your code in $_imgUrl.

$_objectManager = \Magento\Framework\App\ObjectManager::getInstance(); //instance of\Magento\Framework\App\ObjectManager $storeManager = $_objectManager->get('Magento\Store\Model\StoreManagerInterface'); $currentStore = $storeManager->getStore();

$mediaUrl = $currentStore->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);

Please see below link: Get Media Link

Your URL should be:

<img src="www.xyz.com/media/catalog/category/mh03-green_main_1.jpg"

0

If you var_dump $category->getData() you will see that the collection returned by the Magento\Catalog\Helper\Categorydoes not include the image data.

Use your own custom block for this template and create a category collection that includes all category attributes :

<?php
namespace Vendor\Module\Block;

use Magento\Framework\View\Element\Template\Context;
use Magento\Catalog\Model\CategoryFactory;
use Magento\Store\Model\StoreManagerInterface;

class Category extends \Magento\Framework\View\Element\Template
{
        protected $_categoryFactory;
        protected $_storeManager;

    public function __construct(
        Context $context,
        StoreManagerInterface $storeManager,
        CategoryFactory $categoryFactory,
        array $data = []
    )
    {
        $this->_categoryFactory = $categoryFactory;
        $this->_storeManager = $storeManager;
        parent::__construct($context, $data);
    }


    /**
    * Get categories
    * @param $categoryId Parent category id
    * @param $getChildren get category children
    * @return Magento\Catalog\Model\ResourceModel\Category\Collection
    */
    public function getCategories($parentCategoryId=false,$getChildren=true)
    {

        if (!$parentCategoryId){$parentCategoryId = $this->_storeManager->getStore()->getRootCategoryId();}

        $category = $this->_categoryFactory->create()->load($parentCategoryId);
        $collection = $category->getCollection()
                ->addIsActiveFilter()
                ->addAttributeToSelect('*')
                ->addOrderField('name')
                ->addIdFilter($category->getChildren($getChildren));

        return $collection;
    }

}
?>

Now you can call the collection and get your image url data

<?php

    $categories=$block->getCategories();
    foreach($categories as $category):
?>
<ul>
    <li>
        <?php
            $imgHtml   = '';
            if ($imgUrl = $category->getImageUrl()) {
                $imgHtml = '<img src="' . $imgUrl . '" />';
            }
        ?>
        <a href="<?php echo $category->getUrl() ?>">
            <?php echo $imgHtml; ?><?php echo $category->getName()?>
        </a>
    </li>
</ul>
<?php endforeach; ?>
0

finally, I get my answer to customize some code.

<?php

    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $storeManager = $objectManager->get('Magento\Store\Model\StoreManagerInterface'); 
    $currentStore = $storeManager->getStore();
    $baseUrl = $currentStore->getBaseUrl();
    $categoryHelper = $this->helper('Magento\Catalog\Helper\Category');
    $cat = $categoryHelper->getStoreCategories();    
?>
<ul class="cat-ul">
    <?php
    foreach ($cat as $cats) {
        $_category = $objectManager->create('Magento\Catalog\Model\Category')->load($cats->getId());
        $_outputhelper = $this->helper('Magento\Catalog\Helper\Output');
        
        $_imgHtml = '';
          if ($_imgUrl = $_category->getImageUrl()) {
              $_imgHtml = '<img src="' . $baseUrl . $_imgUrl . '" />';
              $_imgHtml = $_outputhelper->categoryAttribute($_category, $_imgHtml, 'image');
          }
       ?>
      <li>
        <?php
          if ($_category->getImageUrl()) { ?>
              <?php echo '<a class="info no-bg" href="'.$_category->getUrl().'" title="'.$cats->getName().'">' .$_imgHtml. '</a>' ?>
          <?php } else { ?>
              <?php echo '<a class="info" href="'.$_category->getUrl().'" title="'.$cats->getName().'">' .$_imgHtml. '</a>' ?>
          <?php } ?>        
          <h4><a href="<?php echo $_category->getUrl() ?>"><?php echo $cats->getName(); ?></a></h4>
      </li>
    <?php } ?>
</ul>
3
  • That's the same thing I told you about
    – Ankit
    Apr 20, 2021 at 9:04
  • thanks for your help @Ankit
    – rocky9310
    Apr 21, 2021 at 10:19
  • So accept my answer if you find useful
    – Ankit
    Apr 21, 2021 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.