Using Images in Basic Maths

Basic Math’s minimalist design is intended to let your images sing, and the comprehensive layout grid that underlies its structure makes it easy to place those images seamlessly into each post. This article gives you an overview of what’s possible and what’s recommended, and it also details the CSS classes that can be applied to get your images placed just where you want them. Before diving in, remember this handy trick: just type control+shift+G on any page when using Basic Maths to reveal the grid layer for easy reference.

Recommended Image Placements

Big images look great in Basic Maths, especially when they run the full width of the text area, including the large column on the left. The recommended way to do that is to make your images 620 pixels wide and to use the alignnone and size-large classes, as in this example.

alignnone size-large

Narrower images also look great, of course. The following image is 440 pixels wide, spanning the width of the main text column. The alignnone and size-medium classes have been assigned to it.

alignnone size-medium

When using smaller images it can be helpful to nest them inside paragraphs, as in this example. This image is 170 pixels wide, but this placement works well for images up to 260 pixels wide. The classes alignleft and size-thumbnail have been applied to it.

alignleft size-thumbnail

Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis. Aliquam vehicula urna vitae nibh. Sed in lacus nec dui bibendum posuere. Aenean dui. Nulla facilisis. Nullam ultricies, nisi id auctor lacinia, nulla ipsum dapibus orci, id pharetra enim massa ut elit. Nam sit amet erat. Nullam lobortis lorem id nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat.

These same classes also work for nesting much smaller images. The example below is just 70 pixels wide. This size and placement can be especially useful on your home page when used in the first paragraph, as it can give users a small preview of the images that might appear after the jump on your posts.

alignleft-size-thumbnail-mini

Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis. Aliquam vehicula urna vitae nibh. Sed in lacus nec dui bibendum posuere. Aenean dui. Nulla facilisis. Nullam ultricies, nisi id auctor lacinia, nulla ipsum dapibus orci, id pharetra enim massa ut elit. Nam sit amet erat. Nullam lobortis lorem id nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat.

Nesting images on the left side of the paragraph is recommended because it produces a much more pleasing wrapping effect with the typography. But on occasion, you may need to nest an image on the right side. In those instances, you can assign to your image the classes alignright and size-thumbnail, as in the example below. This image is 170 pixels wide, but as with the left-nested image above, these styles will also work with images up to 255 pixels wide.

alignright size-thumbnail

Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis. Aliquam vehicula urna vitae nibh. Sed in lacus nec dui bibendum posuere. Aenean dui. Nulla facilisis. Nullam ultricies, nisi id auctor lacinia, nulla ipsum dapibus orci, id pharetra enim massa ut elit. Nam sit amet erat. Nullam lobortis lorem id nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat.

Sometimes you may want to simply center an image within the main text column. In those instances, you can assign the classes aligncenter and size-thumbnail, as shown below. Your image can be as wide as 440 pixels (if it’s exactly as wide as that, you should use the classes discussed above) or as narrow as 1 pixel.

aligncenter size-thumbnail

It’s also possible to position a narrower image so that it’s placed entirely outside of the flow of the main text column. To do that, make sure your image is no wider than 170 pixels, and assign the class hang-2-column. Of course, you’ll need to make sure that the text that appears to the right of such an image is runs long enough to vertically match or exceed the height of your hanging image.

hang-2-column-170

Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis. Aliquam vehicula urna vitae nibh. Sed in lacus nec dui bibendum posuere. Sed nibh ipsum, aliquam eu, tempor malesuada, sagittis nec, metus. Nulla facilisi. Maecenas diam magna, consequat a, blandit in, tincidunt aliquet, mauris. Nullam tempus sapien id elit. Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis.


Deprecated Image Placements

The placements above should handle the vast majority of your images, but in the case they don’t, Basic Maths offers a few alternatives that let you control placement more directly. However, you should use these classes sparingly, as they generally produce less attractive visual flows for your content.

The class hang-1-column will hang your image to the left of the main text column by 90 pixels (or one grid unit). In this example the image is 260 pixels wide.

hang-1-column

Mauris consectetuer malesuada augue. Sed tincidunt. Suspendisse in velit a enim viverra ultrices. Integer sit amet enim sit amet mauris pharetra tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dapibus, tortor vel ultrices accumsan, nisi libero laoreet nunc, a rhoncus mauris odio non erat. Proin vel turpis. Ut sollicitudin erat sed nibh. Ut sapien. Sed molestie, enim in tincidunt scelerisque, dolor massa lacinia erat, a elementum velit elit eu libero. Nulla tempor risus vitae tortor.

Similarly, the class hang-2-column will hang your image to the left of the main text column by 180 pixels (two grid units). As mentioned above in the section “Recommended Image Placements,” this class can be useful for placing an image entirely outside of the flow of the main text column. However, you can also use it for wider images, though again the result may be visually less appealing. In this example the image is 350 pixels wide.

hang-2-column

Mauris consectetuer malesuada augue. Sed tincidunt. Suspendisse in velit a enim viverra ultrices. Integer sit amet enim sit amet mauris pharetra tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dapibus, tortor vel ultrices accumsan, nisi libero laoreet nunc, a rhoncus mauris odio non erat. Proin vel turpis. Ut sollicitudin erat sed nibh. Ut sapien. Sed molestie, enim in tincidunt scelerisque, dolor massa lacinia erat, a elementum velit elit eu libero. Nulla tempor risus vitae tortor.


All Alignments

Following is an inventory of how all the alignment and size classes affect images when they’re assigned in various combinations.

NO Alignment

Etiam gravida tellus eu felis. Aliquam vehicula urna vitae nibh. Sed in lacus nec dui bibendum posuere. Sed nibh ipsum, aliquam eu, tempor malesuada, sagittis nec, metus.

alignnone size-large

Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis. Aliquam vehicula urna vitae nibh. Sed in lacus nec dui bibendum posuere. Sed nibh ipsum, aliquam eu, tempor malesuada, sagittis nec, metus. Nulla facilisi. Maecenas diam magna, consequat a, blandit in, tincidunt aliquet, mauris. Nullam tempus sapien id elit. Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis.

alignnone size-medium

Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis. Aliquam vehicula urna vitae nibh. Sed in lacus nec dui bibendum posuere. Sed nibh ipsum, aliquam eu, tempor malesuada, sagittis nec, metus. Nulla facilisi. Maecenas diam magna, consequat a, blandit in, tincidunt aliquet, mauris. Nullam tempus sapien id elit. Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis.

alignnone-size-thumbnail

Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis. Aliquam vehicula urna vitae nibh. Sed in lacus nec dui bibendum posuere. Sed nibh ipsum, aliquam eu, tempor malesuada, sagittis nec, metus. Nulla facilisi. Maecenas diam magna, consequat a, blandit in, tincidunt aliquet, mauris. Nullam tempus sapien id elit. Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis.

LEFT Alignment

Etiam gravida tellus eu felis. Aliquam vehicula urna vitae nibh. Sed in lacus nec dui bibendum posuere. Sed nibh ipsum, aliquam eu, tempor malesuada, sagittis nec, metus.

alignleft size-large

Curabitur rutrum. Nunc semper lorem eget sapien luctus tristique. Nam aliquam lobortis lectus. Aliquam at nisl at odio auctor pretium. Aenean mollis. Ut venenatis aliquam turpis. Sed ac felis molestie leo fermentum sodales. Ut non mauris. Proin vitae nulla non odio iaculis tempor. Mauris consectetuer malesuada augue. Sed tincidunt. Suspendisse in velit a enim viverra ultrices. Integer sit amet enim sit amet mauris pharetra tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dapibus, tortor vel ultrices accumsan, nisi libero laoreet nunc, a rhoncus mauris odio non erat. Proin vel turpis. Ut sollicitudin erat sed nibh. Ut sapien. Sed molestie, enim in tincidunt scelerisque, dolor massa lacinia erat, a elementum velit elit eu libero. Nulla tempor risus vitae tortor.

alignleft size-medium

Donec sed libero. Curabitur nisi ipsum, laoreet adipiscing, mattis vel, dapibus eu, odio. Maecenas ac lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut dapibus blandit lacus. Morbi fringilla tortor nec magna. Curabitur justo augue, ultricies sit amet, ornare ac, tempor nec, lectus. Aliquam nec magna sed velit mattis tincidunt. Proin eget magna. Aliquam id enim dignissim enim sollicitudin condimentum. Vestibulum eget libero ut lacus tincidunt tincidunt.

alignleft size-thumbnail

Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis. Aliquam vehicula urna vitae nibh. Sed in lacus nec dui bibendum posuere. Aenean dui. Nulla facilisis. Nullam ultricies, nisi id auctor lacinia, nulla ipsum dapibus orci, id pharetra enim massa ut elit. Nam sit amet erat. Nullam lobortis lorem id nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat.

CENTER Alignments

Ut venenatis aliquam turpis. Sed ac felis molestie leo fermentum sodales. Ut non mauris. Proin vitae nulla non odio iaculis tempor. Mauris consectetuer malesuada augue. Sed tincidunt. Suspendisse in velit a enim viverra ultrices. Integer sit amet enim sit amet mauris pharetra tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dapibus, tortor vel ultrices accumsan, nisi libero laoreet nunc, a rhoncus mauris odio non erat. Proin vel turpis. Ut sollicitudin erat sed nibh. Ut sapien. Sed molestie, enim in tincidunt scelerisque, dolor massa lacinia erat, a elementum velit elit eu libero. Nulla tempor risus vitae tortor.

aligncenter size-large

Ut venenatis aliquam turpis. Sed ac felis molestie leo fermentum sodales. Ut non mauris. Proin vitae nulla non odio iaculis tempor. Mauris consectetuer malesuada augue. Sed tincidunt. Suspendisse in velit a enim viverra ultrices. Integer sit amet enim sit amet mauris pharetra tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dapibus, tortor vel ultrices accumsan, nisi libero laoreet nunc, a rhoncus mauris odio non erat. Proin vel turpis. Ut sollicitudin erat sed nibh. Ut sapien. Sed molestie, enim in tincidunt scelerisque, dolor massa lacinia erat, a elementum velit elit eu libero. Nulla tempor risus vitae tortor.

aligncenter-size-medium

Donec sed libero. Curabitur nisi ipsum, laoreet adipiscing, mattis vel, dapibus eu, odio. Maecenas ac lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut dapibus blandit lacus. Morbi fringilla tortor nec magna. Curabitur justo augue, ultricies sit amet, ornare ac, tempor nec, lectus. Aliquam nec magna sed velit mattis tincidunt. Proin eget magna. Aliquam id enim dignissim enim sollicitudin condimentum. Vestibulum eget libero ut lacus tincidunt tincidunt.

aligncenter size-thumbnail

Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis. Aliquam vehicula urna vitae nibh. Sed in lacus nec dui bibendum posuere. Sed nibh ipsum, aliquam eu, tempor malesuada, sagittis nec, metus. Nulla facilisi. Maecenas diam magna, consequat a, blandit in, tincidunt aliquet, mauris. Nullam tempus sapien id elit.


RIGHT Alignment

Curabitur rutrum. Nunc semper lorem eget sapien luctus tristique. Nam aliquam lobortis lectus.

alignright-size-large

Aliquam at nisl at odio auctor pretium. Aenean mollis. Ut venenatis aliquam turpis. Sed ac felis molestie leo fermentum sodales. Ut non mauris. Proin vitae nulla non odio iaculis tempor. Mauris consectetuer malesuada augue. Sed tincidunt. Suspendisse in velit a enim viverra ultrices. Integer sit amet enim sit amet mauris pharetra tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dapibus, tortor vel ultrices accumsan, nisi libero laoreet nunc, a rhoncus mauris odio non erat. Proin vel turpis. Ut sollicitudin erat sed nibh. Ut sapien. Sed molestie, enim in tincidunt scelerisque, dolor massa lacinia erat, a elementum velit elit eu libero. Nulla tempor risus vitae tortor.

alignright-size-medium

Donec sed libero. Curabitur nisi ipsum, laoreet adipiscing, mattis vel, dapibus eu, odio. Maecenas ac lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut dapibus blandit lacus. Morbi fringilla tortor nec magna. Curabitur justo augue, ultricies sit amet, ornare ac, tempor nec, lectus. Aliquam nec magna sed velit mattis tincidunt. Proin eget magna. Aliquam id enim dignissim enim sollicitudin condimentum. Vestibulum eget libero ut lacus tincidunt tincidunt.

alignright size-thumbnail

Etiam nulla nisl, cursus vel, auctor at, mollis a, quam. Praesent tempor aliquet nulla. Fusce facilisis nisi laoreet massa. Nam tellus turpis, condimentum a, malesuada nec, mollis ac, nulla. Vivamus viverra. Etiam gravida tellus eu felis. Aliquam vehicula urna vitae nibh. Sed in lacus nec dui bibendum posuere. Sed nibh ipsum, aliquam eu, tempor malesuada, sagittis nec, metus. Nulla facilisi. Maecenas diam magna, consequat a, blandit in, tincidunt aliquet, mauris. Nullam tempus sapien id elit.

Follow

Get every new post delivered to your Inbox.

Start your WordPress.com blog with this theme.

Sign Up and Purchase$75.00
%d bloggers like this: