0

Sorry if this question derives subjective answers. I figure that asking on WP-SE makes this a little more forgivable. If I had asked on SO I would have had to explain why I couldn't change the block markup.

I have some large (wide) images that I would like to be scrollable. They need to be responsive and I would also like them to have a border across the whole of the scrollable image and the caption to not be scrollable. This rules out applying below css to the figure.wp-block-image

    <figure class="wp-block-image scrollable"> 
       <img class="wp-img">
       <figcaption>
         Something about the image
       </figcaption>           
    </figure>



   .scrollable{
     border: 5px solid black;
     overflow: auto;
   }

As the caption would also be scrolled.

I figure there are two realistic potential options.

1: Build a new Gutenberg Block as a plugin. This would enable me to wrap the image in a div. I have already had some success with this but am a little worried about using it live as I am not a very experienced block developer and it has not been tested. Perhaps it is overkill.

2: Not sure on whether this is possible or not. I'll probably make a stack-overflow question on this later. I have seen similar q's but specifically about text.

https://stackoverflow.com/questions/45624147/use-pseudo-element-to-overlay-a-scrolling-div

Could I use CSS and pseudo selectors to achieve the desired affect? IE a scrollable image but not scrollable caption

There are quite a lot of these across the site, so it's important that they work, are easy to maintain and implement.

I'm happy with the Gutenberg block I have. It just seems wrong if I could apply my own additional-css-class to the basic img-block.

Apologies if this question isn't to the community standard, I know it's really a CSS question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.