How to add custom block with image

Question

Add custom images div like this sample app block. How can we create it for our custom theme ?

Answer 1

app/design/frontend/Vendor/themename/Magento_Cms/templates/new_block_1.phtml

<div class="block-with-image">
    <img class="image1" alt="image1" src="<?php echo $this->getViewFileUrl('images/homepage/your_image_name.png'); ?>">
</div>

app/design/frontend/Vendor/themename/Magento_Cms/layout/cms_index_index.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content.top">
        <block class="Magento\Framework\View\Element\Template"  name="content-block1" template="Magento_Cms::new_block_1.phtml" />
    </referenceContainer>
</page>

Or

to avoid the xml part, you can directly call your phtml where you want like this:

<?php echo $this->getLayout()->createBlock("Magento\Framework\View\Element\Template")->setTemplate("Magento_Cms::new_block_1.phtml")->toHtml();?>