Level Four Heading. Underlined
OK, so images can get quite complicated as we have a few variables to work with! For example the image below has had a caption entered in the image upload dialog box, this creates a [caption] shortcode which then in turn wraps the whole thing in a div
with inline styling! Maybe one day they'll be able to use the figure
and figcaption
elements for all this. Additionally, images can be wrapped in links which, if you're using anything other than color
or text-decoration
to style your links can be problematic.
The next issue we face is image alignment, users get the option of None, Left, Right & Center. On top of this, they also get the options of Thumbnail, Medium, Large & Fullsize. You'll probably want to add floats to style the image position so important to remember to clear these to stop images popping below the bottom of your articles.
Additionally, to add further confusion, images can be wrapped inside paragraph content, lets test some examples here.
And then... Finally, users can insert a [gallery], which is kinda ugly and comes with some CSS stuck into the page to style it (which doesn't actually validate, nor does the markup for the gallery). The amount of columns in the gallery is also changable by the user, but the default is three so we'll work with that for our example with an added fouth image to test verticle spacing.