Slick slider thumbs not showing in wordpress theme

Question

I'm making a custom WordPress theme with pinegrow editor and I'm using slick slider for my slides (not the WordPress plugin!). Here is the code of one item of my slider with custom dot thumb:

<div class="item" data-thumb="images/realmix/products/fresh-energy.png">
    <div class="row productz">
        <div class="col-md-7 col-lg-7 doesle col-sm-5 col-xs-12">
            <img src="images/realmix/products/energy-panel.png"> 
        </div>        
    </div>
</div>

and this is the php code i get from that code snippet from exporting the wordpress theme:

<div class="item" data-thumb="images/realmix/products/fresh-energy.png">
    <div class="row productz">
        <div class="col-md-7 col-lg-7 doesle col-sm-5 col-xs-12">
            <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/realmix/products/energy-panel.png"> 
        </div>
    </div>
</div>

now the problem is my slider dot images won't get loaded because pinegrow does not convert the data-thumb src into php.

Trying to add the php echo at the data-thumb like this:

data-thumb="<?php echo esc_url( get_template_directory_uri() ); ?>images/realmix/products/fresh-energy.png"

does not work when i upload to wordpress, still shows no images How can i fix that by myself?

Answer 1

Not sure i'm following your correctly. I'll update if I am off track.

Maybe try using get_bloginfo('template_url') function instead?

data-thumb="<?=get_bloginfo('template_url)?>/images/realmix/products/fresh-energy.png"

This will go to the immediate child images folder in your current theme folder.

---

In relation to your comment on questions/64405779 linking to this question, for that script to work with your php, would be as follows...

<div class="slider">
    <div class="item" data-thumb="<?=get_bloginfo('template_url')?>/images/realmix/products/fresh-energy.png">
        <div class="row productz">
            <div class="col-md-7 col-lg-7 doesle col-sm-5 col-xs-12">
                <img src="<?=get_bloginfo('template_url')?>/images/realmix/products/energy-panel.png" alt="" /> 
            </div>
        </div>
    </div>
    <!-- next slides here -->
</div>

And the script would be...

// my slick slider options
const options = {
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  adaptiveHeight: true,
  autoplay: true
};

// my slick slider as const object
const mySlider = $('.slider').on('init', function(slick) {

  // set this slider as const for use in set time out
  const slider = this;
    
  // slight delay so init completes render
  setTimeout(function() {

    // dot buttons
    let dots = $('.slick-dots > LI > BUTTON', slider);

    // each dot button function
    $.each(dots, function(i,e) {

      // slide id
      let slide_id = $(this).attr('aria-controls');
      
      // custom dot image
      let dot_img = $('#'+slide_id).data('thumb');
      
      $(this).html('<img src="' + dot_img + '" alt="" />');

    });

  }, 100);


}).slick(options);

and the css would be the same from questions/64405779