Magento – How add div after image block in Magento 2

layoutmagento2product-imagesxml

I want to add custom div after image block of product view page. In that div I will add custom html like add any text, image etc.

Anyone have idea how we add custom div by plugin or observer?

Best Answer

copy the gallery.phtml file from vendor/magento/module-catalog/view/frontend/templates/product/view path to paste app/design/frontend/theme/themename/Magento_Catalog/templates/product/view path and modifie below code.

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <div data-role="loader" class="loading-mask">
        <div class="loader">
            <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
                 alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
        </div>
    </div>
</div>
<div>
    Magento 2
</div>
.......
//core code

it will appear your code see pic.

Related Solutions

Magento Layout – Add Block in Header

When you add a block directly inside header block, magento will put your block just after all of it's child block that are added via other layout xml files that are processed before your pinsearch.xml.

Basically a header block contains following blocks by default. This is added via page.xml which will get processed before your pinsearch.xml

<block type="page/html_header" name="header" as="header">
    <block type="page/template_links" name="top.links" as="topLinks"/>
    <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
    <block type="core/text_list" name="top.menu" as="topMenu" translate="label">
        <label>Navigation Bar</label>
        <block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml"/>
    </block>
    <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">
        <label>Page Header</label>
        <action method="setElementClass"><value>top-container</value></action>
    </block>
    <block type="page/html_welcome" name="welcome" as="welcome"/>
</block>

see top.container (which is the wrapper block that you are mentioning, I hope) block is loading here. So when we add your block directly under header block, it just come just below welcome (This is not accurate. But if we consider page.xml only, this is true :-))

So if you need your block just inside the wrapper block, then what you need to is include your block inside wrapper block itself

<default> 
   <reference name="header">
       <reference name="top.container">
            <block type="core/template" name="pinsearch" template="pinsearch/pinsearch.phtml"/>
       </reference>
     </reference> 
  <default>

Now suppose you need to include the block as child of header block itself, but need to display above the wrapper block (or any other child block), then what you need to do is.

<default> 
   <reference name="header">
        <block type="core/template" name="pinsearch" as="pinSearch" template="pinsearch/pinsearch.phtml"/>
     </reference> 
  <default>

Then go to app/design/frontend/<package>/<theme>/template/page/html/header.phtml and then specify your block wherever you needed to display it as like this

  <?php echo $this->getChildHtml('pinSearch') ?>

Hope that clears your doubt.. Happy coding sis :-)

Magento 2 – Adding CSS Class or Div Wrapper to a Block

You can add class like this

<referenceContainer name="sidebar.additional" htmlClass="css_class" htmlTag="div">
   <block class="Magento\Cms\Block\Block" name="faq_sidebar">
       <arguments>
            <argument name="block_id" xsi:type="string">faq_sidebar</argument>
            <argument name="css_class" xsi:type="string">faq</argument>
       </arguments>
   </block>

Check this http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html

Best Answer

Related Solutions

Magento Layout – Add Block in Header

Magento 2 – Adding CSS Class or Div Wrapper to a Block

Related Topic