Jump to content

How to link static image into module .tpl file


Recommended Posts

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 by Rybaris
Edited for better problem understanding. (see edit history)
Link to comment
Share on other sites



 

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"

  • Thanks 1
Link to comment
Share on other sites

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 :]

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...