M2 - How to move banner image using XML file
-
15-04-2021 - |
Question
I am using Magefan blog extension, in the article page i want to move my banner image under breadcrumbs,
Live demo : https://blog.demo.magefan.top/blog/post/fashion/our-favorite-blue-bags-for-fall-winter-2016-2017
how to achieve using XML file.
I did move the relevant product section from the bottom of the article to the sidebar using XML using
<move element="blog.post.relatedproducts" destination="blog.sidebar" after="blog.sidebar.search"/>
How to move my article banner image under the breadcrumbs
Solution
You need to comment Feature image code from file
app/code/Magefan/Blog/view/frontend/templates/post/view.phtml
like - https://prnt.sc/103qhpo
Please create new file image.phtml file under path -
app/code/Magefan/Blog/view/frontend/templates/post/
Please call this image.phtml file in blog_post_view.xml like this way -
Please check - https://prnt.sc/103qjk8
Put below code in file image.phtml
<?php $_post = $block->getPost(); ? <?php if ($featuredImage = $_post->getFeaturedImage()): ?> <?php $featuredImgAlt = $_post->getData('featured_img_alt'); if (!$featuredImgAlt) { $featuredImgAlt = $_postName; } ?> <div class="post-ftimg-hld"> <img src="<?= $block->escapeUrl($featuredImage) ?>" alt="<?= $block->escapeHtml($featuredImgAlt) ?>" /> </div> <?php endif; ?>
Now need to move this block after breadcrumbs. So please again open file blog_post_view.xml
And move element like -
<move element="blog.image" destination="page.top" after="breadcrumbs"/>
.
Above things will work according to your requirement