[SDC] How to trigger popup?

I hope you can make it one way or another :)

> What I want to do is show the first image in a media field ...
Try CSS display:none for any field__item selector, or any relevant lightbox containers (li, .grid, etc.), except the first. That way you will see only the first item while the rest are hidden. Lightbox will continue working, hopefully :)

I ended up using drupal's ajax dialog and loading a view page configured as a slider.

I spent a lot of time on my last project building sliders according to designs we were given. I started with the Splide modules, hoping they would be a shortcut, but as you've seen my tickets I had some challenges in getting things just right.

Here are my thoughts on the experience, and an observation on module development. I appreciate all your contributions, so this isn't criticism, it's just my reflection on what worked for me.

I think the challenge is in creating integrations for systems. Here we want to work within the Drupal UI to configure Splide displays. The hard part is creating an interface that provides all the library's options in a clear way. It takes a lot of time and effort to build something with a lot of flexibility that's easy to use. I felt like I had to learn a lot about how the module was set up, and how to override things, instead of having a quick way to implement the things the library is capable of.

In the end, I used a custom views plugin and SDC components to build with the Splide library. It was easier for me to go from the Splide docs to the code vs trying to figure out the right configuration for the view/splide config. With a base SDC slider component, it was easy to customize the different displays I needed to build in code.

I did keep Blazy because I don't know how to do what it does to load the player/thumbnail/play button. And it was helpful that it's integrated with the splide module to stop the player on transition. I had to re implement that part myself since I didn't use the splide module. This is the kind of integration I do find very helpful though, since it saves a lot of time. There were also some styles that were helpful in some cases, but confusing when I also had my own.

In hindsight, the starting point for development I'd like to have is a collection of SDC components that are integrated with the library. I would copy the component closest to what I need and customize it from there. A separate slider module could provide generic field formatters, views plugins, and others like blocks and layouts that provide the content for the main slider and thumbnails that any slider SDC could plug into. We do have the splide examples module, but it's a bit of a leap to go from that config to what you need for your own. I'm thinking that if the modules were more component based, the provided examples would be the actual starting point for your development.

Thanks for all your work in this area. Your modules are still the most popular, so my views aren't necessarily right for everyone. SDC is still very new, but I am loving it so far. It's great for developers, and modules like SDC Display and SDC Block are making it much easier to integrate via the UI. I don't want to get rid of the Splide UI, rather see it developed further so we have both options and it's fast to configure or customize.

Noted, thank you.

One thing for sure: while some design challenges can be easily solved by mere CSS, and probably very minimal JS like the OP use case, they may also require extensive works of Twig, hook_alters, etc. depending on the complexity, of course.

> if the modules were more component based, the provided examples would be the actual starting point for your development.
Interesting and worth trying, indeed. Appreciated!

Mind providing 3-5 screenshots or samples of dummy designs that you have success with SDC? Or at least a single paragraph description about the task or challenge.

Your OP last paragraph is a very clear challenge sample, it has a Drupal field context with a requirement to display it based on the design. That would do, too.

I am interested in seeing the success stories of SDCs especially when it is in core already so I'll have a better idea about its use cases and the potentials of its integration in this or any modules I maintain.

I am also interested in seeing the failures or misses of traditional (pre-D10.1 SDC) approaches with your use cases. This part I may be able to explore after hearing your use cases.

Here's a module I put together with a splide component and some demo components made with it.

https://github.com/mortona42/splide_sdc

The slide component is self contained, with the splide library minified files in a directory. This could be a library dependency instead though.

There is a block you can place anywhere that will render 2 demos. So far they are just a minimal implementation and a basic slider with thumbnails.

If someone wanted to create a custom slider, they could copy the demo component into their own theme/module and modify it.

The most complicated feature was a video slider with thumbnails. On mobile, the thumbnails were horizontal below and on desktop they were vertical and to the right. I was able to configure the splide module display with breakpoints to switch the layout, and the module's provided layout options helped too. That, and the blazy video loading got me to about 80%.

The challenge from there was sifting through the layers to understand how to polish the rest. When I started with a fresh component, I was looking at the api documentation and could see any helpful implementation notes while I adjusted the JS. Going through the UI got me confused what was from the library vs added by the module, and I couldn't directly translate the docs into what I needed to do.

The CSS was pretty tricky for me, so I did a codepen and then wanted to apply that to the module, but that's when I went down the SDC route since it fit so well.

If you're interested in taking this further, it would be good to find a way to include all the little fixes in a way that's convenient to apply in drupal. Maybe the demo components could implement them with comments linking back to the docs for more info about why that line of css or js is there.

I'd like to have rebuild the difficult component I described, but I'm out of time for now. It's mostly css for a responsive grid and some adjustments to the js. I also did not have the thumbnails synced to the slider so you could scroll through them while a video is playing and not change the video until you click a thumbnail. That was something I don't think you can do with the module.

Thank you.

Actually I was expecting use cases in more atomic designs as said in #4, not changing the container template + preprocess (theme_splide()) into components. Losing the benefit of the theme_splide() will disintegrate it from Views and fields UI, and likely bring out more preprocess complication at its parent container, says node.html.twig.

AFAIK, the point of SDC is reusable micro components, not negating the current macro template + preprocess (theme_splide()) at container level otherwise that would risk unnecessary duplication given various skins and options and also variable complication.

Simply put, the theme_splide() is intact since it is required for versatility and consistency along with direct Views and field integrations, but its items (theme_splide_slide(), theme_splide_vanilla(), thumbnails, grids, etc.) can be more atomic to make them behave like components.

However I agree we should consider using SDC more when it is out of Experimental flag.

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