ThemeShaper Forums » Thematic

thumbnail size revisited

(2 posts)
  • Started 5 years ago by MaxiesGal
  • Latest reply from MaxiesGal
  • This topic is resolved
  1. I posted this in what I noticed is a 'resolved' topic, so am posting it here, as its unclear to me how it was resolved !

    Okay ! I'm hoping that someone can please help a frustrated CSS/PHP n00b with clarification of exactly what sections of functions.php and stylesheet.css you make changes to, in order to resize your thumbnails.

    I want my thumbnails to be 3 across and the same width/length as is found at the mixcss.com site. I noodled around with Firebug and Chrome's 'inspect element' but the lightbulb isn't going off yet.

    I found 4 instances of thumbnails in functions.php at 125x125 and 1 instance in stylesheet.css at 125x125.

    When I changed all of them to 304 x 160, the images overlapped. Is this where positioning: relative and absolute (which I still don't understand) comes into play ???

    Thanks in advance for your help !
    Cat

    Posted 5 years ago #
  2. Okay here's a step by step for my fellow n00bs when you want to resize the default 125x125 thumbnails in the 'Gallery' theme.

    I wanted to exactly mirror the way the thumbnails appear in the 'Gallery' theme Demo, as it appears at mixcss.com, with only 3 thumbnails across.

    Open your style.css (stylesheet.css in WP Dashboard):

    To resize the WIDTH & HEIGHT of the medium grey colored boxes that form the borders around each thumbnail image, find:

    .not-singular .entry-content a{
    border: 3px solid #191919;
    display: block;
    height: 125px;
    width: 125px;
    overflow: hidden;
    position: relative;
    background-color: #191919

    -- experiment with the 'height' and 'width' lines here. I changed my dimensions to width: 250 x height: 150 and got my 3 thumbnails across.

    -- NOTE: once you change the 'height' the nice white words that appear in the lower left corner of the thumbnail when your mouse hovers over the image are likely going to be hidden. See my post on how/where to fix this.

    CLOSE the 'style.css' file and OPEN the 'functions.php' file.

    Do a search/find for 'thumbnail':

    You'll find FOUR instance of code resembling this:

    "><span class="slide-title"><?php echo the_title(); ?></span><img class="thumbnail" src="<?php if(get_post_meta($post->ID, 'thumbnail')){echo get_post_meta($post->ID, 'thumbnail', $single = true);} else{bloginfo('url'); echo "/wp-content/themes/gallery/images/thumbnail-default.jpg";} ?>" width="250" height="150" alt="<?php echo the_title() ?>" />

    -- since you've established the 'height' and 'width' pixel amounts from your experiment with the medium-grey BORDER (above), enter those pixel amounts into ALL FOUR 'height' and 'width' instance you find from your 'thumbnail' search results.

    CLOSE the 'functions.php' files.

    You MIGHT have to make minor changes to settings via your WordPress Dashboard to get your thumbnails to display in the number and arrangement you desire.

    In your Dashboard, at the left-side panel, scroll all the way down to 'settings.'

    Select 'reading'

    In the 'reading settings' window, you'll see: Blog pages show at most

    Experiment with the number entered here to see how your thumbnails display.

    Voila !
    Cat

    Posted 5 years ago #

RSS feed for this topic

Reply

You must log in to post.