Ideal-Image-Slider w/ Includes on post excerpts

Help
1

This “topic” is different than “Ideal-Image-Slider w/ Includes Implementation” where this post deals with image sliders in post excerpts.
While the ideal-image-slider (iis) is working on a collections.projects post, as in the post “losPinos-jekylliis”, it is not working in excerpts on projects’ home page. When I say projects, I mean my projects collection, not my website as a whole project.

My projects’ home page is basically the work.md file which uses the projecthome.html layout. I’m calling the slider_scripts.html include at the bottom of my footer on every page. If the

The slider_scripts.html looks for image_sliders on each page and pages where image_sliders_load_all yaml frontmatter is set to true, then, puts all the image_sliders into an array called iis_slider_array. If iis_slider_array is not empty iis javacripts are called and a selector iterates over the iis_slider_array.

I declare these variables multiple times in the slider_scripts.html to see if they contain data, and as you can see in chrome dev tools, they do. Yet when the slider_scripts.html include is called on the projects’ home page, it throws off an unexpected token error on line 199 and even though work.md has the yaml frontmatter image_sliders_load_all set to true someway, somehow, slider.selector turns up null or undefined, and I don’t know why.

I’m looking for help in this matter, and any is much appreciated.

TL;DR: ideal-image-slider w/ includes (iis) is working in collection posts, but doesn’t work in excerpts, e.g.; projects’ home page

2

the error on line 199 is that you have:

 var  = new IdealImageSlider.Slider({
      selector: '#',
      });
    .start();

you need to give the var a name?

GH seems to be down at the moment so I can’t see where this is in your repo.

here is more context of where that is in your page:

</footer><!-- Jekyll Ideal Image Slider Include -->
<!-- https://github.com/jekylltools/jekyll-ideal-image-slider-include -->
<!-- v1.8 -->
  <!--{"selector"=>"losPinos_slider", "captions"=>true, "bullets"=>true, "images"=>[{"src"=>"/assets/img/projects/losPinos/0509_LosPinosMaster@1to2000_36x36_BE.jpg", "alt"=>"Los Pinos - Oblique Axonometric"}, {"src"=>"/assets/img/projects/losPinos/1003_Collage01_Master.png", "alt"=>"Interior Courtyard Collage"}], "settings"=>{"height"=>"'auto'", "maxHeight"=>500, "effect"=>"'fade'"}}-->
  <script src="/minima/assets/js/iis/ideal-image-slider.min.js"></script>
  <script src="/minima/assets/js/iis/iis-bullet-nav.js"></script>
  <script src="/minima/assets/js/iis/iis-captions.js"></script>
  <script>
  /*{"selector"=>"losPinos_slider", "captions"=>true, "bullets"=>true, "images"=>[{"src"=>"/assets/img/projects/losPinos/0509_LosPinosMaster@1to2000_36x36_BE.jpg", "alt"=>"Los Pinos - Oblique Axonometric"}, {"src"=>"/assets/img/projects/losPinos/1003_Collage01_Master.png", "alt"=>"Interior Courtyard Collage"}], "settings"=>{"height"=>"'auto'", "maxHeight"=>500, "effect"=>"'fade'"}}*//**/
    var  = new IdealImageSlider.Slider({
      selector: '#',
      });
    .start();
  </script></div>
  </body>
3

@rdyar yea, var needs to be assigned the slider.selector by the iterator in slider_scripts.html

While it does get assigned in the post “losPinos-jekylliis” page and the iis_slider_array prints

"los_slider "

it prints

<!--{"selector"=>"losPinos_slider", "captions"=>true, "bullets"=>true, "images"=>[{"src"=>"/assets/img/projects/losPinos/ObliqueAxon_Artboard-2_TOAAInterlace.png", "href"=>"/assets/img/projects/losPinos/ObliqueAxon_Artboard-2_TOAAInterlace.png", "title"=>"Los Pinos", "alt"=>"Oblique Axonometric"}, {"src"=>"/assets/img/projects/losPinos/InteriorCourtyardCollage.png", "alt"=>"Interior Courtyard Collage"}], "settings"=>{"height"=>"'auto'", "maxHeight"=>500, "effect"=>"'fade'", "transitionDuration"=>0}}-->

in the work.md page

I’m not sure the reason why.

4

ok, I think I am following about 75% of what you are doing but it is a little confusing as you have a lot going on - the slider include is referencing data from a data file that then uses stuff in a collection file.

It works on a page where you display a collection item, but the same exact thing does not work on a page where you show a list of collection excerpts?

It may be that the excerpt doesn’t have access to the data file? I am not sure. But if you think about all the different things jekyll is doing, the order in which they are done can influence what you can do - ie maybe when you are using an excerpt the system doesn’t loop thru the data files? not sure that makes sense though as it is still a page where you are doing this.

As someone trying to help it would be easier to have a simpler example - like it is hard to go look at a page and then see that the code is really in a layout, and then that layout is being processed thru another layout and then including another file. The more of it you can put in one place the better when it comes to troubleshooting.

Based on your post above and now that I see the var is supposed to be set by liquid, and that liquid code is referencing something from site.data I think you need to investigate that more.

What you are trying to do is interesting - include images in the excerpt and then load those into an image slider. Not sure I have seen that before. At a glance the code seems overly complicated though maybe that is needed, no idea.

I would put everything into one page - with the layout only doing html things not loading js. Then work backwards from hardcoding the whole thing, then using it as a collection, then if that works try the excerpts. I guess you have already done the first 2.

5

^^^ correct ^^^

I’m aware I’m not being as thorough and clear as I can be, but the only thing I’m actually trying to do is to implement this repo. I know there are a lot of different pieces of code in different locations and you have to go take a look at them individually and it’s annoying, it is, I know :grin:

Yet, that’s what the repo tells me to do, so I’m only trying to follow the instructions. Anyhow, thank you for sticking around, I’m going to give this task a rest for now and focus on other parts.

6

Alright updated to Jekyll ~>4.2 and things are working the way I want. Didn’t do anything differently other than upgrading and employing this github action to deploy a Jekyll website to github pages, but yea would have been nice if gh-pages supported jekyll 4.0+ already… Here is the site for now…

7

I am facing the same error, can you help me pls @rdyar @BerkhanEminsoy