Magento Question posted in
The official documentation can be found here.

Text centred and middle over image – Magento

I’m trying to redesign a category page on magento 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

<move element="category.image" destination="page.wrapper" before="main.content" />
<move element="page.main.title" destination="page.wrapper" 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 category 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/

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Found the answer with the help of another user so posting it for others to use.

    Achieved by removing the two basic blocks category.image and page.main.title and creating a custom block.

    catalog_category_view.xml

    create your PHTML inside your theme module : (Note, if you have a custom theme inherited from Luma you can just place it inside: Magento_Catalogtemplatescategoryviewcustom_category_title.phtml,

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

    <block class="MagentoCatalogBlockCategoryView" 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"/>

    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_Moduleviewfrontendlayoutcatalog_category_view.xml and Vendor_Moduleviewfrontendtemplatescategoryviewcustom_category_title.phtml)

    categoryviewcustom_category_title.phtml

    <?php

/**
 * Category view template
 *
 * @var $block MagentoCatalogBlockCategoryView
 */
    $_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>

    And finally, the 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;
}

    Hope this helps anyone else looking to do the same!


  2. 0

    If the title is a text element, assign text-align:center; to its parent. If the title isn’t a text element, you can force an element to behave this way by assigning it display:inline-block;

    This is assuming you’re using a background-image (which you should)

    This might be an easier solution for you: https://jsfiddle.net/8reLz1gk/1/

    For more info check out W3: https://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_center2

    Login or Signup to reply.
  3. 0

    Well you can set that image as background-image for your div. And then simply display the text in the middle of it.

    index.html:

    <div class="container">
   <p>TEXT HERE</p>
</div>

    style.css:

    .container {
  background-image: url("./img.jpg");
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container p {
  color: rgb(65, 150, 107);
  font-size: 32px;
}

    like this:

    enter image description here

    Login or Signup to reply.
  4. 0

    NEW ANSWER:

    Well in my html, I put a div around my img, so I could give it a overflow: hidden;. I gave the ‘img’ and the container around it height :100%. With the overflow: hidden; the image stays within the container. Now I have an image, exactly the same size as my container.

    Now the for the ‘p’. It took me some time to come up with this idea:
    I first gave my ‘p’ height: 100%; so it has the same height as the div containing the img and the p tag.
    Now I use transform: translateY(-100%);, which is moving up the p tag. Now the p tag and the img are in the same place, occupying the same space (both have same height).
    And for centering my ‘p’, I simply use flex attributes.

    index.html

    <div class="container">
    <div class="img-container">
        <img src="./img.jpg" alt="">
    </div>
    <p>text</p>
</div>

    style.css:

    .container {
  width: 400px;
  height: 300px;
}

.container img {
  width: 100%;
}

.img-container {
  overflow: hidden;
  height: 100%;
}

.container p {
  height: 100%;
  transform: translateY(-100%);
  display: flex;
  justify-content: center;
  align-items: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search