我正在尝试重新设计 magento 上的类别页面，以显示具有最大高度的全宽类别图像，并将类别标题显示在以图像为中心的同一个框中。
我已经设法使用以下代码将类别图像和标题移动到页面包装器中
<move element="category.image" destination="page.wrapper" before="main.content" />
<move element="page.main.title" destination="page.wrapper" before="main.content"/>
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 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 Wax Melts" title="Classic Wax Melts" class="image" /></div>
</div>
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;
}
但无法弄清楚如何使类别标题位于图像的中心。
任何建议将不胜感激。
我正在尝试编辑的页面：https : //and-it.co.uk/test-store/classic-wax-melts
我正在尝试复制的页面：https : //amryw.co.uk/classic-wax-melts/
在另一个用户的帮助下找到了答案，因此将其发布以供其他人使用。
通过删除两个基本块 category.image 和 page.main.title 并创建自定义块来实现。
catalog_category_view.xml
在你的主题 \ 模块中创建你的 PHTML :（注意，如果你有一个从 Luma 继承的自定义主题，你可以把它放在里面：Magento_Catalog\templates\category\view\custom_category_title.phtml，
<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"/>
相反，如果您只有一个自定义模块，则必须将 Layout.xml [catalog_category_view] 和模板 [custom_category_title] 放在您的模块中：Vendor_Module\view\frontend\layout\catalog_category_view.xml 和 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>
最后，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;
}
希望这可以帮助其他想要做同样事情的人！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句