How to Use Magento 2 Layouts, Blocks and Templates

Posted On: October 23, 2017

Please have a look below example that will show you how to use layouts, blocks and template file in magento2.

For example if you are trying to call custom blocks at frontend page then you need to follow the following steps given below:

  1. Create layout folder in your theme folder ex: app/design/frontend/Vendor/theme/Magento_Cms/layout
  2. Now create cms_index_index.xml because front end call index page by default in magento 2 with the below showing xml code:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
	<body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template"  name="home_page"  template="Magento_Cms::home.phtml" />
        </referenceContainer>
    </body>
</page>

Now create home.phtml file in template folder in below mentioned path:

app/design/frontend/Vendor/theme/Magento_Cms/templates

In this file you can apply your custom code like below:

<?php
 $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
 //media path
 $mpa = $objectManager->get('Magento\Store\Model\StoreManagerInterface')->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
//slider section
 $conf_img1 = $objectManager->get('Magento\Framework\App\Config\ScopeConfigInterface')->getValue('magp/magp/magp_cars1');
//echo $mpa.'magp_cars1/'.$conf_img1;
?>
<div class="slider_main_panel">
  <ul class="slider">
     <li>
	   <img src="<?php echo $mpa.'magp_cars1/'.$conf_img1; ?>" />
	 </li> 
  </ul>
</div>

Related Post

Also Read :   Ooty - Best Time to Visit Ooty, Ooty Climate
X
Subscribe to our newsletter
Subscribe to our newsletter today to receive updates on the latest news and offers.
100% Privacy. No spam guaranteed
webe tutorial
Menu