// Post Image

$post_image = thesis_post_image_info('image');
echo $post_image['output'];

// Thumbnail

$post_image = thesis_post_image_info('thumb');
echo $post_image['output'];

• 1:1 from 0.9950 to 1.0050
• 1:2 from 0.4980 to 0.5020
• 2:1 from 1.9810 to 2.0190
• 2:3 from 0.6587 to 0.6746
• 3:2 from 1.4737 to 1.5273
• 3:4 from 0.7412 to 0.7590
• 4:3 from 1.3125 to 1.3548
• 4:5 from 0.7925 to 0.8077
• 5:4 from 1.2353 to 1.2651
• 9:16 from 0.5558 to 0.5693
• 16:9 from 1.7406 to 1.8166

To compute the aspect ratio of your image, divide the width by the height. For example, an image which is 420px wide by 280px high has an aspect ratio of 3:2:

420 ÷ 280 = 1.5 = 3:2

Aspect Ratio Calculator ∞

If you’re having some trouble figuring out your image’s ratio – or you just never got over your dislike of math! – try out our handy calculator.

Enter the width and height of your image, and the calculator will tell you which Thesis Aspect Ratio your image matches (or, if your image’s size is not supported, you’ll get a message to that effect instead).

In the “Name” field, type image_source, and in the “Value” field, paste the URL you wish to use to link to as the attribution/source.

Click the “Add Custom Field” button; and then the “Publish/Update Post” button.

Then, place this code in custom_functions.php:

function image_source() {
global $post;
$source = get_post_meta($post->ID, 'image_source', true);
  if ($source)
    echo '<p><a href="' . $source . '" rel="nofollow" target="_blank">Image Source</a></p>';
}

add_action('thesis_hook_after_post','image_source');

Note: After the first time you add the image_source custom field to a post, you’ll then be able to simply choose it from the drop down selector under “Add new custom field”, rather than having to choose “Enter new” again.

Standard Widgets all receive the class of .widget assigned to them, so this can be used whenever you want to apply the same styles to every widget. Here are some examples:

/* Make all widget headings red */
.custom .widget h3 {
   color: red;
}

/* Specify bottom padding on all widgets */
.custom li.widget {
   padding-bottom: 15px;
}

/* Specify bottom margin on all widgets */
.custom li.widget {
   margin-bottom: 2.769em;
}

Apply Styles to Individual Widgets ∞

To style individual widgets, first determine their unique class or ID by viewing the source code of a page on your site (or using FireBug). For example, here’s the opening code for the Categories widget on the Answers blog:

<li class="widget widget_categories" id="categories-411758441"><h3>Categories</h3>

So, to style that specific widget, we can reference it like this in custom.css:

.custom li.widget_categories h3 {
   color: green;
}

Or, we could alternatively use the unique ID:

.custom li#categories-411758441.widget h3 {
   color: green;
}

The ID method is particularly useful when you have multiple text widgets on the page, and need to distinguish between each one. Here’s an example of the opening code for a text widget:

<li class="widget widget_text" id="text-280006071"><h3>Random Text Widget</h3>

So, to style that text widget in custom.css, we’d use this:

.custom li#text-280006071.widget h3 {
   color: yellow;
}

Style Archive Drop Down Widget ∞

Place this code in custom.css, and adjust to your requirements:

.custom li.widget_archive select {
   border: 1px solid red;
   color: blue;
   font-size: 1.5em;
}

Specify Image as Heading ∞

This is an example using the ID of the Random Text Widget from above:

.custom li#text-280006071.widget h3 {
   height: 46px;
   background: url(images/twitter.png) no-repeat;
   text-indent: -9999px;
}

Note that the image is being stored in the custom/images/ folder.

Also, remember that you’ll still need to determine the unique class or ID for each widget, as noted under Apply Styles to Individual Widgets, and use it in the selector name in your CSS rule.