Slider/Carousel images not appearing in RSS feed

Help
1

I’ve noticed that images specified in Carousel do not appear in my RSS feed. There is only an empty unordered list.

This is unfortunate when the Carousel content are the main, or only, images in the post. People will be unaware they are missing important content.

Ideally the carousel images would show up in my RSS feed as a series of static images.

My repo is at
https://github.com/gingerbeardman/gingerbeardman.github.io

Blog post containing carousel is at
https://blog.gingerbeardman.com/2024/02/15/barbara-nessim-at-the-ginza-art-space-1986/

RSS feed is at
https://blog.gingerbeardman.com/feed.xml

2

I thought of making a change to add IMG tags inside the carousel list items:

<img class="carousel__staticimage" src="{{ item.image }}">

with a new class on those images that mean they will be hidden in the normal browser:

.carousel__staticimage {
  display: none;
}

But surprisingly the feed will no longer be read by RSS readers.

So close!

3

not an rss feed user so won’t be able to help much, but maybe you could add the images to the end in the feed file sort of like you add the carousel?

I see you have the carousel images listed in a data file, any reason you don’t just list them in the front matter? seems less complex.

my guess as to why they are not showing in the first place I think you already figured out, the carousel is using a background image css to show the file not an image tag.

Also one post I read said the images need the full absolut url which your img tag version doesn’t have, maybe that is the reason it doesn’t work?

4

Another place the carousel doesn’t work is in Reader-View (tested on Safari & FF). Like RSS readers, Reader-View strips CSS to only show the page content.

It looks like you’re using the Jekyll Codex Slider/Carousel, which doesn’t support progressive enhancement. I.e. it’s a purely ornamental carousel, invisible without CSS. Options are to try and fix the Codex carousel (as you’ve started), or find a carousel/gallery-viewer that supports progressive enhancement.

Since the post is about the postcard, it is important that the images are explicitly part of the post content. Then they can be progressively enhanced with a carousel or gallery-viewer built on top via classes, custom elements, etc. An example sketch of what it might look like:

- ![Postcard from Barbara Nessim’s residency at The Ginza Art Space, ...](....jpg)
- ![Reverse of postcard from Barbara Nessim’s residency at The Ginza Art Space, ...](....jpg)
{ .gallery-viewer }
5

not an rss feed user so won’t be able to help much, but maybe you could add the images to the end in the feed file sort of like you add the carousel?

Good sugegstion, but they need to be in place so they make sense.

I see you have the carousel images listed in a data file, any reason you don’t just list them in the front matter? seems less complex.

Simply an old habit and I’m lazy, I guess :slight_smile:

my guess as to why they are not showing in the first place I think you already figured out, the carousel is using a background image css to show the file not an image tag.

No need to guess, that it exactly the reason.

Also one post I read said the images need the full absolut url which your img tag version doesn’t have, maybe that is the reason it doesn’t work?

That does indeed seem to have been the issue! Thanks @rdyar

Odd because in my carousel image definitions, my images are all full paths.

Anyway, I am now prepending the base url to the static images that appear in the page. So the images show in raw HTML and RSS XML, and in the browser they are hidden and the carousel kicks in with the background image equivalents. Horrible, truly, but it works.

<div class="carousel__track">
  <ul>
    {% for item in site.data.carousel[page.carousel] %}
    <li class="carousel__slide" style="background-image: url('{{ item.image }}');"><img class="carousel__staticimage" src="{{ item.image | prepend: include.sbaseurl }}"></li>
    {% endfor %}
  </ul>
</div>

@chuckhoupt I’m not sure I see a solution in your reply, you seem to have simply re-stated my problem and situation. or have i missed something? I don’t mind converting all my carousels into something new, but I don’t have a replacement at this point.