Javascript Question posted in
A very good W3school tutorial can be found here.

How to use image ressource from sitepackage in javascript file in TYPO3 12?

Within a TYPO3 12 website I use the Sitepackagebuilder to create a sitepackage.

The Resources are structured as following:

Resources
  ...
  Public
    JavaScript
      scripts.js
    Icons
      arrow.png
    ...

Within my scripts.js I would like to access an icon from the Icons-folder (arrow.png) to use it with the slick slider as follows:

 $slider.slick({
   infinite: true,
   slidesToShow: 3,
   arrows: true,

   // Does not work due to script compression:
   prevArrow: "<button class='slick-prev slick-arrow' aria-label='Previous' type='button'><img src='../Icons/arrow.png'></button>",

   // I would like to access it like this (but it does not work):
   prevArrow: "<button class='slick-prev slick-arrow' aria-label='Previous' type='button'><img src='EXT:sitepackage/Resources/Public/Icons/slider-left.png'></button>",

   // Using the icon from fileadmin does work:
   prevArrow: "<button class='slick-prev slick-arrow' aria-label='Previous' type='button'><img src='fileadmin/Icons/slider-left.png'></button>",
 });

Does anybody know how to use an image ressources from the sitepackage within javascript in TYPO3?

Tags:

2

Answers


  1. 0

    I’d say that there is no elegant solution. I would include the _asset path with the hash e.g. like this:

    prevArrow: "<button class='slick-prev slick-arrow' aria-label='Previous' type='button'><img src='/_assets/23c138f87ce1b0461e894a8dcbbb57d6/Icons/arrow.png'></button>",

    The hash in the URL is an md5 on a relative part of the path. As long as the vendor name of your composer package does not change you’re safe. Also for deployments that hash is no problem.

    See here how the hash is created.

    Login or Signup to reply.
  2. 0

    I would suggest using some css to add your arrow with a pseudo element:

    .slick-prev::before {
  content: url(../Icons/slider-left.png);
}

    You can then use a relative path. TYPO3 will adjust the relative path to work if you compress or concatenate the css.

    A background image could also be an option, depending on your requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search