1

In my magento 2.2 based site I am trying to edit the catalog_category_view.xml to move the category image above the page-main div and after the breadcrumbs so that it will load full width (in the Luma theme)

I tried the below inside the body tag in the xml but that does not work it seems to put it after the footer on bottom of page.

my xml looks like this

<?xml version="1.0"?>
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="columns.top">
        <container name="category.view.container" htmlTag="div" htmlClass="category-view" after="-">
            <block class="Magento\Catalog\Block\Category\View" name="category.image" template="Magento_Catalog::category/image.phtml"/>
            <block class="Magento\Catalog\Block\Category\View" name="category.description" template="Magento_Catalog::category/description.phtml"/>
            <block class="Magento\Catalog\Block\Category\View" name="category.cms" template="Magento_Catalog::category/cms.phtml"/>
        </container>
    </referenceContainer>
    <referenceContainer name="content">
        <block class="Magento\Catalog\Block\Category\View" name="category.products" template="Magento_Catalog::category/products.phtml">
            <block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml">
                <container name="category.product.list.additional" as="additional" />
                <block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers">
                    <block class="Magento\Framework\View\Element\Template" name="category.product.type.details.renderers.default" as="default"/>
                </block>
                <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="category.product.addto" as="addto">
                    <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
                           name="category.product.addto.compare" as="compare"
                           template="Magento_Catalog::product/list/addto/compare.phtml"/>
                </block>
                <block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">
                    <block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
                </block>
                <action method="setToolbarBlockName">
                    <argument name="name" xsi:type="string">product_list_toolbar</argument>
                </action>
            </block>
        </block>
        <block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml">
            <arguments>
                <argument name="triggers" xsi:type="array">
                    <item name="compareProductLink" xsi:type="string">.action.tocompare</item>
                </argument>
            </arguments>
        </block>
    </referenceContainer>
    <referenceBlock name="page.main.title">
        <arguments>
            <argument name="id" xsi:type="string">page-title-heading</argument>
            <argument name="add_base_attribute_aria" xsi:type="string">page-title-heading toolbar-amount</argument>
        </arguments>
        <block class="Magento\Catalog\Block\Category\Rss\Link" name="rss.link" template="Magento_Catalog::category/rss.phtml"/>
    </referenceBlock>
    <move element="category.image" destination="breadcrumbs" after="-"/>
    <referenceBlock name="catalog.compare.sidebar" remove="true"/>
    <referenceBlock name="view.addto.compare" remove="true" />
    <referenceBlock name="view.addto.wishlist" remove="true" />
</body>

Suggestions on what the move tag should be. also just for my understanding the "element" is the css class name of the element I want to move, the before is the css class name of what element i want to load it before and the destination would be the css class name of the div the content should be in or moved into?

1

You should try this one:

<move element="category.image" destination="page.wrapper" before="main.content" />

After update this run:

php bin/magento cache:clean

  • Thank you @Ravi now the image doesnt load at all. However i pasted my entire xml so you can see it – Jayreis Jun 27 at 18:12
  • Okay, Let me check – Ravi Soni Jun 27 at 18:15
  • Please check now. I have updated my answer. – Ravi Soni Jun 27 at 18:40
  • that worked thanks @Ravi – Jayreis Jun 27 at 18:50
  • Thanks for mark as right answer.. :) – Ravi Soni Jun 27 at 18:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.