Icon and Account picture should not be resized automatically

MrNase

Hi there! I just noticed that icons that are smaller than 32x32 are also resized.. Same with account picture.. Those should only be resized if they are larger than the maximum allowed size.. Otherwise I need to edit the pictures before using them and make smaller images larger to avoid the bad quality after Vanilla resized them :(

ithcy

maybe the canvas could be enlarged instead of the image?

lech

I think that's all handled via CSS by default and not anything in vanilla itselft. Vanilla is only pulling together the linking of those images.

MrNase

It is? Yeah, the <img />-tag has a fixed with and height.. Maybe Vanilla should check for the image's size after submitting the form, making it smaller if it's larger than the allowed size and leaving it as is when it's smaller :) (This was a suggestion for 0.9.3 ;))

lech

Ok, woops, guess you're right, and it is a fixed width. either way though, it's not being checked, and checking it's size would hinder speed and display of pages one would think. The fixed width is there for a reason, to prevent people from dropping large icons/avatars into that area in the first place that take up a huge chunk of the content and destroy the layout. Not saying that I couldn't slow down some load times by linking my icon to a 2mb image in the first place, but having vanilla check that each time would hurt. Mark, I think I do have a fairly solid idea on how to handle user & role icons that could be uploaded in this scenario without allowing the users to link those images outside of the board if you're willing to listen :) To be added as an extension of course.

Mark

lech is bang on with big icons screwing up the design. Also, xhtml requires that the height and width of an image be defined for valid markup. Having php parse external images for their height and width would be WAY too much overhead for the forum.

dom

Alternatively, if the images were added to the layout via CSS then there would be no resizing. Big images would just be cropped, and small images centered. As an added bonus, it would arguably be more appropriate, since the icons don't add anything to the content, just the style. Of course, it wouldn't be overly easy to provide the dynamic CSS required, but then a challenge is always fun, eh?

Mark

dom: are you up to the task?

dom

Well, as I said, I like a challenge. Where do I start? I'll have a snoop around for docs on adding plugins/modding the code, since I only just came across this lovely piece of technology!

lech

I've actually just started working on this to combat the role icon over-riding user icons. I guess I could include the centering you mentioned there, dom. For this little test case :) I'd leave the coding changes up to mark instead of having 2 or more different versions of the same thing :)

Mark

The documentation is far from complete. If you can figure out how to do the css, I can take care of the rest. Keep in mind that I want Vanilla to validate to XHTML 1.0 Transitional. I'm pretty sure that the height and width of the img tag need to appear in order for that to happen. So css would have to override that. The easiest place to begin would be to download the stylesheet and (either manually by viewing the source and linking it, or downloading the entire vanilla app and getting it out of the styles folder) viewing the source to see the classes on/around the icon / profile pics.

lech

Mark, remember my hide/show panel example not needing height and width in the markup ? :)

Mark

did it? I should go back to bed.

lech

nope, I accidently deleted it too (fuck!) but yeah, all the height and width info was done via css just like the hide/show panel extension is currently rendered. I think defining height and width via markup in xhtml is a no-no to begin with for the most part.

dom

You could do something as simple as:

<div class="Comment">
  <div class="CommentAuthor">
    <a href="account.php?u=1"><span></span>mark</a>
  </div>
  <div class="CommentTime">8 minutes ago</div>
  ...
</div>

And then the following css:

.CommentAuthor a {
  display: block;
  /* other font styling css here */
}

.CommentAuthor a span {
  display: block;
  height: 32px;
  width: 32px;
  background: url(myimage.png) no-repeat center center;
  margin-right: 4px;
}

That should do it, but I'll throw together a test page when I get home to demonstrate it.

lech

the actual icon though is located here:
<div class="CommentIcon"> <a href="#"> <img src="link/to/icon.gif" height="32" width="32" alt="" border="0" /> </a> </div>

dom

Yes, but I'm suggested removing the img tag entirely, since it is not a content image as such.

lech

ahh, we're going two different ways then. To some respect though, we'll probably need to keep the image tag regardless, otherwise you're going to have a css file soley devoted to feeding you the location of each users custom icon. And I think it's safe to say that Mark and anyone else would surely like to avoid and really hate that. Plus you're going to need that div to know which icon to stick to it either way.

dom

Yes, you're right to say that it would take a whole stylesheet devoted to the custom icons. Unless of course, inline styles were used. After a little reflection, I feel this may be the better solution. As I said, I'll throw together an example and see what you all think

lech

ok, i've whipped up a small test-case concerning smaller icons, although I don't think it's as promising since MSIE is a pile of shit when it comes down to positioning block and nearly any other types of elements no matter what their size. My over all suggestion on how to handle this: not worth the effort really. So if you want a 16x16 icon to fit into a 32x32 icon space, you're just better off resizing the icon... Fighting with css and the box model on this one is more of a chore than a benefit. However I did manage to make the icon display neatly without the extra markup if that's any consolation :P I added another possible solution in this test-case for the user/role/douchebag over-ride and how to treat it better. Mark, if you can point me to a section of where this is in the code without me having to dig for it, I think I might be able to fix it there as well.

lech

oh yeah, the test-case is here : http://www.secondagenda.com/root/icons.html