0

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>
0

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>
13
  • Thank you for the suggestion. I'm not entirely sure I know how to do that though. I've managed to create a container and move elements into it, but suspect this isn't what you mean. I've updated the OP with where I'm at now if you can offer any guidance. – Dan Anderton Jan 13 at 23:57
  • i've edited my answer, removing the base one's and substitute them with the custom one should do the trick – Alan Zavagli Jan 14 at 0:17
  • Thank you for the extra info! I understand what's supposed to happen now but at a loss as to where these files should actually go. I'm using a custom theme but unsure if it's derived from luma. I can't see any module folder or view folder in the app directory od my theme. – Dan Anderton Jan 14 at 1:32
  • Then you have to create it, in your theme folter (App/Design/Frontend/"Vendor"/"Theme"/Magento_Catalog/layout/catalog_category_view.xml) and (App/Design/Frontend/"Vendor"/"Theme"/Magento_Catalog/template/category/view/custom_category_title.phtml), to check if the Theme is inherited go check admin side: Content -> Design -> Theme -> "Custom theme" check the "Parent voice" – Alan Zavagli Jan 14 at 7:49
  • Thank you so much for that! I'm having some success. I've updated my original question with how things are looking now. So what is happening now is it's trying to get the category image from the correct url, but is showing broken link on the loaded page. Following the URL directly loads the image. The H1 tags are also empty and the category title isn't displaying. Finally the category description has jumped above the category image. – Dan Anderton Jan 14 at 9:09

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.