Bugs with vvjs slideshow

details ...

The content type named gallery displays properly with a title and four images arranged vertically below the title. (I am trying to eventually use the title and content type of "gallery" as views filters).

Using the vvsj example view leads to errors and does not display the slideshow properly using the Format:
Views Vanilla JavaScript Slideshow | Settings

The filters for content type = gallery and content title = 2009-10 work properly in the view.

However the styling for the view requested in settings in Format:
Views Vanilla JavaScript Slideshow | Settings

are ignored. These settings would arrange the four images horizontally with < and > on the left and right sides of the images to allow horizontal scrolling through a list of images.

In the process of testing this I encountered PHP errors with the hero slideshow option as from the PHP error log:

[11-Oct-2024 11:07:31 America/New_York] Uncaught PHP Exception Error: "Call to a member function setErrorByName() on null" at C:\webpage\compg_6\web\modules\contrib\vvjs\src\Plugin\views\style\ViewsVanillaJavascriptSlideshow.php line 328

This happens when "force using fields" is not requested and a hero slideshow is. This error may not be related to the main thrust of this bug report but still should be resolved. The variable $form_state at line 328 of ViewsVanillaJavascriptSlideshow.php is not defined.

More serious, even when a hero slideshow is not requested, there are still ajax errors being generated when switching back and forth between a "normal" slideshow and a hero slideshow. After trying to switch to a hero slideshow I get "Error message
Oops, something went wrong. Check your browser's developer console for more details. " and the screen freezes. I have to manually click the error message screen closed. On the developer console I get:

"Uncaught Drupal.AjaxErrorUnderstand this error"

/admin/structure/views/ajax/display/vvjs_example/default/style_options?_wrapper_format=drupal_ajax:1

Failed to load resource: the server responded with a status of 500 (500 Service unavailable (with message))Understand this error
js_UkjpasEXtOWw58FysL0ZsdSW_iR_cR9W6OBzRDhV-2s.js?scope=footer&delta=0&language=en&theme=claro&include=eJx9j1EOwyAMQy9E4Qw7SeWGqMqWAYK06_E3VaMS-9hXrGfHUSgn48M2aIh1K1BPF5lU0qM5ypW7CTLZ-TQGHgWaV487joE3g_FYYViUY8XqduFXmzcJXXjEp6QhTVkVpbEjRc2dJuzTp6c5y1kX1PCdjv6900M_S54bofDtvL3IOhcpHLp4A1f0b9I:250 Uncaught Drupal.AjaxError

After closing the developer console, I can get back to the view editing screen and rerun my requested "not hero" slideshow. But this still does not apply the styling that should be associated with "Format: Views Vanilla JavaScript Slideshow | Settings" in the view.

Hello,

Regarding the issue at https://www.drupal.org/project/vvjs/issues/3476868 💬 Demo suggestions Active , I previously mentioned:

For your website, each Juicebox gallery content includes a slideshow feature, similar to what is provided by the ImageField Slideshow module. This allows you to create a slideshow from multiple images within a single field. With VVJ Suite, the modules filter across different types of content, paragraphs, and blocks, enabling each node, block, or paragraph to contain its own image. One view can be used across unlimited content, as long as the content architecture is flexible and structured for easy manipulation.

To clarify further:

1. ImageField Slideshow Module/Juicebox Gallery Content with Slideshow Feature: Each Juicebox gallery can include a built-in slideshow similar to the ImageField Slideshow module, allowing for a slideshow within a single image field containing multiple images.
2. VVJ Suite Functionality: The VVJ Suite modules allow filtering across different types of content, such as paragraphs and blocks. This enables individual elements like nodes, blocks, or paragraphs to each have their own unique image associated with them.

In conclusion, there are two main ways to build a slideshow on your website. The first approach uses the Juicebox gallery or ImageField Slideshow module to create a slideshow from multiple images within a single content piece. The second approach, facilitated by VVJ Suite, builds a slideshow from multiple content pieces, each containing a single image.

Best wishes,
Alaa

I will look into the ImageField Slideshow module. Thanks for the reference.

The VVJ suite contains unparalled capabilities, I am sure. But I have to start slowly and get things working incrementally.

Following up on the previous posts I loaded up the VVJ suite carousel module. In five minutes I had a basic carousel slideshow working. The settings from the view applied immediately and I could get a carousel based slideshow with the four images I mentioned previously working. The view settings from the slideshow version of the module did not work.

I am fairly sure that the settings for the view are not being correctly passed from the slideshow module. Simple enough to test, create a content type with a handful of images, do some settings for them and see if the settings are applied.

The statement "the first approach uses the Juicebox gallery or ImageField Slideshow module to create a slideshow from multiple images within a single content piece" may be technically true, but it oversimplifies the situation. I have hundreds of content pieces which are each individual galleries and can't be mixed and matched. Each of them has a single link that's placed on (and can be accessed from) a menu.

Hello,

Simple enough to test, create a content type with a handful of images, do some settings for them and see if the settings are applied.

Thank you for sharing your testing approach! However, VVJS is actually designed to create slideshows from multiple content items, not from an image field with multiple images. I recommend trying it out with different content items as slides to see how it works. This approach should align with VVJS’s functionality and showcase its capabilities effectively.

You can check out the demo for examples of the various types of slideshows you can create. In VVJS, each slide represents a separate content item.

Best wishes,
Alaa

Thanks. I installed the ImageField Slideshow Module and it works. It could be a solution. Or its formatting capabilities could be part of a solution.

However, I decided to have another go at the VVJS module. I know that in other contexts I have retrieved and displayed multiple content items including images from a view. I started with a content item with four images and moved on to one with (for stress test purposes) 20 images. I had to adjust PHP settings to accommodate the 20 images request.

But they worked. What's nice is that even in the Gallery with 20 images, I get a main image displayed with a row of thumbnails below it that are clickable. And below the thumbnail items there are "prev next" links. Almost no effort to get at least a starter level gallery working. I could also select the images from a list of images with basically one click since I already had them in a single directory in sites/ default/ files.

And in the manage display tab of structure / manage display / format I can use the Imagefield Slideshow formatter on the image field and have to gallery content type automatically transition through the 20 images while setting the transition times etc. There are many options and learning to use them properly will take some experimentation and time. The key thing for me is that I can quickly move from a bunch of images in a Juicebox gallery to having the same bunch of images in a gallery content type and have the software scroll through the images. And I can leave my existing images in sites/default/files intact without making media copies and just reuse them. And given that the gallery images are already in a logical gallery structure in the order I want, it is just a few minutes work to make a working gallery this way.

Not to put too fine a point on it, but I uploaded another file: slideshow capture from view. This builds on the slideshow that is generated from the "pure" gallery content type and which uses the Imagefield Slideshow formatter from within that content type. No need for a view at all with that approach but still another module to maintain and update.

Using the VVJS module and a view we can display a different version of the slideshow. This uses:

Format: Views Vanilla JavaScript Slideshow | Settings
Show: Fields | Settings

together with a couple of filters to just get the gallery content type with a specific title.

With some tweaks, this display is a bit "prettier" than the Imagefield Formatter. I and also create a Page from this view which could be used as a link on a menu.

Obviously we don't want a separate copy of the view for each gallery so it will be necessary to find a way to get contextual filters into the menu items that are outside the view.

I'm not sure if I am not misunderstanding you when you say: " VVJS is designed to create slideshows from multiple content items, rather than from an image field with multiple images" but having a content type instance with multiple images seems to work just fine.

Bug report only: back in #2 I reported:

'In the process of testing this I encountered PHP errors with the hero slideshow option as from the PHP error log:

[11-Oct-2024 11:07:31 America/New_York] Uncaught PHP Exception Error: "Call to a member function setErrorByName() on null" at C:\webpage\compg_6\web\modules\contrib\vvjs\src\Plugin\views\style\ViewsVanillaJavascriptSlideshow.php line 328

This happens when "force using fields" is not requested and a hero slideshow is.

On my test system I modified the function validate to read:

public function validate() {
$errors = parent::validate();
if ($this->options['hero_slideshow'] && !$this->usesFields()) {
if (isset($form_state)) {
$form_state->setErrorByName('hero_slideshow', $this->t('Hero Slideshow option requires Fields as row style.'));
}
}
return $errors;
}

where there is an isset check around $form_state.

I wonder if you could see if this makes sense in this context.

I am taking the liberty of re-opening this for review.

#1 ... as the screen shots I have uploaded show, you can put multiple images in a given content type item and have them show as a slideshow. From my perspective this is great. The slideshow that is generated from vvjs view works very well ... at least for now. I am working on figuring out how to pass a parameter from a menu to the contextual filter on the view to allow different slideshows to be generated from the view.

#2 ... the implicit bug report relating to

  public function validate() {
    $errors = parent::validate();
    if ($this->options['hero_slideshow'] && !$this->usesFields()) {
      if (isset($form_state)) {
        $form_state->setErrorByName('hero_slideshow', $this->t('Hero Slideshow option requires Fields as row style.'));
      }
    }
    return $errors;

is still relevant and at least merits a review. The php error is reproducible on my local system.

For what it's worth. I have been working on this. I had to transition my local web site (running on wampserver) over to using the latest Solo version and make the transition to using a subtheme (using tszl as the name) in a custom directory and get a primitive but semi-functional block layout working. Then make the vvsj view respond to contextual links so that I could summon up one of two galleries I have running, from a menu and depending on user input on the menu. This works using the advanced contextual links on the views page so a user can select whichever (of the two I currently have running) gallery they want. The goal is to have many galleries that users can access and view through a menu. It is a proof of concept at this point but it seems to work ... I wasn't sure that I could link a menu through a view to a user-selected gallery.

The slideshow from view png file I uploaded shows this "in action". The view part is on the left and the slideshow that is selected from this view is on the right. It is cycling through the slides.

Obviously there is a lot of work to get 100 + galleries working this way, but since I already have the jpg files organized in a directory structure that corresponds to the gallery structure I want, it is not insufferable.

Hello,

The "force using fields" feature has its place in Views, but I wouldn't recommend it with Views Slideshow. The descriptions for the two slideshow types on the homepage.

Two Slideshow Types: Offers two types of slideshows: one based on view mode that can include multiple fields, and a hero slideshow requiring a row style with the first field as an image or responsive image. Create a prominent, full-width slideshow with large images and overlaying content, perfect for showcasing key visuals at the top of a webpage.

There's a potential issue with the validate() method when using "force using fields"—the $form_state variable is being used without being properly declared or passed into the function. In Drupal, the FormStateInterface object ($form_state) is essential for setting form errors, but it isn’t automatically available in this context. I updated the validate() method accordingly so $form_state is now handled properly.

Best wishes,
Alaa

I loaded up the dev. release ... thanks! My slideshows (two of them so far) are working well on what is very much a test page. I can create a link to them on a menu and then whichever link is chosen will show the appropriate slideshow using the view and contextual filters.

I am working towards having the Solo sub-theme be the primary theme code that I use but I need to get the appropriate menu code in the right places. Traveling for the next week so progress will be slow. At this point I have very little use for Hero slideshows although I know they will be popular in some "use cases".

Automatically closed - issue fixed for 2 weeks with no activity.