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
Fronted Image :-
-
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– ZealousWeb2021-06-23 04:09:12 +00:00Commented Jun 23, 2021 at 4:09
-
I have changed my question so please seeDarshit Parmar– Darshit Parmar2021-06-23 04:26:25 +00:00Commented Jun 23, 2021 at 4:26
-
But on home page where you want to show that image?ZealousWeb– ZealousWeb2021-06-23 04:28:42 +00:00Commented Jun 23, 2021 at 4:28
-
After category menuDarshit Parmar– Darshit Parmar2021-06-23 04:33:19 +00:00Commented Jun 23, 2021 at 4:33
-
Please check answer and if it is useful then please do upvote. Thanks!ZealousWeb– ZealousWeb2021-06-23 04:55:32 +00:00Commented Jun 23, 2021 at 4:55
|
Show 12 more comments
1 Answer
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.
<?php
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">
<body>
<referenceContainer name="page.top">
<block class="PackageName\Banner\Block\Banner\Image" name="header.banner" template="PackageName_Banner::image.phtml"/>
</referenceContainer>
</body>
</page>
With the use of above code, image will be shown in page top means after category menu.
Please check and let me know.
