My website has started to experience this weird bug. Images don’t show up in the block preview in the panel but show up when I go to edit the block. I have added a screenshot to illustrate, any idea what is going on?
I am on Kirby 3.8.1.
Is that a default gallery block without any customizations? Did this issue suddenly pop up, meaning, it worked until yesterday or some days ago?
Yes it is default. And I recently started happening, I thought it was just an isolated issue but it seems to have affect quite a few of my pages.
That’s really weird. Have you made any other changes than content changes recently, like updated Kirby?
First steps to try:
- Delete the media folder
- Clear the browser cache
I gave both of these steps a try but no luck. Not sure if this would help but this is the part in the content .txt file that is having an issue. Maybe the ids don’t match up to the files?
{"content":{"images":["file:\/\/mlzAh3UxMjaAbHwz","file:\/\/du2Qtt7S9SfF91y4"],"caption":"","ratio":"","crop":"false"},"id":"f867d2b2-fb12-4ce5-8559-6b7ea5523e58","isHidden":false,"type":"gallery"}]
can you take a screenshot of the expanded DOM tree (right click on the gallery block)? and then drill down until the dom elements for the images (src attribute etc), take a look at inspector as well to figure out what happened to the image in the gallery block preview.
So it seems to be the case that the images are loaded correctly, but the container is broken.
I don’t think I customised the block but if it has been where would that code live? (I’m not the only dev working on the site.)
So it seems like this is happening for every gallery block but I am not sure where the styling for this would live.
Here is a quick video i made going through the dom tree CleanShot 2023-04-19 at 08.47.04 · CleanShot Cloud
The code that messed things up, sorry for all the spinning. Totally user error!
.k-block-type-gallery
ul
display: block
white-space: nowrap
overflow: auto
li
display: inline-block
margin-right: 1rem
img
height: 500px
width: auto