teaser image resize, the easy way

By BradM on 12 Apr 2007 at 19:07 UTC

There are numerous examples in the forums on how to resize images within the teasers, usually involving the installation of multiple modules, or adding some code here and there. All too much for my simple brain to figure out (let's just say there were a number of failed attempts on my part.)

So I went ahead and used CSS to resize images. Granted, it's not as pretty as the result I imagine the aforementioned methods will give you. These resized images are a little crunchy, and the full image is still loaded, so you're not saving any page load time with this method. However it's good enough for me for now, until a simple way to activate thumbnails in teasers is integrated into the core code.

Anyway, I added this code to my style.css file:

.shrink img {
	width: 45px; 
	height: auto;
}

This will resize the width of the image to 45px, and the height should scale appropriately (I think).

Next, I added the following code to my node.tpl.php file.

First off, this code will resize things such as user avatars. Replace:

<?php if ($picture) print $picture ?>

With this:

<?php if ($picture) {
     	if ($page == 0) {
   		print "<div class='shrink'>";
   		print $picture;
   		print "</div>";
   	} else {
   		print $picture;
   	}
}?>

Secondly, replace this code:

<div class="content">
    <?php print $content?>
  </div>

With this:

<?php
if ($page == 0) {
	print "<div class='shrink'>";
} else {
	print "<div class='content'>";
}
print $content
?>
</div>

Note that this second bit of code will resize all images within the teaser.

I'm new to all of this, and only have IE6/FF1.5 installed. I'd be interested to find out how this looks in other browsers. My site isn't public yet, but if you test this out on your site, please let me know how it looks.

Brad

Comments

Brad, how is your analysis

svkworld commented 7 June 2007 at 17:16

Brad, how is your analysis on browsers going on? Which all browers did it work for you.

Also, what does the following line do?

if ($page == 0) { //what is this check?

-VJ

=-=

VM commented 7 June 2007 at 17:31

I believe its the check for the front page.

Hey sorry for the delay. I'm

BradM commented 26 June 2007 at 23:04

Hey sorry for the delay.

I'm testing on IE6, FF1.5 and FF2.0 and things seem OK. I really should download and test out other browsers, but I haven't gotten around to it yet.

And yes, the $page == 0 is referring to whether or not you are on the main page or not; I'm using it to determine whether or not the node is being fully displayed, or being shown in a teaser. I only want the shrunken image to show up in the teaser.

doesn't seem to work

tnguyen85 commented 6 July 2007 at 02:41

i am using drupal 5.1 and i can't seem to get your code to work. i made all the modifications that you suggested and it doesn't resize the teaser image. am i missing something?

i am to make these changes in the active theme style.css and node.tpl.php files, correct?

thanks

It should work as outlined.

BradM commented 7 July 2007 at 00:14

It should work as outlined. It might be a cache issue, either your browser or your drupal setup. Did you try a few refreshes?

variation on your approach

frost commented 11 October 2007 at 10:39

Brad,
Nice solution, I wish I had found it last night before I battled with this one, would have saved me some trouble!

But anyway here is mine, which addresses a slightly different need and in a slightly different way, so may also be of use to some people:

My site has Stories which display on their own separate page as full nodes (we're calling them "News and Events"), but also has teasers for those Stories on the home page in the righthand sidebar. We're using the Garland theme.

The problem was that images in the stories were messing up the righthand sidebar on the home page - on FF 2.0.6/Linux (my development machine) they just stuck out too far, but on IE 6/XP they actually moved the entire sidebar below the centre area of the screen!

My solution, similar to you, was just to change the image display size, so the full images are still sent to the browser. Since I knew that I only wanted to resize images in the homepage righthand sidebar within a particular block, I used very specific selectors in the CSS so it won't interfere with images anywhere else. Of course you could choose any or just use the IMG selector to resize every image on the site. Here's my addition to Garland's stylesheet:

/* Resize images to fit right sidebar so that "Whats New" section can use photos - added by Mike Cahn 10 Oct 07 */
#sidebar-right #block-views-news img {
width: 180px;
height: auto;
float: left;
}

www.indytech.ie
A Pint of Drupal

nice but i see it also

demon326 commented 14 October 2007 at 13:53

nice but i see it also effects stuff inside the nodes....

best practices

doublejosh commented 21 December 2007 at 09:40

Don't want to sound like an ~~asshole~~ jerk, but I wouldn't really consider this solution 'best practices' or 'acceptable standards.'

Essentially what you're doing forcing the client browser to squish an image; the quality will be less than that of doing it in MS Paint.
It's just like writing the HTML...

<img src="graphic.jpg" width="45" alt="you should never really do this" />

Not to mention that the client browser is going to have to download the full file, only for the user to see a smaller version of it.
This means bandwidth cost, and slower page loads.

Drupal's basic image module allows you to select a few custom sizes for images attached to nodes to be automatically generated. When the file is uploaded they are made for you and you can designate which ones show up where in your drupal site.

Give it a try.

moot point

BradM commented 21 December 2007 at 21:43

I had several versions of this post written but basically it's not worth defending a minor theme-related tweak, considering I already noted your 'issues' in the first post of this thread. What can I say, it does exactly what I need it to do, and I'm happy with the result.

It always strikes me as funny when people post what they determine aren't 'best practices' or 'acceptable standards' when in fact their own website has several major errors itself. But I won't mention names, 'cause that would make me sound like an ~~asshole~~ jerk!