how to get main categories at home page?

Question

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

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.. and call this phtml file in cms block. please help me on this.

Answer 1

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"

Answer 2

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; ?>

Answer 3

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>