For the past couple of weeks I’ve been learning how to build responsive Web sites, a process that is simple in principle, but complex in practice once you get down to the nitty-gritty.
As I want to use this blog as a means for sharing knowledge and information that other developers might find useful, allow me to present my first such post, designed to solve the problem with how to display images within WordPress posts and pages on responsive Web sites.
What is a responsive Web site?
For anyone unfamiliar with thm, responsive Web sites are sites that adapt and change their layout to fit the size of the device they’re viewed on.
This site, for example, is a responsive Web site, and employs responsive techniques which enables it to switch between three different layouts:
- Desktop – which has two main columns.
- Tablet – where the right column drops below the main content, and the width of the site drops.
- Mobile – everything is in a single column which spans the entire width of the device.
If you’re using a desktop computer, try resizing your browser and you’ll see the site switch between the three layouts as the window gets smaller.
As I’m sure you can imagine, due to the fact this requires designing and building multiple layouts, building a responsive site is hard work, especially once you come up against the issue of trying to display the same content on an ever decreasing screen size.
Responsive images
Anyway… One issue that I encountered while building this site was that of images embedded into posts and pages.
I had already designed both the desktop and tablet layouts to have the same width content area, meaning I can use the alignment options offered by WordPress, and know exactly how they’re going to look on two of my three layouts.
But what about the mobile layout? This is a bit more difficult to handle as the width of the device is variable. There had to be a simple way of handing this issue?
Requirements
The first thing I wanted was to remove any left or right alignments of images in the mobile layout, and instead force them onto their own line with a centre alignment. This is because on a screen that is potentially no more than 480 pixels wide, the last thing you want is a 300 pixel image sat to the right of the content you’re trying to read.
I also wanted to make sure that the images on the mobile layout are displayed at an intelligent size. For example, images that are smaller than the width of the browser should display at their native resolution, but images larger than the width of the browser should resize down to fit.
Finally, I needs to use Mobile First techniques to make the site as accessible as possible.
Solution
Below is the code that I’ve produced to solve these issues. It is based on the required WordPress Generated Classes CSS, but modifies it to allow for the behaviour described in the requirements above.
I’ve tested it as much as I can, and so far as I can tell, it works exactly as intended, but if you can find any problems with it, or can offer any suggestions on how to improve it, please let me know.
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | /* =================================== WordPress Images =================================== *//* * Mobile First */a img.aligncenter{ display: block; margin-left: auto; margin-right: auto;}.wp-caption,figure{ background: #fff; border: 1px solid #f0f0f0; max-width: 96%; text-align: center; padding: 5px 5px 10px;}.wp-caption p.wp-caption-text,figcaption{ font-size: 11px; line-height: 17px; margin: 0; padding: 10px 4px 0;}img.alignright,img.alignleft,img.aligncenter{ float: none; max-width: 100%; height: auto; margin: 1em auto; display: block;}.wp-caption img,.wp-caption.alignright img,.wp-caption.alignleft img,.wp-caption.aligncenter img,figure img,figure.alignright img,figure.alignleft img,figure.aligncenter img{ margin: 0 auto; max-width: 100%; height: auto;}.wp-caption.alignright,.wp-caption.alignleft,.wp-caption.aligncenter,figure.alignright,figure.alignleft,figure.aligncenter{ float: none; max-width: 100% !important; height: auto; margin: 0 auto;}/* * Tablet and up*/@media only screen and (min-width: 768px) { .wp-caption.alignright, figure.alignright { margin: 5px 0 20px 20px; } .wp-caption img, figure img { border: 0 none; height: auto; max-width: 98.5%; width: auto; margin: 0; padding: 0; } .aligncenter, div.aligncenter, .aligncenter, figure.aligncenter { display: block; margin: 5px auto; } .alignright, a img.alignright { float: right !important; margin: 5px 0 17px 17px !important; } .alignleft, a img.alignleft { float: left !important; margin: 5px 17px 17px 0 !important; }} |
Figures
You may have noticed the above code featured the new HTML5 figure and figcaption tags. Although WordPress doesn’t automatically support the figure tag, it is possible to have WordPress use figure in place of its own caption solution by adding the following to your theme’s functions.php file (which was adapted from code in this article):
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | add_shortcode('wp_caption', 'twentyten_img_caption_shortcode');add_shortcode('caption', 'twentyten_img_caption_shortcode');function twentyten_img_caption_shortcode($attr, $content = null){ $options = array( 'id' => '', 'align' => 'alignnone', 'width' => '', 'caption' => '' ); extract(shortcode_atts($options, $attr)); if (1 > (int) $width || empty($caption)) { return $content; } if ($id) { $idtag = 'id="' . esc_attr($id) . '" '; } return '<figure ' . $idtag . 'aria-describedby="figcaption_' . $id . '" style="width: ' . (10 + (int) $width) . 'px" class="'.$align.'">'. do_shortcode($content) . '<figcaption id="figcaption_' . $id . '">' . $caption . '</figcaption></figure>';} |
