Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Customizing Catalog Product View

SOLVED
Go to solution
‎03-21-2022 04:09 AM
‎03-21-2022 04:09 AM

Customizing Catalog Product View

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!

Labels:
0 Kudos
1 ACCEPTED SOLUTION

Accepted Solutions
‎03-24-2022 02:00 AM
‎03-24-2022 02:00 AM

Re: Customizing Catalog Product View

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

0 Kudos
1 REPLY 1
‎03-24-2022 02:00 AM
‎03-24-2022 02:00 AM

Re: Customizing Catalog Product View

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(); ?>" />
0 Kudos