[ENG] Postachio hacks. How to add captions to images

You may have already noticed that Postach.io allows to add posts with .html files and Dropbox. This opens up many opportunities to design your blog. Now we have blog-platform with full support of HTML and CSS. But Today I teach you how to add captions to images.

Documentation about .html files and Dropbox is
here.

Figcaption

Figcaption tag allows to add caption to images. Here's an exmple:

Code is pretty simple:

There's only one problem when caption text is larger than image itself. We need to add line break for this case.

You can make it with CSS:

figure{display:table} figcaption{display:table-caption; caption-side:bottom}

display:table-caption - doesn't allow caption larger than image.

caption-side:bottom - indicates position of figcaption relative to image. There are four choices: top, right, bottom and left.

This little hack shows that now the look of your blog is limited only by your imagination and knowledge of HTML and CSS. If you have any questions related to the design of your blog, you can safely ask in the comments.

Source code and demo

Комментарии