24 replies to this topic

[PhrozenDragon]

This is a little bit of a problem.

• Look at Chain Mail
  
• and now look at Chain Mail (Ignore the fact the images don't match at all).

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?

[Molster]

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.

[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).

[DeBeNoPrMA]

I think you could have a tooltip class preference. And the preference defines which item you see in the tooltip.

[leftfoot]

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

[OmniNom]

You could stack em vertically?

Dunno.

[CurseYouAll]

Quote

All items are examples of what may appear in Diablo III.
They are not final. Expect more rainbows...

[Voidaltarah]

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.

Edited by Voidaltarah, 27 September 2011 - 09:33 PM.

[PhrozenDragon]

Molster, on 27 September 2011 - 08:59 PM, said:

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.

Ophion, on 27 September 2011 - 09:04 PM, said:

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.

OmniNom, on 27 September 2011 - 09:10 PM, said:

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.

[Molster]

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.

[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.

[Voidaltarah]

That's exactly it. Nice work!

[Xhion]

Molster, on 28 September 2011 - 12:05 AM, said:

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!

[Magistrate]

That is nifty! Simple, effective, small

[Wynthyst]

Can we please move this discussion to the wiki?

Thanks!

[Wynthyst]

Magistrate, on 28 September 2011 - 08:19 PM, said:

That is nifty! Simple, effective, small

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

[Molster]

Wynthyst, on 28 September 2011 - 10:51 PM, said:

Magistrate, on 28 September 2011 - 08:19 PM, said:

That is nifty! Simple, effective, small

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 [file: to a hard img  tage to add a simple ID... and even if you 100% didnt want to do that which theres no reason not to) you can simply change the JS code to altr the fist img tage inside the main table (which would be the image) it just adds another line of code)

edit or, just make the links pass to cars, and instead put the main function in
http://www.diablowik...aWiki: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 >_>

[Molster]

-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

[PhrozenDragon]

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.diablowik...:Azurewrath.png
actual save location of the image: http://www.diablowik.../Azurewrath.png (mouse over to see difference)

Molster can probably explain it better.

[Molster]

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

<div id="Wizard" location="images/0/03/Chain_Mail_Wizard.png" class="wiz_char"> 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