Is there a way I could display images horizontally using the rich text whereby they would auto scroll. Or anything close to that. as I can see html can do something related to that if only the rich text component would accept it.
Any help will be highly appreciated.
<marquee direction="left" scrollamount="5">
<img src="https://thispersondoesnotexist.com/" style="width:100px; height:auto; border-radius: 50%; display: inline-block;">
<img src="https://thispersondoesnotexist.com/" style="width:100px; height:auto; border-radius: 50%; display: inline-block;">
<img src="https://thispersondoesnotexist.com/" style="width:100px; height:auto; border-radius: 50%; display: inline-block;">
</marquee>
Marquee is deprecated though, it’s still working but if it breaks you might have to find an alternative.
Keyframes would have been much better and more reliable, but you can’t use it with HTML inline styling, only CSS.
2 Likes
@ThinhDinh that worked fine but there is empty space after the scrolling is done before the next scrolling happens.
Is this applicable
<div style="text-align:center; font-style:italic;">Scroll to left for more picture</div>
<div class="scroll-container">
<div class="gridscroll">
<!-- PLACE YOUR IMG URL HERE -->
<img src="2"/>
<img src="2"/>
<img src="2"/>
</div>
</div>
Where 2 is data on my table.
When I apply it as it is the images appear vertically.
Kindly help
Where did you get that snippet of code from? There are parts missing. It’s referring to CSS classes, but your snippet does not contain any CSS for those classes, so it doesn’t have any of the styling that would make the image horizontal or scrolling. All you really have is a DIV container with 3 images inside of it. There is nothing telling the images to be horizontal or to scroll.
A lot of the more complex stuff like that requires separate CSS stylesheets and/or javascript to actually work. We can’t use either inside a rich text component. The best we can do is use HTML with Inline CSS, which becomes a bit less flexible.
Okay am trying to avoid how glide image component looks that the user have to click on the side buttons to view next image and also be able to click on the image and that image takes you to that image details.
Any support will be highly appreciated.
Being able to click on the image to go to the details screen, as far as I aware, is out of the question for this.
Right. Best bet would be to use a collection > grid style > set horizontally.
1 Like
I’ve dabbled with creating a gallery slider that uses a Rich Text component with only HTML and Inline CSS, and that was capable of allowing me to enlarge each image. I was able to create something that was OK. It worked…I could swipe through images and tap on each one to enlarge it, but it was not great due to several limitations. Glide is sorely missing the option to enlarge images in the current gallery, even though they had the option in classic apps. Seems like a very trivial feature that should just exist without having to ask for it.
To have something that would look and function well, you would need separate CSS Stylesheets instead of Inline CSS. You would also possibly need Javascript. Only the addition of a CSS Stylesheet and/or Javascript would allow for a smooth user experience and allow for automatic scrolling, and in any case, the only way to implement something like that would require an embedded web view. If you are using a web view, you lose the ability interact with the app, such as clicking on an image to open another page in the app. So at this point, you would have to choose between having something with automatic scrolling but no ability to use it to navigate through the app, or have a way to click on images to navigate through the app, but without the nice gallery or automatic scrolling.
Basically, what you want is a no-go. You might be able to hack your way to something close, but it won’t be exactly what you want, and at that point you are way too deep into various workarounds. At this point, I would reconsider your options and look for a different flow.
3 Likes
Will that work with images too? The images are in a column not as a row. For an item.
Sure images talks a lot when it comes to website. And apps how they look makes a big difference. Glide needs to work on this one so as to avoid the code thing which really needs a lot of time to feature it.
1 Like
Ah. You’d need to use the miracle method to “transpose” the images, then:
Transpose Columns to an Inline List: The Miracle Method
1 Like