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

1 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()): ?>
             $featuredImgAlt = $_post->getData('featured_img_alt');
             if (!$featuredImgAlt) {
                 $featuredImgAlt = $_postName;
         <div class="post-ftimg-hld">
             <img src="<?= $block->escapeUrl($featuredImage) ?>"
                  alt="<?= $block->escapeHtml($featuredImgAlt) ?>" />
     <?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


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.