M2 - How to move banner image using XML file

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

Answer 1

1. You need to comment Feature image code from file app/code/Magefan/Blog/view/frontend/templates/post/view.phtml

   like - https://prnt.sc/103qhpo

2. Please create new file image.phtml file under path - app/code/Magefan/Blog/view/frontend/templates/post/

3. Please call this image.phtml file in blog_post_view.xml like this way -

   Please check - https://prnt.sc/103qjk8

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

5. 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