Icon and Account picture should not be resized automatically

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

dom

Test page using purely CSS for the icons: http://evilstreak.co.uk/vanilla/

This deals with smaller icons (MrNase), the right size (lech), and oversized (Google). And when you disable CSS, you just don't see the icons.

The source is fairly self-explanatory. A couple of bits of the HTML are changed. and a couple of bits of CSS too. Most of the CSS in the test case is to make it look the default!

Thoughts?

edit: I have tested with FF and IE6, but not IE5 which is usually the problem child. It would probably just be a case of fixing up the box model, but would need testing.

lech

Looks good, dom, better than my initial hackery using the existing markup with only a few changes.

dom

Actually, the test page not validating is my bad! I got lazy and just copied/pasted the comment block a couple of times, and didn't change the IDs, so it is upset that each is defined 3 times!

Underscores as well as dashes are fine for both IDs and classes.

I've fixed the test page now, must take more care in future.

lech

ok, edited that out. Ok, looks better, any chance of you knocking that together against the regular default style to prove it works :D

ithcy

i don't think underscores are valid for names in CSS1. not that that matters practically, but they would choke a css1 validator, i guess

lech

well, lussumo validates, I cocked up and validated something else on accident and it failed and I thought it was vanilla. So i take that back entirely.

dom

Sure. I was thinking of getting a working install going, and hacking up the code to change it, but haven't due to the short tags issue I posted. I'll probably get it fixed up tomorrow, but at least we have proof of concept.

lech

just grab my html example and dump it into the base area that your vanilla install is located at. clean out my markup and replace with your example. nothing to it :D

Mark

// nm - I've got a solution

dom

Edited posts get confusing as hell sometimes ^^

I like to just <del></del> what I wrote, so that you can still follow the flow.

Also, did this solution have anything to do with all the icons mysteriously disappearing?