The next tag/version of Hippo CMS will have an updated image browser. The images can now be displayed both as List or a Thumbnail Grid, see the screenshots below.
The Grid View is implemented using simple css and ul tags. Here’s an example of the HTML/CSS that is used to convert a ul with images into a Grid:
|
1 2 3 4 5 6 7 8 |
<ul class="gallery-list"> <li class="gallery-item"> <img src="image.png"/> </li> <li class="gallery-item"> <img src="image2.png"/> </li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
ul.gallery-list { display: block; overflow: auto; } ul.gallery-list li { list-style: none outside; float: left; margin-right: 5px; margin-bottom: 10px; margin-top: 10px; width: 100px; height: 100px; text-align: center; } ul.gallery-list li img { vertical-align: middle; padding: 5px; border: 1px solid #eee; width: 60px; height: 60px; } |
There are some nice image management features planned for Hippo CMS, so stay tuned for the updates.
Posted in:
Programming
Sweet improvement!
Sweet improvement!
Sweet improvement!
Sweet improvement!
[…] heeft in een blogpost over de image browser al een kleine verbetering laten […]
[…] heeft in een blogpost over de image browser al een kleine verbetering laten […]