Image Styling on Semiomantics XO

February 16th, 2012 // 8:21 am @ Yorgo Nestoridis

Image Borders, Padding, Captions on XO Theme
Thumbnails on WordPress

There are two kinds of thumbnails produced on your XO site: the native WordPress thumbnails and the thumbnails generated by XO for the purpose of display throughout the theme where the WordPress thumbnails don’t fit.

WordPress Thumbnails

Thumbnail sizes are set in your dashboard under Settings > Media. When we change the thumbs’ sizes, the change will apply only to new content. These thumbnails are used by default in the XO Basic Home Page Layout.

In order to modify thumbnails created previously to a change in WordPress settings, we use the “Regenerate Thumbnails” plugin; install from your dashboard and then just run it: this will create thumbnails corresponding to the new WP Media settings for all images in the library and galleries.

The Regenerate Thumbnails plugin will have no impact on syndicated posts unless you also pull in the images to your library when syndicating.

XO Theme Thumbnails

When we upload an image from our dashboard in XO, XO creates 12 thumbnails adapted to the needs of the site and stores them in the default uploads folder for faster loading. If we change the layout settings in XO advanced home page settings, or if we change thumbnail sizes under the layout settings, the previously created thumbnails may not fit anymore.

Using the Regenerate Thumbnails plugin will create a new set of thumbnails corresponding to the new settings. Syndicated content will not be altered by the plugin, unless you pull in the images while syndicating and store them in your library.

Styling Image Display in XO

Basically we are looking at two elements: the image and the caption.

Also XO allows for different styling of images

Yorgo Logo

inserted into a post and galleries or images and thumbs used in Custom Formats, such as Images and Gallery Posts.

The example shows XO default style which sets borders with rounded corners, a background and some padding.

These settings can easily be modified with custom CSS, for example by adding and customizing a CSS3 property, such as some shadow:

.storycontent img{border:1px solid #666666;padding:5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.9) inset;padding:10px;}
.storycontent img:hover {opacity:0.7;}

This example uses inset box-shadow and a hover effect decreasing opacity by 30%.

For box-shadow to work in IE, we use the PIE support:

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-pie-box-shadow: 0 1px 1px #ccc;
behavior: url(“http://typography.ycademy.net/wp-content/themes/typography/PIE.php”);

The example pulls in the PIE script; as done in previous examples (on the menu) make sure that you load the PIE.php and PIE.htc files into your child theme and link to the absolute or relative URI with the behavior property.

Captions

Captions can be customized by modifying the following selectors, for example:

.wp-caption,.wp-caption p.wp-caption-text, .gallery-caption {text-align:center;background:none !important;font-size:14px;}

You could of course chose a font-family, display the text with a reduced, fixed width or pull the caption into the image using a semi-transparent background and a negative top-margin. The limit is … your imagination.

Gallery Thumbnails

To style Gallery Thumbnails just customize, for example:

.gallery-thumb img,
#maincontent .pformat img {
margin: 0;
padding: 10px;
border: 1px solid #333;
background: #eee;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width: auto\9; /* IE 8 Hack */
}