Example post

    This post shows how various media (mainly images) are styled by default in Zonelots.

    made with @nex3's grid generator

    Images

    Images scale down if they're wider than the main column, but otherwise keep their original size.

    Manga panel of a man saying “I am a scientist who has trusted in human science and industrial civilization. But what now?” Manga panel of a man saying “I am a scientist who has trusted in human science and industrial civilization. But what now?” Manga panel of a man saying “I am a scientist who has trusted in human science and industrial civilization. But what now?”

    Galleries

    Image galleries are sets of images. The images are cropped to be square, and the more images there are, the more columns the gallery has (up to a point). Here's a gallery with one image:

    With 2–4 images, there are 2 columns:

    With 5–9 images, there are 3 columns:

    And with 10+ images, there are 4 columns:

    Each gallery is an ordered or unordered list with the class gallery. Each image is wrapped in a list item element. The code looks like this:

    <ul class="gallery"> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> </ul>

    The CSS handles the scaling automatically depending on the number of list items.

    Zonelots doesn't include a lightbox feature, so galleries are best used in situations where readers don't need to see the image in detail inline in the blog post (they can always download the image or view it in a separate tab if they want the full version).

    Iframes

    Iframes fit inside the main column, even if they would be wider. For example, this iframe (Drawing Garden) is set to 1000 pixels wide, but the main column is 800 pixels wide including the padding and border, so the iframe is reduced to fit: