Five images for each item

  • #1
    This is a little bit of a problem.

    We seem to have a little problem here. Each item, whether common or legendary, will have five different item images, one for each class. How do we best display that on item pages?

    We can't put them all inside the infobox, that will just make the box much wider and make it obtrusive. So then we have to decide which image to put in the infobox, and the other four will have to be displayed somewhere else on the page, maybe under a == Gallery == header.

    Or can anyone come up with an altogether different, but better solution?
    DiabloWiki.com - PlugY PlugY for Diablo II allows you to reset skills and stats, transfer items between characters in singleplayer, obtain all ladder runewords and do all Uberquests while offline. It is the only way to do all of the above. Please use it.

    Supporting big shoulderpads and flashy armor since 2004.
  • #2
    unless you guys can add a widget that lets you select your "class" when viewing the wiki. I think just the other 4 directly under the item info box, have a two by two table, and simple have the other four views of it there (much smaller, user would of course have to click on them to see) Thats what I would do. Or a bar under it that has "All class views" for an easy to see at all once side by side.


    Another option I could think of would be have a small picture of each class under the item (very tiny icons) when you click it, simply shows the correct graphic for that class.
  • #3
    Perhaps a .gif with the different images slowly rotating, and then all 5 displayed separately on the page as well (like the Appearance on the battle.net page).
  • #4
    I think you could have a tooltip class preference. And the preference defines which item you see in the tooltip.
  • #5
    What if it was like on the Battle.net page, each side by side with class tags under them in a table. You could place it under the main title in the Wiki.

    Or, you could have it like it is in the Wiki now on the side but stack them vertically, for example:

    Chainmail

    Barbarian
    *image*
    WD
    *image*
    Wiz
    *image*
    DH
    *image*
    Monk
    *image*

    Statistics
    etc
  • #6
    You could stack em vertically?

    Dunno.
  • #7
    All items are examples of what may appear in Diablo III.
    They are not final. Expect more rainbows...
    The smell of life surrounds me
  • #8
    Hey PhrozenDragon, I'm working on a suggestion in Photoshop, will be done in 5 minutes. It would basically pinch the item portrait images, "USABLE BY CLASS" and use them as a selection tool to view the correct model you are interested in.

    UPDATE:
    here it is.



    Simple design, but I think it fits with what you already have and is easy to navigate.
  • #9
    Quote from Molster

    Another option I could think of would be have a small picture of each class under the item (very tiny icons) when you click it, simply shows the correct graphic for that class.

    We'd also need some kind of extra coding done to get functionality like that unforntunately, though I do like that idea.

    Quote from Ophion

    Perhaps a .gif with the different images slowly rotating, and then all 5 displayed separately on the page as well (like the Appearance on the battle.net page).

    Well I don't know about the .gif part, there's not a whole lot to rotate (talking about the inventory images here). But the appearance layout is probably the default unless we come up with something else.

    Quote from OmniNom

    You could stack em vertically?

    Well that just makes the page really long with no actual content on the left side. Not a very pretty solution.
    DiabloWiki.com - PlugY PlugY for Diablo II allows you to reset skills and stats, transfer items between characters in singleplayer, obtain all ladder runewords and do all Uberquests while offline. It is the only way to do all of the above. Please use it.

    Supporting big shoulderpads and flashy armor since 2004.
  • #10
    the post above yours is pretty much the same idea I had...
    it was be very very simple JS to make that work.

    however, you could also instead of maken those class pictures, makes those the other armor pictures the same size as those (yes they would be tiny) but a user could simply click on them to see the full size.

    edit: the JS could just be added to the template... could see it.
  • #11
    http://www.m-productions.net/wiki_items/

    the trick will just be getting it into the wiki template.

    could also add some AJAX to the JS..so it remember what the last version is you viewed, so all items will load with that graphic? anyway yeah.
  • #12
    That's exactly it. Nice work!
  • #13
    Quote from Molster

    http://www.m-product...net/wiki_items/

    the trick will just be getting it into the wiki template.

    could also add some AJAX to the JS..so it remember what the last version is you viewed, so all items will load with that graphic? anyway yeah.


    this is the best idea i have seen till now and it looks tidy enough!
    Anticipation of Death is worse than Death Itself
  • #14
    That is nifty! Simple, effective, small :D
  • #15
    Can we please move this discussion to the wiki?

    Thanks!
  • #16
    Quote from Magistrate

    That is nifty! Simple, effective, small :D


    Yeah, it's all of that, but it's not workable on the wiki. Media wiki does not support click to change frames.
  • #17
    Quote from Wynthyst

    Quote from Magistrate

    That is nifty! Simple, effective, small :D


    Yeah, it's all of that, but it's not workable on the wiki. Media wiki does not support click to change frames.

    its not though, it simply changes the src of the image [no frames or something messy like that]..all you do is add it to the template, its 100% doable. at least according to the template tutorials I read. Should have no problem adding 3 lines of JS to it.

    function changeClass(character) {
    document.getElementById('item_pic').src='imgs/Chain_mail'+'-'+character+'.png';
    }

    thats all it is, the "chain_mail" string would simply become {{item_w/e_EN}}.

    and simply changing the picture from the

    edit or, just make the links pass to cars, and instead put the main function in
    http://www.diablowiki.com/MediaWiki:Common.js
    can see this working for sure with some teamwork =P
    aka I know exactly how it needs to be done.. I just dont fully get mediawiki templates .. they scare me >_>
  • #18
    -double posting only so it marks as new-

    me and PhrozenDragon should be talking about it in msn tomorrow, ive been reading about mediawiki for the last 2 hours
    [You don't know me yet, but .. I dont give up when we get a good idea so easily =P]

    I think the way I already have it -should- work. (which ill be explaining better of course)

    But if worse comes to worse (and I mean worse) I know after reading, that we CAN put ID's right into divs, which means, we can just make each character picture a div and have the JS check when a div is clicked !

    I'll actually work on that version (just in case). [as I know for a fact that would work with mediawiki]


    ps: oh wiki coding.. I dislike =P
  • #20
    Well as it turns out, we might have hit a snag in implementing this. The problem (as far as I understood it) is that images aren't stored the right way in the wiki. There are image pages that look structured, but the wiki saves the images themselves rather haphazardly.

    wiki image page: http://www.diablowiki.com/File:Azurewrath.png
    actual save location of the image: http://www.diablowiki.com/images/0/03/Azurewrath.png (mouse over to see difference)

    Molster can probably explain it better.
    DiabloWiki.com - PlugY PlugY for Diablo II allows you to reset skills and stats, transfer items between characters in singleplayer, obtain all ladder runewords and do all Uberquests while offline. It is the only way to do all of the above. Please use it.

    Supporting big shoulderpads and flashy armor since 2004.
  • #22
    exactly.. if the template could simply just give the "location" aka "images/0/03" then this would be working 100% ok. and its the only issue, I reprogrammed the full thing.
    http://m-productions.net/wiki2/

    In this, all you add to the template would be 5 divs (aka one for each class, with their name as the ID)

    and you simply add the JS to common.js and it would work like charm

    The issue is,
    lets say Chain_Mail_Wizard.png was saved at images/0/03
    and say Chain_Mail_Monk.png was saved at images/2/f3

    we would have an issue. so if we could simply have the template give the location of each file I could simply add that into the div as an attribute.

    aka

    for example and we would be golden, as the JS could just pull the location from the diz... thats the only snag, if we can get the wiki to output that, we are 100% go.



    edit: I dont have a wiki account for here yet =P
  • To post a comment, please or register a new account.
Posts Quoted:
Reply
Clear All Quotes