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.

0

I was implemented it for images, which shows lists of images inside a container like pdf viewer..I just overide the css property of bloc gallery class, and adding an additional class...

.image-list{
    position: relative !important;
    padding-bottom: 140% !important;
    overflow: hidden !important;
    border: 1px solid #ddd !important;
}
.blocks-gallery-grid{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    bottom: 0;
    right: 0;
    overflow: hidden;
    overflow-y: scroll;
}
.blocks-gallery-grid::-webkit-scrollbar{
    width: 10px;
}
.blocks-gallery-grid::-webkit-scrollbar-thumb {
    background: #888;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgb(224, 224, 224);
}

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.