On Drupal 8 / Zircon 8 theme I added a slideshow following the instructions on ttps://www.weebpal.com/guides/drupal-8-zircon-theme-guide-developers
Although the progress indicator(throbber) is working, the images are not visible.
Instead, in the banner above "undefined" is indicated.
Any idea what I'm missing ?

Comments

Zeshin’s picture

Did you ever figure out what was causing this issue, or how to fix it? I'm setting up slideshow in Zircon 8 right now and am experiencing the same problem.

Zeshin’s picture

I figured out the issue, like the OP here I was also following the weebpal instructions for setting up the Zircon slideshow, which unfortunately left out an important step for the configuration. I checked the zircon theme file js/slideshow.js and found the code that generates both the image file and the text for the slideshow:

	function fix_slider_html() {
		var parent = (jQuery)('#slideshow_container');
		var sliderContainer = (jQuery)(parent.children()[1]);
		var slider = (jQuery)('<ul class="slides"></ul>');
		sliderContainer.children().each(function (i, e) {
			var self = (jQuery)(this);
			var image = self.find('.views-field-field-slideshow img').parent().parent();
			var title = self.find('.views-field-title a').parent();

			var newElement = '<li>' + image.html() + '<p class="flex-caption">' + title.html() + '</p></li>';

			(jQuery)(slider).append(newElement);
		});
		parent.empty();
		parent.append(slider);
	}

Looking at the code, it grabs an already defined element in the page with ID "#slideshow_container", and then grabs the slideshow image and title by using their respective css class style names. However, it wasn't finding the class style for .views-field-field-slideshow img, thus the "undefined" text output in the slider. Now why wasn't it finding anything in .views-field-field-slideshow img? Looking at the name itself gives a good hint: it has to do with how the view fields for the slideshow image are configured.

The answer is that, although the weebpal guide instructs you to add "Content: Title" text field to the list of Fields in the Slideshow View, it forgot to instruct readers to also add the "Content: Slideshow" image field to the list of Fields so that it's also generated in the view, and thus available for manipulation by the slideshow javascript. So basically, go to the view you created for Slideshow, and under the Fields section click the Add Button, then find the Slideshow image field you created earlier in the guide and confirm to add it. After that the slideshow started working fine for me. Hope this helps anyone else!

jjgw’s picture

Sorry, I could not respond earlier due to travel abroad.
Earlier I also added the slideshow field to the view, but I was unable to make it working properly.
One time I had a rectangle without images but with the progress indicator, another time the images were showed one above another without progress indicator.
So it seems I'm doing something wrong, but I can't figure out what I am missing.

argiepiano’s picture

Thank you for the detective work. I'm now able to see the slideshow.