Category image full width with title centred

magento.stackexchange https://magento.stackexchange.com/questions/329358

Question

I'm trying to redesign a category page to display the category image full width with a max height and have the category title displayed in the same box centred on the image.

I've managed to move the category image and title into the page wrapper with the below code

            <referenceContainer name="page.wrapper">
                <container name="amryw.container" as="amryw_container" label="Custom Container" htmlTag="div" htmlClass="amryw-container" after="main.content">
                    <block class="Magento\Framework\View\Element\Text" name="comment.placeholder">
                    </block>
                </container>
            </referenceContainer>



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

The HTML

<div class="amryw-container"><!-- Lorem Ipsum --><div class="page-title-wrapper">
    <h1 class="page-title"
         id="page-title-heading"                     aria-labelledby="page-title-heading&#x20;toolbar-amount"
        >
        <span class="base" data-ui-id="page-title-wrapper" >Classic Wax Melts</span>    </h1>
    </div>
<div class="category-image"><img src="https://and-it.co.uk/test-store/pub/media/catalog/category/amryw-classic-wax-melts-banner.jpg" alt="Classic&#x20;Wax&#x20;Melts" title="Classic&#x20;Wax&#x20;Melts" class="image" /></div></div>

The CSS

.amryw-container {
    display: contents;
}
.category-image {
    margin-bottom: 20px;
    align-self: center;
    display: contents;
}
.category-image .image {
    display: block;
    max-width: 100%;
    height: 340px;
    object-fit: cover;
}

But can't figure out how to get the title to be in the centre of the image.

Any advice would be greatly appreciated.

Page I'm trying to edit: https://and-it.co.uk/test-store/classic-wax-melts

Page I'm trying to replicate: https://amryw.co.uk/classic-wax-melts/

UPDATE

This is now what my catalog_category_view.xml looks like.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>


<referenceContainer name="category.view.container">

<block class="Magento\Catalog\Block\Category\View" name="custom.category.top.view" template="Magento_Catalog::category/view/custom_category_title.phtml" before="main.content" />

</referenceContainer>
<move element="category.view.container" destination="page.wrapper" before="main.content" />
<referenceBlock name="category.image" remove="true"/>
<referenceBlock name="page.main.title" remove="true"/>


        <referenceContainer name="content">
            <block class="Codazon\ThemeLayoutPro\Block\Catalog\Subcategories" name="cdz-subcategories" template="Magento_Catalog::category/subcategories.phtml" before="category.products.list.container" />
        </referenceContainer>
    </body>
</page>

And this is custom_category_title.phtml located at

<?php

/**
 * Category view template
 *
 * @var $block \Magento\Catalog\Block\Category\View
 */
    $_currentCat = $block->getCurrentCategory();
    $categoryTitle = $_currentCat->getTitle();
    $categoryImage = $_currentCat->getImageUrl();

?>

<div>
   <div class="category-image">
       <img title="<?=$categoryTitle?>" alt="<?=$categoryTitle?>" src="<?=$categoryImage?>">
       <h1><?=$categoryTitle?></h1>
   </div>
</div>
Was it helpful?

Solution

You might want to build your custom block and remove the 2 basic one's (or rewrite them) my suggestion for what you would like to accomplish is to Remove the

category.image
page.main.title

and add a custom one, just to have a cleaner css and html code.

You should be able to accomplish that like this:

CSS:

.category-image-custom img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: top;
    margin: auto;
    height: 300px;
}

.category-image-custom h1 {
    position: absolute;
    bottom: 50%;
    right: 40%;
    font-size: 30px;
    font: 400 50px/1.2 Poiret One, Helvetica Neue, Verdana, Arial, sans-serif;
    color: #fff;
}

.category-image-custom {
    margin-bottom: 20px;
    width: 100%;
    align-self: center;
    position: relative;
    flex-wrap: wrap;
    display: flex;
}

HTML:

<div class="category-image-custom">
      <img title="" alt="" src="https://and-it.co.uk/test-store/pub/media/catalog/category/amryw-classic-wax-melts-banner.jpg">
      <h1>Classic Wax Melts</h1>
</div>

To do as i suggested you'll need to do as such in category_view.xml in your custom template:

catalog_category_view.xml

<referenceContainer name="category.view.container">

    <block class="Magento\Catalog\Block\Category\View" name="custom.category.top.view" template="category/view/custom_category_title.phtml"/>

</referenceContainer>
<referenceBlock name="category.image" remove="true"/>
<referenceBlock name="page.main.title" remove="true"/>

create your PHTML inside your theme \ module : (Note, if you have a custom theme inherited from Luma you can just place it inside: Magento_Catalog\templates\category\view\custom_category_title.phtml,

instead if you have only a custom module you'll have to place the Layout.xml [catalog_category_view] and the template [custom_category_title] inside your module: Vendor_Module\view\frontend\layout\catalog_category_view.xml and Vendor_Module\view\frontend\templates\category\view\custom_category_title.phtml)

\category\view\custom_category_title.phtml

<?php

/**
 * Category view template
 *
 * @var $block \Magento\Catalog\Block\Category\View
 */
    $_currentCat = $block->getCurrentCategory();
    $categoryTitle = $_currentCat->getName();
    $categoryImage = $_currentCat->getImageUrl();

?>

<div>
   <div class="category-image-custom">
       <img title="<?=$categoryTitle?>" alt="<?=$categoryTitle?>" src="<?=$categoryImage?>">
       <h1><?=$categoryTitle?></h1>
   </div>
</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top