Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

All images will be displayed when switching images (including light and dark mode). #1748

Closed
1 task done
huanyushi opened this issue May 14, 2024 · 5 comments · Fixed by #1883
Closed
1 task done
Labels
inactive No activity

Comments

@huanyushi
Copy link
Contributor

Checklist

How did you create the site?

Generated from chirpy-starter

Describe the bug

The image-switching feature was introduced in version 7.0.0.

When we specify images for both the light and dark modes separately within a post, we can switch to the next image using a button. However, it will display all images (regardless of whether they are for the light or dark mode) uniformly.

Steps To Reproduce

For example, if we have a post like

para1

![fig1](fig1-light.png){: .light}
![fig1](fig1-dark.png){: .dark}

para2

![fig2](fig2-light.png){: .light}
![fig2](fig2-dark.png){: .dark}

When we switch images using the button, the displayed image sequence is fig1-light.png, fig1-dark.png, fig2-light.png, fig2-dark.png.

Expected Behavior

I think that when switching images, only the images corresponding to the current mode are displayed. For example, when we are in light mode, the displayed image sequence is fig1-light.png, fig2-light.png.

Environment

  • Ruby: 3.2.1
  • Jekyll: 4.3.3
  • Chirpy: 7.0.0

Anything else?

Nothing.

@cotes2020
Copy link
Owner

Sorry, I don't understand what the "switching image" is, could you please provide a screenshot to illustrate the problem?

@kungfux
Copy link
Collaborator

kungfux commented May 25, 2024

If I understand correctly, the issue is about glightbox and the ability to view all images by "switching" to the next/previous image in the gallery.

Here is a live example https://chirpy.cotes.page/posts/text-and-typography/#darklight-mode--shadow. The post contains images created specifically for light and dark themes. If you open an image and toggle to next/previous, you will see an image not for the current theme in the gallery.

@huanyushi
Copy link
Contributor Author

Yes, what @kungfux said was exactly what I wanted to feedback on.

If you click an image on https://chirpy.cotes.page/posts/text-and-typography/#darklight-mode--shadow, you can see the next button,

image

If you click the button it will switch to the next image and you will see all images (regardless of whether they are for the light or dark mode).

@cotes2020
Copy link
Owner

I'm just keeping Glightbox's default behavior, to hide images that don't fit the theme mode, you may need to modify Glightbox configuration, or have Glightbox disable looping images, and just use its zoom.

Either way, you're welcome to submit a PR to help improve this!

Copy link

This conversation has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
inactive No activity
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants