VVJS slideshow appearance

In issue https://www.drupal.org/project/vvjs/issues/3480190 🐛 Bugs with vvjs slideshow Active I posted several screen captures of slideshows developed using the VVJS module. Most of the features in the VVJS module seemed to be working properly. I created Gallery content types which contained multiple images and could use the formatting features built into the module and the associated view to display the module. I could set up a menu with a links to the slideshow(s) and then click on the link and see a properly formatted slideshow (with dots or numbers to help scroll through the images). I thought I was ready to promote this to testing on my "real" site where I have many menus and slideshows and where I could demonstrate progress more publically (than just with screen captures). This was going well: I could flip between my Wampserver site (local on my PC) and my hosted production site (fkelly.org). I even created a test gallery content type and modified a menu item to point to that. It seemed to be working well, though needing refinement. You can even see a primitive version at:

https://fkelly.org/web/avignon

But somewhere in the updating process relating to Drupal 10.3.7 and 10.3.8 and 10.3.9 (all of which came out within a week and which fouled up Drush for me) and vvjs 10.0.8 ... the special formatting features of vvjs got lost.

What you see in the link I posted is basically a series of images formatted by the vvjs view. The formatting (dots or numbers) that lets you step through the slides is gone.

I will go back to my local system and see if I can find any solutions or determine what I might have done wrong. But the formatting, for now is also lost on the local system. I may even revert back to vvjs 10.0.7 and see if that restores things.

I experimented with manually reverting the vvjs.js and vvjs.css changes that were made on November 18. I seem to be able to restore some of the formatting and I can restore the working of contextual links embedded in a menu but all is still not good. The formatting with dots and numbers doesn't work. Since I don't fully understand the code, that's not surprising and why it is best kept on my local system for experimentation. The link out on my "production system" (using vvjs 1.08) works with a contextual link to a particular gallery but loses the formatting that was present in 1.0.7.

The reversions shown in:

https://git.drupalcode.org/project/vvjs/-/commit/d16924b6f3e25df405c845c...

do not seem to be part of 1.0.8 but are present in the dev release. I have the dev release installed on my local system. But the slideshow with the "dots" or numbers reflecting the slides does not work properly.

Slideshow appearance features are not working with the VVJS example view. See the file named capture_album.png in files. I can correctly generate a view of a particular named "gallery" content type (in this case using the filters content type = gallery and title = 2009-10) but the slideshow formatting (dots, numbers etc) is lost. It looks like the reversion may have been part of a work in progress?

Found 1.0.9 this morning. Updated to it and enabled it locally. Uploaded 1125_1.09. png file showing results. Still not getting vvjs formatting with numbers or dots next to images to take effect. The png files shows both the menu with contextual links for gallery content types I'm trying to use and a truncated display of the images. The images themselves, both in the view preview screen and on the menu screen just display vertically concatenated one above the next.

For what it's worth, I updated vvjc this morning to 1.08 and the formatting for that appeared to work a little better. However, vvjc is not what I'm after right now. I have tried all the options I can see for the vvjs to set the formatting for numbers and dots and none of them seem to be being applied.

The approach being taken in vvjs is just what I need ... especially with no dependencies on other code.

Update: going back thru the video intro. to this and working back and forth between my live site and my local site, I have made some progress in formatting the slideshow produced by the view in the vvjs format.

I will post again when I have the time to follow up more. It will be a few days before I can get to it. Thanks for your patience.

Resuming experimentation. If I start with a "fresh" copy of the view provided by the vvjs module named VVJS Example I can successfully generate a slideshow using the formatting features provided by the module ... i.e., arrows next to slides (Slide Navigation Arrows), the slide indicators (numbers or dots), the time in seconds for each slide to show, etc.) But at some point, when I try to set up filtering ... say to filter on a specific title of a gallery item, all the formatting gets "lost" and all I get is a display of slide images with none of the vvjs formatting applied.

On further testing: pretty sure that putting in a filter for the Slideshow title breaks the formatting for numbers, dots, arrows etc. So, if in your filter criteria you have

Filter criteria
Addfilter criteria
List additional actions
Content: Published (= Yes)
Content: Content type (= gallery)

the slideshow will work properly but if you add in a filter on the title as per:

Filter criteria
Addfilter criteria
List additional actions
Content: Published (= Yes)
Content: Content type (= gallery)
Content: Title (= Avignon)

The slideshow formatting features get suppressed. You still get a set of images that belong to the gallery content type with the title of
"Avignon" but no formatting features. Interesting: when you go to set up the filter criteria in the view the list of filters looks like:

"Update Title Title Content
Update Title (field_title) Title (field_title) Content Appears in: gallery."

In structure/content types the Title field only appears in my gallery content type and has the machine name "field title". The title field itself is only shown in the view as being part of generic "content" ... but that field ("title" as opposed to "field title") has to be used as a filter and it returns the slides (images) that belong to the correct gallery (but of course causes problems, somehow) with the slideshow formatting.

For practical purposes I would almost always want to present slideshows for one title at a time.

On further testing: pretty sure that putting in a filter for the Slideshow title breaks the formatting for numbers, dots, arrows etc. So, if in your filter criteria you have

Filter criteria
Addfilter criteria
List additional actions
Content: Published (= Yes)
Content: Content type (= gallery)

the slideshow will work properly but if you add in a filter on the title as per:

Filter criteria
Addfilter criteria
List additional actions
Content: Published (= Yes)
Content: Content type (= gallery)
Content: Title (= Avignon)

The slideshow formatting features get suppressed. You still get a set of images that belong to the gallery content type with the title of
"Avignon" but no formatting features. Interesting: when you go to set up the filter criteria in the view the list of filters looks like:

"Update Title Title Content
Update Title (field_title) Title (field_title) Content Appears in: gallery."

In structure/content types the Title field only appears in my gallery content type and has the machine name "field title". The title field itself is only shown in the view as being part of generic "content" ... but that field ("title" as opposed to "field title") has to be used as a filter and it returns the slides (images) that belong to the correct gallery (but of course causes problems, somehow) with the slideshow formatting.

For practical purposes I would almost always want to present slideshows for one title at a time.

... Looking at the code in vvjs.js it appears that the variable totalSlides might have an ambiquous meaning when the user is trying to present several slideshows at once. When I don't filter by a slideshow title, I get several slideshows presented consecutively with numbers, dots and arrows working properly for each. But when I do filter, the slideshow formatting gets lost. Retaining the formatting is good but I don't think that there is really a use case for presenting a bunch of slideshows consecutively with one "running" of the view. If that makes any sense.

Toggling the section

   {# Only show navigation elements if there are more than one slide
    {% if total_slides > 1 %}#}

at the bottom of views-view-vvjs.html.twig that turns off formatting for slideshows seems to work for turning the formatting on and off seems to work on my local system but I doubt that it's the "correct" solution. It gets down to a discussion of use cases and how people want to use the vvjs module. In my case I would almost always just present one slideshow (that is is one set of slides from one of my gallery content items with one specific (and unique) title field). And users would initiate this from a menu item somewhere on the site that would link to a contextual filter that uses that title field as a link ... probably with a URL alias to that content type item.

But I can see "use cases" where people might want several slideshows from one running of the view. Probably toggling the formatting on or off based on the number of slides is not the most "robust" approach.

When creating a slideshow in Drupal 10, there are two distinct approaches, which often cause confusion:

Slideshow from Nodes: In this approach, each slide is a separate node. For example, if you have a content type like "Article," each article node can represent an individual slide in the slideshow. This is managed by creating a View that pulls multiple nodes and displays them as a slideshow.

Slideshow from a Multi-Value Image Field: Here, a single node contains an image field with multiple images. The slideshow is created by rendering all the images from that single field as individual slides. This approach is useful for cases like a gallery or product page, where all images are associated with one piece of content.

Understanding the distinction is essential because the setup and use cases differ significantly. The Views Vanilla JavaScript Slideshow (VVJS) is a "Slideshow from Nodes" and it is suited for content-heavy slides, while the "Multi-Value Image Field Slideshow" is ideal for displaying image galleries. https://www.drupal.org/project/field_slideshow →

Best wishes,
Alaa