Template talk:Infobox item

Revision as of 23:03, 5 April 2011 by Nimuaq (Talk | contribs) (ie9)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

To-do List

General Chat

It appears you are attempting to create an item box. Work began some time ago on such a template but I don't think it was completed. Perhaps you can combine your efforts or get some ideas from it. See Template:Item. - JC the Builder 18:35, 13 September 2008 (PDT)

Thanks for the heads up. Hadn't seen that this page existed, let alone your comment. It appears we've joined forces already. Wish us luck! Thadius856 00:10, 16 September 2008 (PDT)

Ordering of Hit Properties

Until just now, I had arranged all of the hit properties (except hit chance increase, which belongs with others like it) alphabetically. I spent lots of time tonight researching exactly which order they go in, and had great success! Here's the exact order that they will appear on any looted, enhanced, crafted, etc. item:


Hit Properties:

  • HSL
  • all slayers here
  • HD/HF/HH/HF/HMA (1 max per item)
  • HCA/HEA/HFA/HPhA/HPoA (1 max per item)
  • HML
  • HLD
  • HLA
  • HLL


You'll notice that the leech properties are all over the board. I'm not sure exactly why this is, but I've confirmed it on over 100 items. All of the hit spells are grouped together; order within the group doesn't matter, since only one can be on each item. The hit areas follow this same rule, oddly enough. HLD comes before HLA, why I have no idea, but again I've quadruple-checked. I haven't found any exceptions yet. Please let me know if anybody here does. Thadius856 00:10, 16 September 2008 (PDT)

Exceptions to the Rules

I've stumbled upon a few items in my travels about Sosaria that some items break the mold, so to say. While I unfortunately don't remember many of them, two items in particular come to mind. If I recall correctly, they've all been artifacts. This leads me to believe that the items are programmed manually by the developers, who err occasionally. Please add to this list as you find others. Thadius856 00:10, 16 September 2008 (PDT)


Exceptions:

A Discussion of Aesthetics and Function

Chapter 01

I submit the following: when pictures are displayed in this template it looks terrible; you can't see most of them due to the black background. I can tell from the name being "Infobox item" that the original idea was probably to mimic the Infobox templates from Wikipedia, which frequently feature a picture or pictures plus an "at-a-glance," bullet point description of a page's topic. However, since the true goal of this template is to simulate the tooltips that one sees when hovering the mouse pointer over an item in-game, and those do not have barely-visible pictures floating in them, I think it would be best to remove the two image parameters. A possible alternative might be to display pictures at the bottom of the template while stopping the black background directly before them.
--Cogniac 02:22, 10 May 2009 (UTC)

Infoboxsample1.png

On my LCD screen, even the images that are literally black are well defined, though it seems this screen is a lot better at contrast then eg my old CRT monitor was. Anyway, the current system looks good to me.

My main gripe is that removing the code from the template would require editing a lot of pages to compensate. I'm fairly sure I've put infoboxes in hundreds of articles thus far. That, and putting the images underneath the box would shove them way down the page for items with lots of properties.

One possible solution is to leave the formatting as is, but put a gray box around the image(s) (as pictured to the right). Heck, this gray box could even be optional via a template parameter, meaning only the articles that actually have dark images would need to have it implemented.

Another (somewhat more complex but still probably do-able) option would be to have the template present the images like this, with an optional parameter to change the "container" to something brighter (like this).

Likewise, if shown other mock-ups I could probably manage other layouts. The style doesn't overly concern me, I just don't like the idea of taking the images out of the template completely.

- Bomb Bloke 07:29, 10 May 2009 (UTC)

I think the problem is that I'm seeing this template as serving the same function as the Tooltip template on WoWWiki, as seen in action here: Handguards of Potent Cures (as well as on thousands of other pages). Since items can't be dropped on the ground in WoW, the game uses an item icon system for displaying unequipped items in backpacks and containers. Due to their standardized icon size, they also use these icons in all of their tooltips in-game. As a result, it makes it very easy for their wiki to have item pictures in tooltips by just imitating the exact in-game format by using the icons. If the goal of our template is to mimic UO's in-game tooltips (which I think it is), then we have already failed by having pictures embedded in it; a thing that does not occur in-game.

There's probably going to have to be some more discussion about this template, but I'm starting to like the general feel of your "gray background" idea. I might throw something together in the sandbox later to get feedback on.

--Cogniac 23:39, 10 May 2009 (UTC)

Check out the Sandbox for a demo.
--Cogniac 05:23, 11 May 2009 (UTC)

Doesn't look too bad from here.

- Bomb Bloke 13:45, 11 May 2009 (UTC)

Now here's a question: Why does this template have the image caption, 2nd image, and 2nd image caption parameters? The only real use for a caption for the first picture would be to put the name of the item, which would ostensibly be what the name parameter is for. And I can't think of any reason for, and have not yet found any page that makes use of, the second image and caption. Would it be the end of the world if those three parameters went missing?

--Cogniac 05:52, 16 May 2009 (UTC)

Probably more trouble then it's worth to remove the caption/secondary image tag (though I had been thinking about making it so the two images were side by side instead of vertically stacked).

The secondary caption tag is indeed obscure (that's the only one that hasn't actually used as of yet, and I'm not sure it ever will be), but I assume the idea is to have it there "in case anyone ever wants it" - and likely because it would've probably been more work to remove it just for secondary images...

- Bomb Bloke 07:51, 16 May 2009 (UTC)

Decided to re-arrange things as mentioned above... There is now only one caption tag, and (if used) it appears underneath the item name (as opposed to under the item image). If an item has multiple images, they now appear side by side, as opposed to one on top of the other. Two examples.- Bomb Bloke 14:07, 16 May 2009 (UTC)

Chapter 02

Not sure if you've given up on this, or what's going on...

About a week ago I took a stab at putting items in a miniature backpack display, but the code for stacking images is effectively disabled in wikis. It can be done, but it requires site CSS edits that I can't make.

But still, just having the image sitting up above the infobox on it's own seems kinda... bare. I was thinking maybe if we wrapped some fancy stuff around it to add "weight" to the look. As an example, I've added an edited version of the header image Ceruleus has used on a few pages to your sandbox version as an optional parameter. Look any good?

- Bomb Bloke 11:20, 27 May 2009 (UTC)

I haven't given up, I'm just doing many things at once lately, both here and in real life. I'm preparing to fight the good fight in the Quest section now, as well.
I had kind of been thinking that the item pics just floating up there looked kind of...sad - in the white, black, and gray box background varieties. I will take a look at the sandbox and see what's up.
--Cogniac 21:10, 27 May 2009 (UTC)

Okay. Check out the Sandbox. It features an image on top of an image. Look good? Should I put the straps back onto the backpack? I'm thinking that maybe it would look better if I did. I'm also thinking of lightening the backpack a little so items stand out more.
An eventual goal would be to float a picture of the cursor below the item and have the tooltip be a little transparent and overlap the bottom of the backpack, to mimic the in-game look and feel.
--Cogniac 23:13, 27 May 2009 (UTC)

Aha! So that's how you do it. Righto, edited the sandbox sample again...

I had to make the coding a bit messy to implement automatic vertical alignment, as not all images are the 50x50 that's used on most pages. Some are bigger, some are smaller. Might be possible to clean the thing up a bit, but I'm not sure it matters.

I decided to try a bag on the basis that it's already a brighter shade then the pack (or anything else I could think of besides the giftbox/stocking/fountain, which have other flaws). I also shrank the image down a bit from the in-game version on the basis that most items should still fit (even if there are two of them).

- Bomb Bloke 08:10, 28 May 2009 (UTC)

I'm not entirely sure what your latest run of tooltip edits is aiming for, but if it helps any: Removing the first <includeonly> statement allows you to preview the image section of the template.

Just to be certain you understand the reasoning behind the layout I used, I've reverted it back to how my last sample was with an added second image tag. As you can see, the two images align quite nicely side by side. Just use the page history to resume from where you were up to when you've checked it out. - Bomb Bloke 04:45, 29 May 2009 (UTC)
Bleh. Just thought to try it under IE. Now I see what the problem is... Is standardisation really supposed to be this hard?! - Bomb Bloke 04:51, 29 May 2009 (UTC)
Ok, using the underscore hack it now appears as I intended it under both IE/Firefox. You might need to do a "full" refresh of your browser though (Ctrl + F5). - Bomb Bloke 05:09, 29 May 2009 (UTC)

Yeah, it appears you found part of what I was trying to fix there. Unfortunately, if you take a look at it in IE again, you'll notice that the entire bag and contents is now wandering off the right side of the screen in the same way. I'm going to see if I can fix that.
--Cogniac 20:31, 29 May 2009 (UTC)

Wandering off...? Er, no, I see it lined up with the center of the infobox on both browsers. Mind you, I'm using IE 6 and Firefox 3...
- Bomb Bloke 21:46, 29 May 2009 (UTC)

I'm looking at it in IE7 and FF2. I'm starting to think that this isn't actually possible. Every time I get it working in one, it crashes and burns in the other.
--Cogniac 21:58, 29 May 2009 (UTC)

I win. Looks identical on FF3 and IE7. Check it.
--Cogniac 23:45, 29 May 2009 (UTC)
DarkIE.png

IE6/Firefox 3 look the same to me, but... there's no vertical centering on the item images. Images that are 50 high will be centered over the bag due to your static margin settings, but what I was hoping to do was a) center them over the bag opening (easy) b) center them there regardless of their dimensions (not so easy).

The problem I ran into is that as soon as CSS style coding is used on a given area, all attempts to vertically center things go out the window and have to be re-defined within that space. I've modified the sandbox (yet again) in an attempt to present this, but just to be on the safe side I've included an image showing exactly what I'm on about.

Anyway, just now I noticed another thing of interest: IE actually darkens images. Madness! An example is also included in the image to the side.

- Bomb Bloke 09:24, 30 May 2009 (UTC)

Yeah, I was trying to accomplish the centering "properly" by avoiding random tables and using CSS, but it turns out that CSS totally sucks, and necessitates a million conflicting hacks to even sort of look right. So it looks like we're sticking with your table solution until CSS doesn't suck anymore, or at least sucks less. I'm going to try to at least convert your table-related tags to the wiki equivalent and try not to break anything.
Also: I had noticed the IE darkening thing when comparing between IE7, FF2, and FF3. And it may be what sparked this entire thing about images being too dark to see, as I was viewing them in IE7.
--Cogniac 20:50, 30 May 2009 (UTC)

Yup, that seems to work (though I had to pull some of the spaces out, those things do get rendered and mess up the formatting).

I'm happy with the result if you are, though I suspect it might still be too dark under IE. Should we try the giftbox after all, or move the coding over to the infobox proper?

- Bomb Bloke 01:01, 31 May 2009 (UTC)

I was actually thinking that we might want to try it with the standard backpack graphic, as that's sort of the "official container of UO" in a sense, since every character has one by default. Either way, I can take the bag graphic we use and slightly brighten it in Photoshop or something to make things more visible.
--Cogniac 02:11, 31 May 2009 (UTC)

Chapter 03

In the Sandbox is what I had in mind for the general overall design of the template visuals. Sadly, you're probably going to see it in Firefox, where it has the most insane background bug I have ever seen.
--Cogniac 06:14, 31 May 2009 (UTC)

Not sure what's going on there. I googled around a bit, but couldn't find anything on how it's supposed to behave (let alone how to make it behave the way we want it to). Note that the bag was a transparent image, but even if I set it's container cell to transparent, there was still that white box effect over the infobox cell.

So instead I cheated by sticking a pre-cropped backpack in place. I realise you wanted to make the infobox slightly transparent (to mimic the game version's use of a mesh-like texture), so that'll likely need changing in short order - But the code also has it's alignment issues back and the cursor might need moving.

Speaking of which, IE6 is failing to render the cursor's transparency. Not entirely sure why. I know that browser is supposed to have an issue with PNG transparency, but it seems fine with all the ones I've uploaded (such as that Armor Of Fortune sprite which is also currently on the page). Must be some difference in our imagery software (I'm still using PSP7).

- Bomb Bloke 11:28, 31 May 2009 (UTC)

Behold: the problem with using a pre-cropped image.
The slight transparency thing is also going to be a Herculean effort; when you set the opacity, it changes the opacity of the text, as well. The easy way to get around this is to use "background-color:rgba(red, green, blue, transparency percentage);" but this is a case where IE fails instead of Firefox - IE doesn't do rgba, only rgb. So you have to create two identical divs - one with a semi-opaque background (and semi-opaque text) and an identical div with "background-color:transparent;" set and no opacity changes. Then you mess with the margin-top and z-index properties to shift the second div directly over top of the first div. Unfortunately, this is impossible, because you have to know the height of the divs in order to line them up; and since that is variable depending on the number of properties on an item, you can never know that.
--Cogniac 02:04, 1 June 2009 (UTC)

Chapter 04

Now housed snugly within the Sandbox is my latest attempt at a cross-browser compatible version of the look of the template. Not yet implemented is a hack for translucency. Current downside that I have yet to look into: you will end up having to have the width and height of your image as parameters in a final template. This might be fixable, but I don't have time to look at it right now. Perhaps tomorrow.
--Cogniac 22:06, 17 October 2009 (UTC)

Translucency hack now implemented. Still to be looked into: auto-centering of the image in the pack. Also, I probably need to change the container to a standard backpack.
--Cogniac 04:19, 19 October 2009 (UTC)

Okay. The div solution didn't work. It inserted random blank lines for no reason when you put it in conditional form in the template. Not to mention the crazy horizontal scroll bug in IE7 (which I eventually fixed with overflow:hidden;, but I digress). So I tried to go back to a pure table format. That also failed. Things would not layer properly. Now I've gone with a hybrid approach and solved both problems. Looks the same in IE7, FF3+, and I'm going to check IE8 later, but I don't foresee any problems there.
To be done: I noticed that my translucent PNG hack is a little too solid. I'll have to upload a slightly more transparent one. Also: I've narrowed down the required parameters on the item image to just the height. I haven't found any way to automatically derive that, but I'll keep looking.
--Cogniac 18:03, 20 October 2009 (UTC)

This works correctly in IE8. I'm fairly certain that there is no way to automatically derive the height of an image. So. To do:

  • Change the bag to a backpack.
  • Screw around with the level of translucency in the background.

--Cogniac 20:20, 21 October 2009 (UTC)

I fixed those last issues a few weeks ago and then forgot to document it. Oh well. I switched to a backpack for the container, and brightened it by about 10% so items will stand out more. I also changed the translucency level of the tooltip background. Still to do:

  • Add in all of the item properties that have been implemented in Infobox item.
  • Fully document the template using the template documentation templates. Furthermore: template.

--Cogniac 19:02, 18 November 2009 (UTC)

All of the item properties are now over in the new template. I'm missing a few like "No Drop/No Trade" and such, but the grand majority have been implemented. There's also a few little useability improvements to be made to a few of the properties. A test of the template using as many properties at one time as is possible is over on the Sandbox. Once the code is ironed out, it's on to property documentation. Which is going to be terrible.
--Cogniac 04:03, 26 November 2009 (UTC)

Browser Compatibility

Wow, you guys are doing some insane stuff here with templates. It is also very neat and looks good. I just wanted to chime in about fretting over browser compatability. For Firefox, only 3% of those users visiting this site are version 2. The rest are version 3. So if it does not look perfect don't worry about it. Internet Explore 6 is a bit more with 12%. But I wouldn't worry about that browser either. Overall site traffic is split about 50/50 between the two browsers. You should really only be concerned with IE 7 & 8 and Firefox 3. - JC the Builder 03:55, 2 June 2009 (UTC)

IE 9

After I've shifted to IE 9, I've noticed that item properties, except the name and the weight of the item, turned bold. After checking the source code, I've noticed that all other item properties starts with the html tag <th> (header) while weight and name starts with <td> (regular row). I've spotted the problem after some attempts, it seems "!" is (somehow) considered by IE9 as a wiki table header start, which it is, but it wasnt serving this purpose inside the template, it was only relevant for the conditions. Thus I2ve changed all "!" to {{!}} (weight and name properties already had that). Problem is fixed in IE9 and I havent noticed any change in IE8 and Firefox. I'm waiting for Cogniac's check on this.Nimuaq 00:03, 6 April 2011 (PDT)

SA, Imbuing and Item Property Sequence

It seems the item property sequence has changed with the SA. The old items has the same sequence as before but the new ones has different sequences. For example, the Staff of Resonance has 'Hit Harm %50' between 'Mage Weapon -10' and 'Spell Channeling' or Channeler's Defender has 'Hit Lower Attack' before 'Spell Channeling. I wonder imbuing can do this sequence change too. I've added the new properties based on the properties came before and after them on the new artifacts on the latest edit. Nimuaq 04:27, 19 March 2010 (UTC)

Retrieved from "https://www.uoguide.com/index.php?title=Template_talk:Infobox_item&oldid=50949"