Hippo CMS Image Browser Update

April 9, 2010 by Vijay Kiran

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.

Grid View

List View

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:

<ul class="gallery-list">
    <li class="gallery-item">
        <img src="image.png"/>
     </li>
     <li class="gallery-item">
         <img src="image2.png"/>
      </li>
</ul>

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.