Not signed in (Sign In)

Categories

Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.

Help keep Vanilla free:
Welcome Guest!
Want to take part in these discussions? If you have an account, sign in now.
If you don't have an account, apply for one now.

Vanilla: Icon and Account picture should not be resized automatically

Bottom of Page

1 to 37 of 37

  1.  
    •  
      CommentAuthorMrNase
    • CommentTimeJul 19th 2005
     # 1
    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 :(
    • CommentAuthorithcy
    • CommentTimeJul 19th 2005
     # 2
    maybe the canvas could be enlarged instead of the image?
    •  
      CommentAuthorlech
    • CommentTimeJul 19th 2005
     # 3
    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.
    •  
      CommentAuthorMrNase
    • CommentTimeJul 19th 2005
     # 4
    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 ;))
    •  
      CommentAuthorlech
    • CommentTimeJul 19th 2005 edited
     # 5
    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.
    •  
      CommentAuthorMark
    • CommentTimeJul 19th 2005 edited
     # 6
    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.
    •  
      CommentAuthordom
    • CommentTimeJul 19th 2005
     # 7
    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?
    •  
      CommentAuthorMark
    • CommentTimeJul 19th 2005
     # 8
    dom: are you up to the task?
    •  
      CommentAuthordom
    • CommentTimeJul 19th 2005
     # 9
    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!
    •  
      CommentAuthorlech
    • CommentTimeJul 19th 2005
     # 10
    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 :)
    •  
      CommentAuthorMark
    • CommentTimeJul 19th 2005
     # 11
    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.
    •  
      CommentAuthorlech
    • CommentTimeJul 19th 2005
     # 12
    Mark, remember my hide/show panel example not needing height and width in the markup ? :)
    •  
      CommentAuthorMark
    • CommentTimeJul 19th 2005
     # 13
    did it?
    I should go back to bed.
    •  
      CommentAuthorlech
    • CommentTimeJul 19th 2005
     # 14
    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.
    •  
      CommentAuthordom
    • CommentTimeJul 19th 2005 edited
     # 15
    You could do something as simple as:


    &lt;div class="Comment">
      &lt;div class="CommentAuthor">
        &lt;a href="account.php?u=1">&lt;span>&lt;/span>mark&lt;/a>
      &lt;/div>
      &lt;div class="CommentTime">8 minutes ago&lt;/div>
      ...
    &lt;/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.
    •  
      CommentAuthorlech
    • CommentTimeJul 19th 2005 edited
     # 16
    the actual icon though is located here:

    &lt;div class="CommentIcon"&gt;
    &lt;a href="#"&gt;
    &lt;img src="link/to/icon.gif" height="32" width="32" alt="" border="0" /&gt;
    &lt;/a&gt;
    &lt;/div&gt;
    •  
      CommentAuthordom
    • CommentTimeJul 19th 2005
     # 17
    Yes, but I'm suggested removing the img tag entirely, since it is not a content image as such.
    •  
      CommentAuthorlech
    • CommentTimeJul 19th 2005 edited
     # 18
    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.
    •  
      CommentAuthordom
    • CommentTimeJul 19th 2005
     # 19
    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
    •  
      CommentAuthorlech
    • CommentTimeJul 19th 2005
     # 20
    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.
    •  
      CommentAuthorlech
    • CommentTimeJul 19th 2005
     # 21
    oh yeah, the test-case is here : http://www.secondagenda.com/root/icons.html
    •  
      CommentAuthordom
    • CommentTimeJul 19th 2005 edited
     # 22
    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.
    •  
      CommentAuthorlech
    • CommentTimeJul 19th 2005 edited
     # 23
    Looks good, dom, better than my initial hackery using the existing markup with only a few changes.
    •  
      CommentAuthordom
    • CommentTimeJul 19th 2005
     # 24
    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.
    •  
      CommentAuthorlech
    • CommentTimeJul 19th 2005
     # 25
    ok, edited that out. Ok, looks better, any chance of you knocking that together against the regular default style to prove it works :D
    • CommentAuthorithcy
    • CommentTimeJul 19th 2005 edited
     # 26
    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
    •  
      CommentAuthorlech
    • CommentTimeJul 19th 2005
     # 27
    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.
    •  
      CommentAuthordom
    • CommentTimeJul 19th 2005
     # 28
    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.
    •  
      CommentAuthorlech
    • CommentTimeJul 19th 2005
     # 29
    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
    •  
      CommentAuthorMark
    • CommentTimeJul 22nd 2005 edited
     # 30
    // nm - I've got a solution
    •  
      CommentAuthordom
    • CommentTimeJul 22nd 2005
     # 31
    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?
    •  
      CommentAuthorMark
    • CommentTimeJul 22nd 2005
     # 32
    No. The problem was that you didn't account for the fact that not everyone has an icon - and those people would then have their name pushed to the right but no icon to the left - which looked wierd.

    I just changed your style a little bit.

    Have you noticed icons disappearing? That fix is in effect on this site right now, btw.
    •  
      CommentAuthorlech
    • CommentTimeJul 22nd 2005
     # 33
    i figured you were working behind the scenes there mark :)
    • CommentAuthorjonezy
    • CommentTimeJul 22nd 2005
     # 34
    sweetness
    •  
      CommentAuthordom
    • CommentTimeJul 22nd 2005
     # 35
    Yeah, I saw the icons not being there when I posted that.

    Awesome, nicely done. So we have proper sized icons now, what fun!
    •  
      CommentAuthorichigo
    • CommentTimeJul 27th 2005
     # 36
    would it still be possible to make the user icons clickable? like in the test example posted above?
    •  
      CommentAuthorBen
    • CommentTimeJul 27th 2005 edited
     # 37
    how do we impliment this fix on our own copies of Vanilla?
    will we have to wait untill the next version?

1 to 37 of 37

  1.  
Add your comments
    Username Password
  • Format comments as
 
Back to Discussions Top of Page