Images

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.

girl-field

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. Aenean dui. Nulla facilisis. Nullam ultricies, nisi id auctor lacinia, nulla ipsum dapibus orci, id pharetra enim massa ut elit.

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. Aenean dui. Nulla facilisis. Nullam ultricies, nisi id auctor lacinia, nulla ipsum dapibus orci, id pharetra enim massa ut elit.

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. Aenean dui. Nulla facilisis. Nullam ultricies, nisi id auctor lacinia, nulla ipsum dapibus orci, id pharetra enim massa ut elit.

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. Aenean dui. Nulla facilisis. Nullam ultricies, nisi id auctor lacinia, nulla ipsum dapibus orci, id pharetra enim massa ut elit. Aenean dui. Nulla facilisis. Nullam ultricies, nisi id auctor lacinia, nulla ipsum dapibus orci, id pharetra enim massa ut elit.


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. Aenean dui. Nulla facilisis. Nullam ultricies, nisi id auctor lacinia, nulla ipsum dapibus orci, id pharetra enim massa ut elit.

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. Aenean dui. Nulla facilisis. Nullam ultricies, nisi id auctor lacinia, nulla ipsum dapibus orci, id pharetra enim massa ut elit.

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. Aenean dui. Nulla facilisis. Nullam ultricies, nisi id auctor lacinia, nulla ipsum dapibus orci, id pharetra enim massa ut elit.

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

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: