How to Change to Thumbnail Size in Thematic Gallery

  • Print this article
Thumbnails in Gallery Thematic use a combination of hard-coded values and CSS.
Thumbnails in Gallery Thematic use a combination of hard-coded values and CSS.

Gallery is a Child Theme for the WordPress framework, Thematic. It features image-based post links that can be used for photo galleries, photo blogs or portfolios. Thumbnail sizes in WordPress can be defined using CSS (cascading style sheet), but will fall back on hard-coded values in the template files or media settings, unless a special script is used to create thumbnail images on-the-fly. By default, Thematic avoids specifying thumbnail size throughout its template pages, and uses the WordPress thumbnail settings instead, which are set using the Media Settings page in the administration panel. The Gallery child theme specifies a width and height of 125px, which is the WordPress default, but you may notice that changing the WordPress thumbnail size has no effect.

Instructions

    • 1

      Download the Gallery theme folder to your desktop and open the "loop-thumbnail.php" file in an HTML or text editor. Change the image width and height on lines 29 and 33 to your desired values. For example, change line 29:

      echo '<img class="attachment-thumbnail" src="' .get_post_meta($post->ID, 'thumbnail', true) . '" width="125" height="125" alt="' . get_the_title() .'" /></a>';

      to:

      echo '<img class="attachment-thumbnail" src="' .get_post_meta($post->ID, 'thumbnail', true) . '" width="230" height="180" alt="' . get_the_title() .'" /></a>';

    • 2

      Open the "style.css" file and locate the ".not-singular .entry-content a" selector. Change the height and width to match the dimensions of your updated loop-thumbnail.php. Next, locate the "span.cover-up" selector and change the width to match the width of your new thumbnail. This class refers to the text area that appears when hovering over each thumbnail on the index pages.

    • 3

      Save both files and connect to your Web server. Rename the style.css and loop-thumbnail.php on the server to create a fail-safe backup in the event your modified files break your theme. Upload your edited versions to the main Gallery theme folder.

    • 4

      Activate the theme or reload the main page to view your changes. You will notice that yuor thumbnails are stretched out to the new dimensions. Go to your WordPress administration panel and change the thumbnail values under the Media Settings option to match your desired size. This will only apply to future image uploads, so you may need to re-upload images to posts already created.

Tips & Warnings

  • Use the Opera Browser or FireBug add-on for Firefox to access an "Inspect Element" option in your right-click menu, which allows you to easily isolate parts of the Web page to view the associated CSS styles.

  • For more control, implement the "timthumb" image script by adding it to the Gallery theme's "functions.php" file and updating the image paths in the loop-thumbnail.php file.

  • The "timthumb" script will take the full-sized featured image for a given post and dynamically create a thumbnail when the page is loaded, using your specified dimensions. The script acts independently of WordPress media settings or thumbnail sizes, and may be a better option if you are comfortable working with PHP.

Related Searches

References

Resources

  • Photo Credit Ablestock.com/AbleStock.com/Getty Images

Comments

Related Ads

Featured
View Mobile Site