Solved: Re: Customizing Catalog Product View

kempermusic · ‎03-21-2022

Hello,
I would like to customize the detail view of the catalog products. First of all, I want to output the product´s base image separately as a header image. What is the best way to achieve this?
I am grateful for any advice!

kempermusic · ‎03-24-2022

I solved the task as follows:

app/design/frontend/< Vendor >/< theme >/Magento_Catalog/layout/catalog_product_view.xmlcatalog_product_view.xml

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        ---
        <block class="Magento\Catalog\Block\Product\View" name="product.header.theme" template="Magento_Catalog::product_header_theme.phtml" />
        ---
    </body>
</page>

app/design/frontend/< Vendor >/< theme >/Magento_Catalog/templates/product_header_theme.phtml

<?php $product = $block->getProduct(); ?>

<img src="<?= /* @noEscape */ $product->getMediaConfig()->getMediaUrl($product->getImage()); ?>"
alt="<?= $product->getName(); ?>" />

View solution in original post

kempermusic · ‎03-24-2022

I solved the task as follows:

app/design/frontend/< Vendor >/< theme >/Magento_Catalog/layout/catalog_product_view.xmlcatalog_product_view.xml

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        ---
        <block class="Magento\Catalog\Block\Product\View" name="product.header.theme" template="Magento_Catalog::product_header_theme.phtml" />
        ---
    </body>
</page>

app/design/frontend/< Vendor >/< theme >/Magento_Catalog/templates/product_header_theme.phtml

<?php $product = $block->getProduct(); ?>

<img src="<?= /* @noEscape */ $product->getMediaConfig()->getMediaUrl($product->getImage()); ?>"
alt="<?= $product->getName(); ?>" />