Slick Image Gallery

Hello, this component does not work for the published page. I understand that you need to add the appropriate code to the component’s CSS, but I’m not a programmer. Tell me what code to prescribe so that the gallery is displayed on the published page.

No, the gallery is not shown on the published page

Hello. The slick gallery component does not work for a published page. Can this be configured somehow?
Sorry for repeating myself. This question is important to me. :pray: :pray: :pray:

That’s not surprising. Published pages have an entirely different way of getting rendered. Or so I think from seeing some discussion here, though I haven’t looked at the code well enough to understand, much less explain, just what is involved.

Somehow? Probably. Easily, no. My guess is that you’d need to fork the gallery theme component to get it to work, but it may be that the published page is missing stuff that will take a plugin or some ajax calls to get it to work.

Sorry for an answer that’s not helpful, but you wanted an answer.

2 Likes

I have 1 suggestion about being able to support embedding videos or embedding videos from youtube. As well as displaying the thumbnail image below (And users can turn this feature on and off)

I’m trying to use this component with the Material Desing Theme. I upload images and the post looks like this:

![E80C8313-CC87-49DA-8C98-C29B561777C9_1_105_c|690x496](upload://i1A81mLYHp7rNIoMtbc6QlwDq3d.jpeg)
![D1DF48E1-8518-491E-A89D-C2197FCCF5A4_1_105_c|666x500](upload://l7XF3m1b0fV4dqjU3IrXM0sz69o.jpeg)
![D22C6994-AC07-418D-AFCC-E676355F24AF_1_105_c|666x500](upload://4B5mQjnF8wos9P8hZPFTH3DLjpF.jpeg)

When I select all the images (text) and hit the Slick button if created div sections for each image.

<div data-theme-slick="1">

![E80C8313-CC87-49DA-8C98-C29B561777C9_1_105_c|690x496](upload://i1A81mLYHp7rNIoMtbc6QlwDq3d.jpeg)

</div>
<div data-theme-slick="1">

![D1DF48E1-8518-491E-A89D-C2197FCCF5A4_1_105_c|666x500](upload://l7XF3m1b0fV4dqjU3IrXM0sz69o.jpeg)

</div>
<div data-theme-slick="1">

![D22C6994-AC07-418D-AFCC-E676355F24AF_1_105_c|666x500](upload://4B5mQjnF8wos9P8hZPFTH3DLjpF.jpeg)

</div>

If I edit the post so the images are all within the same div then it works as it should. I’m on the latest version of Discourse and the theme. Any idea what’s cusing this behaviour?

After Ember v5.5.0 upgrade this component is causing an error:

:warning: Posts may not display correctly because one of the post content decorators on your site raised an error.
Caused by ‘Slick - Gallery Component’. [Click here] to update, reconfigure or disable.
(this message is only shown to site administrators)

Tried reinstalling, and also inspected the settings editor for errors, nothing resolves the problem.

3 Likes

I can reproduce the issue, I see the error Uncaught ReferenceError: jQuery is not defined — will tag this as broken until someone has time to fix it.

6 Likes

People may want to consider core’s Introducing image grids in posts feature as an alternative.

5 Likes

We occasionally use it too, it’s nice. But we already have many posts in the gallery style that are not displaying at all. Setting aside the effort to manually append them, I wouldn’t even be able to track them all down :melting_face:

4 Likes

With all due respect, this is not what we were told. From what I had read here over the last few weeks, the promise was:

I understand things take time. I can wait. However, I wouldn’t even be upgrading today if there were official themes/plugins, contrary to Discourse team’s initial guidance, that I am now told to stop using. In the meantime, is there a way to revert to the previous version of Ember?

1 Like

Just an FYI, but this theme component is not an official theme component.

You can see all the official ones here: https://meta.discourse.org/tags/c/theme-component/120/none/official

2 Likes

Maybe years ago before I had installed it:

https://github.com/hnb-ku/Discourse-Slick-image-gallery

It was later added to the official Discourse repo, actually.

https://github.com/discourse/Discourse-Slick-image-gallery

Personally, I would keep non-official components outside of your official repo. Just a thought.

1 Like

Generally, the official tag would take precedence as we may have some that are in the Discourse repo that we don’t want to consider ‘official’.

That said, I can check if there’s been an oversight in this case.

5 Likes

I get the feeling this theme component is going to stay broken under Ember 5.0. I have it installed and am getting the admin warning banner but it’s not used extensively. I can’t see anything on Meta from @Johani for well over two years and his profile is hidden. If you’re out there Joe, let us know if you have plans to maintain this component.

1 Like

Looks like there’s some jQuery shenanigans going on. Newer versions of Ember don’t ship jQuery by default. I’ll need to take a better look but Slick (the underlying library) relies on jQuery. we probably should move to a vanilla JS implementation anyway.

I’ll try to squeeze in a fix that keeps the same functionality / interface sometime this week.

13 Likes

Agree it would be great to move to a vanilla JS implementation! :100: (although perhaps… that should just be core’s new masonry gallery implementation? And this theme component would just be a shim for the syntax to keep old sites working?)

Anyway, in the meantime, this small tweak should get things working under Discourse’s Ember 5 build: FIX: Support Discourse's Ember 5 build by davidtaylorhq · Pull Request #17 · discourse/Discourse-Slick-image-gallery · GitHub

6 Likes

How i can change a bg color?

1 Like

Related, sort of, to this post. Would it be a good alteration to the theme component to remove/clean any CR/LF so it doesn’t create a gallery for each image? I know that if you use the Upload button it doesn’t do that, but alot of times I will drag & drop images into the post. In order for them to all be in one gallery, I have to remove the CRLF’s after each image:

Cheers,

1 Like