Magento2 PHTML – How to Add a Static Image on PHTML Page and CMS Blocks

cms-blockmagento2phtml

How I can Add a static image on PHTML page and CMS Blocks into Magento2?
in Magento 1.x it was possible using $this->getSkinUrl('images/xyz.jpg')

I am trying following method into Magento2

In Phtml File:

<img src=”<?= $block->getViewFileUrl(‘images/footer-logo.png’); ?>” alt=”Demo” />

In CMS Blocks:

<img src=”{{view url=”images/slide-bg.jpg”}}” alt=”” />

but it's not working properly. Please suggest me my mistakes

Best Answer

image url Syntax is ok for both static block and phtml, But make sure that when you write this code in static block

<img src="{{view url="images/slide-bg.jpg"}}" alt="test" />

on front end it looks like

http://localhost/magento2new/pub/static/frontend/Magento/luma/en_US/images/slide-bg.jpg

Where Magento/luma is package name and theme name, you can replace with your package and theme name

So you have to take care for slide-bg.jpg is exist in

pub/static/frontend/Magento/luma/en_US/images directory.

In your case,

<img src='<?php echo $this->getViewFileUrl('images/footer-logo.png'); ?>' alt="Demo">

Syntax seems ok , but in frontend It looks like

http://localhost/magento2new/pub/static/frontend/Magento/luma/en_US/images/footer-logo.png

So you have to make sure that footer-logo.png exist in

pub/static/frontend/Magento/luma/en_US/images directory.

And don't forgot about "[quotation marks]

Related Solutions

Magento – Magento CMS Page vs Static Blocks

Mostly if you want to create small blocks on given page then you should go for static block with category. In this case you have easy option to add products also as it is category page you can select product as well as static block.

If you are creating page like about us or contact us page where you have full pages content only then you should go for CMS page as it is easy to change the contents on a single place.

Hope it will help you!

Magento 2 – How to Use PHTML in CMS Static Block

You can use Magento\Framework\View\Element\Template basic template.

Try this:

<div id="something">
    {{block class="Magento\Framework\View\Element\Template" name="test" template="path/to/my/file.phtml" }}
</div>

This should work.

UPDATE:

If you need to display product information you have to use blocks from prduct view. Example:

<div id="something">
    {{block class="Magento\Catalog\Block\Product\View\Description" name="test" template="path/to/my/file.phtml" }}
</div>

PHTML file position depends on your architecture. If you are not embedding this in a module you could put it in your template.

Example:

<div id="something">
    {{block class="Magento\Catalog\Block\Product\View\Description" name="test" template="Magento_Theme::mytemplate.phtml" }}
</div>

And put your file under: design/frontend/yourtheme/default/Magento_Theme/mytemplate.phtml

Best Answer

Related Solutions

Magento – Magento CMS Page vs Static Blocks

Magento 2 – How to Use PHTML in CMS Static Block

Related Topic