After save image is store in pub/media/cms/page/attribute/my_image.

And save image name in database cms_page table my custom column.
So how to display image in frontend ?

Backend image

Cms page custom attribute

Fronted Image :-

Fronted Home Page

  • Whic product attribute image you want to show on front end? And where need to show? Please add more details in question. Or add some screen shots.
    – ZealousWeb
    Jun 23, 2021 at 4:09
  • I have changed my question so please see Jun 23, 2021 at 4:26
  • But on home page where you want to show that image?
    – ZealousWeb
    Jun 23, 2021 at 4:28
  • After category menu Jun 23, 2021 at 4:33
  • Please check answer and if it is useful then please do upvote. Thanks!
    – ZealousWeb
    Jun 23, 2021 at 4:55

1 Answer 1


Please follow all the steps to show image in cms pages. Here i have taken custom collumn name "banner" which is created in "cms_page" table. Please change your code according to your column name.

Step 1:- Please create one block file named Image.php under path PackageName/Banner/Block/Banner/

Below code is for get image from custom column.

namespace PackageName\Banner\Block\Banner;

class Image extends \Magento\Framework\View\Element\Template
    protected $_request;

    protected $_cmsPage;

    protected $_pageFactory;

    protected $_storeManager;

     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param \Magento\Framework\Registry $registry
     * @param array $data
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Framework\App\Request\Http $request,
        \Magento\Cms\Model\Page $cmsPage,
        \Magento\Cms\Model\PageFactory $pageFactory,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        array $data = []
    ) {
        $this->_request = $request;
        $this->_cmsPage = $cmsPage;
        $this->_pageFactory = $pageFactory;
        $this->_storeManager = $storeManager;
        parent::__construct($context, $data);

    public function getMediaUrl()
        return $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);

    public function getCmsPage()
        $media_url = $this->getMediaUrl();
        $pageLoad = $this->_pageFactory->create()->load($this->_cmsPage->getId());
        $bannerImage = $media_url.'cms/page/attribute/'.$pageLoad->getBanner();
        return $bannerImage;

    public function getPageImage() 
        $fullAction = $this->_request->getFullActionName(); 
        if($fullAction == 'cms_page_view' || $fullAction == 'cms_index_index') { 
            $imageHtml = $this->getCmsPage(); 
            return $imageHtml; 

    public function getImageCheck() 
        $pageLoad = $this->pageFactory->create()->load($this->cmsPage->getId()); 
        $bannerImage = $pageLoad->getCmsImageAttribute(); 
        return $bannerImage; 

Step 2:- Create image.phtml file under path PackageName/Banner/view/frontend/templates/

<?php $bannerImage = $block->getImageCheck(); ?> 
<?php $pageImage = $block->getPageImage(); ?> 
<?php if($bannerImage): ?> 
    <div class="sec-outer"> <img src="<?php echo $pageImage;?>" class="banner-image"> </div> 
<?php endif; ?>

Step 3:- Now create file default.xml file under path PackageName/Banner/view/frontend/layout/

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceContainer name="page.top">
            <block class="PackageName\Banner\Block\Banner\Image" name="header.banner" template="PackageName_Banner::image.phtml"/>

With the use of above code, image will be shown in page top means after category menu.

Please check and let me know.

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.