This is a usability question - with reference to a blog portal or other site with dynamic content generated from multiple users. For example, I would like to use a 4 column display on the front page and main site sections, using views to sort user posts by type, taxonomy, etc. and then each main article is displayed in a 3 column page with the content + two right hand columns.

What I find difficult is keeping the images sized correctly so that they do not overlap the columns and break the theme. I am using FCK editor and would like to have users also be able to upload / edit their blog posts with WYSIWYG.

In three column display - the max width of an image would be around 540 px
In four column display - the max width of an image would be around 340 px

If I create a post with a 540 px image, it will break the 4 column view. I also don't think it is reliable to expect users to always resize their images even to 540px.

Would you recommend using CSS to set a max width on images in each section? Ideally the images would also be scaled and resized. I looked at both Image/Image Assist & Imagefield/Image Cache as solutions to this, but they were not suitable... I want to keep with WYSIWYG editing for users.

So maybe custom Javascript that resizes images to a max width of 340px for 4 column displays and 540px for 3 columns....? I tried implementing the code on this page:

http://drupal.org/node/310405

But no success. It is a fairly critical issue as far as the site development goes, and I would be thankful if anyone has a viable solution for it.

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Hi there, try with a lightweight CSS approach first, something like...

.front .node img {
  width: 340px;
  height : auto;
}

.node-full-view img {
  width: 540px;
  height : auto;
}

The downside to this is that images that are smaller than these dimensions will get scaled up and possible loose some quality - but it should work in most browsers and prevent the layout from being broken.

Personally I would leave the JS solution to last - it could be a good one though and was my initial reaction when first reading your thread. The jquery method is going to be pretty solid solution, but possibly tricky for you to implement especially if you are using the drop menu.

If you have the programming capability I quite possible look at imagecache to see if you can process the images that way, to create scaled derivatives of each image, then call them to the appropriate view (teaser, full). I'm not even sure if that would be possible to use in conjunction with Fckeditor, but I would not put it beyond the realm of possibility (would be an elegant solution).

typehost’s picture

typehost commented

Thanks for this... I don't think the CSS route is going to work for me, because I do not want all the images sized to the same dimensions, I need the images automatically scaled if they are going to overflow the page (as the column width varies from 3 to 4 columns). Also, I was planning to use 4 columns on the main pages of the sub-sections of the site, not only the home page.

One thing I am considering is creating a special content type just for the front page / main sub sections that are designed for 4 columns and act as a custom teaser which link to the main articles.

The site is just in development, but looking at it now, I am also having issues with the tabs overflowing the center column content in a 4 column display.... so I am actually thinking of scrapping the 4 column view and just going with a three column display with 2 columns on the right so I can also use the new block regions in 6-3.1.

With that approach, I should be able to input a bit of JavaScript on the page.tpl.php file, and any images wider than 540 px from our users will automatically be resized....

To that end, I tried inputting this script:

<script type="text/javascript" src='misc/jquery.js'> </script>

<script type="text/javascript">
jQuery(document).ready(function() {
    var h;
    $(".node .content img").each(function() {
        if($(this).width() > 540) {
            h=$(this).height()/$(this).width()*540;
            $(this).attr({height : h });
            $(this).attr({width : "540"});
        }
    });
})
</script>

But for some reason - no effect. You mention this will be tricky with suckerfish, any ideas what might be wrong and why it isn't working?

Note: the page I took this code from: http://drupal.org/node/173586
also is using a lightbox effect with the above snippet, which would probably be the best route, but doesn't seem to work with D6?

Jeff Burnz’s picture

Jeff Burnz commented

I tested this today and it worked perfectly.

Two things:

1) You need adjust this line to reflect your site - $(".node .content img").each(function() - where ".node .content img" is like a CSS selector. See below where I have changed this to just ".node img", because in Newswire there is no class ".content" wrapping the node content.

2) Make sure you are printing the script in the header of page.tpl.php, exactly like this:

<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <!--[if IE]>
    <link rel="stylesheet" href="<?php print $base_path . $directory; ?>/ie.css" type="text/css">
  <![endif]-->
  <?php if (!empty($suckerfish)): ?>
  <!--[if lte IE 6]>
    <script type="text/javascript" src="<?php print $base_path . $directory; ?>/js/suckerfish.js"></script>
  <![endif]-->
   <?php endif; ?>

<script type="text/javascript" src='misc/jquery.js'> </script>

<script type="text/javascript">
  var h;
  jQuery(document).ready(function() {
    $(".node img").each(function() {
      if($(this).width() > 540) {
        h=$(this).height()/$(this).width()*540;
          $(this).attr({height : h });
          $(this).attr({width : "540"});
       }
    });
  })
</script>

</head>
Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Closed (fixed)