In this blog, we are going to explain to you how to add image alt tags for category age in Magento 2. By default, Magento 2 doesn’t provide the feature to add alt tags for category page images, but It will be very helpful for SEO purposes. If you want to add an image alt tag on the category page in Magento 2, follow the below steps.
Step 1: First we need to create the module.xml file app/code/Webiators/CatImgAltTag/etc/module.xml
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd"> <module name="Webiators_CatImgAltTag" setup_version="1.0.0"> <sequence> <module name="Magento_Catalog"/> </sequence> </module> </config> |
Step 2: We need to create the InstallData.php
app/code/Webiators/CatImgAltTag/Setup/InstallData.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<?php namespace Webiators\CatImgAltTag\Setup; use Magento\Framework\Exception\LocalizedException; use Magento\Framework\Setup\ModuleContextInterface; use Magento\Framework\Setup\ModuleDataSetupInterface; use Magento\Framework\Setup\InstallDataInterface; use Magento\Eav\Setup\EavSetup; use Magento\Eav\Setup\EavSetupFactory; use Zend_Validate_Exception; /** * Install Custom Attribute for Category Class */ class InstallData implements InstallDataInterface { /** * @var \Magento\Eav\Setup\EavSetupFactory */ private $eavSetupFactory; /** * Class Constructor * * @param \Magento\Eav\Setup\EavSetupFactory $eavSetupFactory */ public function __construct( EavSetupFactory $eavSetupFactory ) { $this->eavSetupFactory = $eavSetupFactory; } /** * Add Image Alt category custom attribute * * @param \Magento\Framework\Setup\ModuleDataSetupInterface $setup * @param \Magento\Framework\Setup\ModuleContextInterface $context * @throws LocalizedException * @throws Zend_Validate_Exception * @SuppressWarnings(PHPMD.UnusedFormalParameter) */ public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context) { /** @var EavSetup $eavSetup */ $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]); $eavSetup->addAttribute( \Magento\Catalog\Model\Category::ENTITY, 'category_image_alt_tag', [ 'type' => 'text', 'label' => 'Category Image Alt Tag', 'input' => 'text', 'required' => false, 'sort_order' => 50, 'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE, 'group' => 'Meta Information', ] ); } } |
Step 3: In the second step we need to create the category_form.xml file to Show the attribute in the backend app/code/Webiators/CatImgAltTag/view/adminhtml/ui_component/category_form.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?xml version="1.0" encoding="UTF-8"?> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <fieldset name="search_engine_optimization"> <field name="category_image_alt_tag" sortOrder="160" formElement="input"> <settings> <dataType>string</dataType> <label translate="true">Category Image Alt Tag</label> </settings> </field> </fieldset> </form> |
Step 4: After that, we need to create image.phtml file
app/code/Webiators/CatImgAltTag/view/frontend/templates/category/image.phtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php /** * Category view template * * @var $block \Magento\Catalog\Block\Category\View */ ?> <?php $_category = $block->getCurrentCategory(); $_imgHtml = ''; if ($_imgUrl = $block->getImage()->getUrl($_category)) { $_imgHtml = '<div class="category-image"><img src="' . $block->escapeUrl($_imgUrl) . '" alt="' . $block->escapeHtmlAttr($_category->getCategoryImageAltTag() ? $_category->getCategoryImageAltTag() : $_category->getName()) . '" title="' . $block->escapeHtmlAttr($_category->getName()) . '" class="image" /></div>'; $_imgHtml = $block->getOutput()->categoryAttribute($_category, $_imgHtml, 'image'); /* @noEscape */ echo $_imgHtml; } ?> |
Step 5: In the last step, we need to create catalog_category_view.xml at the following path
app/code/Webiators/CatImgAltTag/view/frontend/layout/catalog_category_view.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="columns.top"> <container name="category.view.container" htmlTag="div" htmlClass="category-view" after="-"> <block class="Magento\Catalog\Block\Category\View" name="category.image" template="Webiators_CatImgAltTag::category/image.phtml"> <arguments> <argument name="image" xsi:type="object">Magento\Catalog\ViewModel\Category\Image</argument> <argument name="output" xsi:type="object">Magento\Catalog\ViewModel\Category\Output</argument> </arguments> </block> </container> </referenceContainer> </body> </page> |
Run Command and test in category:
|
1 2 3 4 5 6 |
php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy -f en_US php bin/magento cache:flush php bin/magento cache:clean php bin/magento indexer:reindex |
Thank You!
Hit 5 Stars if you find this post helpful
0 (based on 0 Reviews)
