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)

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More