How to link static image into module .tpl file

[Rybaris]

Hello guys.

I am starting with module development and i found first problem which gives me headaches  PS 1.7.7.8

I have followed directory structure from tutorial https://devdocs.prestashop.com/1.7/modules/creation/module-file-structure/

aniinstagram
├── aniinstagram.php

├── logo.png
└── views
    ├── css
    │   └── aniinstagram.css
    ├── img
    │   └── ig_icon.png
    ├── js
    │   └── aniinstagram.js
    └── templates
        ├── admin
        ├── front
        └── hook
            └── aniinstagram.tpl

To reproduce problem, i want to source image views/img/ig_icon.png inside aniinstagram.tpl:

<!-- Block aniinstagram -->
<section id="aniinstagram_block_home" class="block">
  <div>
	<img src="ig_icon.png" alt="icon">
  </div>
</section>
<!-- /Block aniinstagram -->

I discovered that this is not that simple i thought.

I tried src with ../ with ../../ but nothing worked well and also i think that there must exists something more elegant, something Smarty.

So i started to try like this:

<img src="{$modules_dir}aniinstagram/views/img/ig_icon.png" alt="icon" />

I tried many global variables from here https://www.choosepizzi.net/prestashop-1-7-1-smarty-commands/ which i found on internet but ended with exception errors.

Then i found that it may not work in 1.7 anymore?

What is the right approach for this? How can i link my image to tpl file? 

Thanks in advance,

Rybaris

Edited October 1, 2021 by Rybaris
Edited for better problem understanding. (see edit history)

[endriu107]

Inside your tpl file put {debug} and refresh page, popup window will appear and inside you will see all variable you have access.

[squni]

 

Quote

So i started to try like this:

<img src="{$modules_dir}aniinstagram/views/img/ig_icon.png" alt="icon" />

 

This is almost correct BUT instead of {$modules_dir} you want to use "{$base_url}/modules/aniinstagram/views/img/ig_icon.png"

[Rybaris]

So guys big thanks to you, both approaches works well.

Using {debug} i found out $module_dir variable, so i created this:

<img src="{$module_dir}views/img/ig_icon.png" alt="icon" />

This gave me Forbidden 403 error, which was better than exception. Forbidden was because of Ubuntu and its permissions.

I added permissions to all PS folders, files and bang, instagram icon showed up :]

[squni]

glad it worked