Talk:Item display templates / display modification - rfc

Forums: Index > Help desk > Item display templates / display modification - rfc

I've been working some on how item details and images are displayed, trying to remove some of the extra whitespace that is added due to the current layout.

Using weapon display template as an example, currently whitespace is injected above and below the "shown" image to match the height of the first 20 rows of details. Whitespace is also injected above and below the "tips" data to match the height of the "weapon" image.

I've created some examples that untie the image cells from the details cells, allowing for the handling of the whitespace to be more dynamic.

• User:Joenuts/Weapon_Display_Original : original display used for reference
• User:Joenuts/Weapon_Display_DetailsTableTop : modified display, whitespace moved to below item details
• User:Joenuts/Weapon_Display_DetailsTableRaised : modified display, whitespace moved to below item details, item detail and header cells raised for accentuation
• User:Joenuts/Weapon_Display_DetailsTableExpanded : modified display, whitespace moved to be evenly distributed among all item detail cells

I would like opinions on which display is preferred, and ideas on how to improve the layout. Joenuts (Contributions • Message) 18:04, January 12, 2014 (EST)

Hey there Joe. I was thinking more along the lines of User:Technical 13/Weapon Display Modular with some clever logic to adjust the table as needed if there are missing and unimportant fields. What do you think? Maybe add a colspan="3" bold table header with the item name? ShoeMaker (Contributions • Message) 07:16, January 14, 2014 (EST)

I wanted to refactor away from the rowspan tags because the number of rows can change from item to item, and from item class ( armor ) to item class ( potions ).

As far as column span, generally the number of columns wont change, so there is a bit of confidence using colspan tag. Honestly, I dont care either way putting the item name in the table, the page already displays the item name, so I wouldnt even be opposed to removing the duplication.

What I'm more concerned with is the layout. In cases where the item details image is taller than the data, where should extra whitespace go? In the opposite case, where should whitespace go?

Check out these : Tall details/two graphics or Tall details/one graphic or Tall details / no graphics or Short details/two graphics

I force the whitespace to go below the details side and center any images at the bottom both horizontally and vertically.

For whitespace on the right side, I just center the image vertically.

This design means that the layout will always be handled the same way ignoring how many rows of data there are, and ignoring how tall the details image is.

( I moved the graphic images to the bottom, because that's where the extra whitespace gets put. If an item has a particularly large details image, the whitespace at the top seemed unappealing to me. )

Joenuts (Contributions • Message) 22:27, January 14, 2014 (EST)

• The rowspan changing based on rows that may or may not be displayed (most of these shouldn't be hidden unless there is no value, which is different than us just not knowing the value) isn't a big issue. An example of adapting the rowspan accounting for hidden rows can be seen in Template:Eternal wand. ShoeMaker (Contributions • Message) 18:17, January 15, 2014 (EST)

• I checked out eternal wands, I think i’m missing your example. If I add some rows after weight ( or after description ), like ingredients, vendors, etc. it gives me white lines / empty space underneath the top displayed image.

If I add the rows after Notes, it gives me white lines underneath the lower displayed image.

Also, it looks like rowspan is still used by layout to expand image across rows, there’s just a switch statement to determine the value of the rowspan?

Longer term plans, I want to add more stored data for items, such as vendors where item can be purchased, ingredients used to create the item, quest chains that offer item as end reward, quest series that offer item as end reward on 3rd or 20th completion, quest sagas that offer item as end reward, etc.

Those rows will not apply to all items, and rather than entering in none, I think it’s best to just not display the row, hence the desire to make the layout not rely on rowspan ( or try to determine rowspan dynamically ).

Joenuts (Contributions • Message) 20:54, January 15, 2014 (EST)

• Basically... rowspan="{{#if:{{{image|}}}|8|13}}" and {{#if:{{{image|}}}| style="background: #FFFACD;" align="center" rowspan="5"}}|{{#if:{{{image|}}}|[[{{ns:6}}:{{{image|No_pic.jpg}}}|420px|frameless|link=|center]]}} which means it only displays the image if one exists, otherwise all of that whitespace is used my the other image so there is never empty space displayed if the template is used correctly. You can do the same thing with text lines, rowspan="{{#expr:4{{#ifeq:{{{some optional field|}}}||+0|+1}}{{#ifeq:{{{another optional field|}}}||+0|+1}}{{#ifeq:{{{third optional field|}}}||+0|+1}}}}". So you are starting with 4 for the rows that are required to be there, and adding +1 for every optional field that isn't blank. It could go the other way reducing the rowspan as well if that was what was needed. ShoeMaker (Contributions • Message) 22:41, January 15, 2014 (EST)

• Hey Joe, I personally like User:Joenuts/Weapon_Display_DetailsTableTop best with one small change. I'd rather see the item's examine image above the in-game appearance picture. My general attitude is that DDOWiki is a great reference for a game we'd rather be playing, and we should strive to write our articles to get the Content that people are looking for to them quickly, so that they can get back to the game. In that presentation, what information are people most likely to be looking for? The table and the item. What are they least likely to be looking for? The pretty purple... Don't make peeps scroll past fluff to find the meat, basically.

SysteRn (Contributions • Message) 02:54, January 15, 2014 (EST)

SysteRn, you're preference would be something like Shown image below details image? Check out Shown image below data. I prefer that I think over all because it has less whitespace overall ( although, maybe top aligning that details image would be an improvement ). Also, if you think the solid whitespace block is ugly, data side can be expanded evenly like this : Shown image below details image (with details expanded )

The more I look and work with these layouts, the more I like the idea of dumping the shown image below the data side.

Joenuts (Contributions • Message) 17:40, January 15, 2014 (EST)

• I agree that the details image should be top aligned. As you mentioned, different templates have a different amount of information in them. Imagine your sample table's layout with a lot of information in the Tips field. I'm running 1920x1080, full screen web browser, and I still have to scroll down to see the bottom of the image, because of the padding at the top, in just the sample shown it'll only get worse with larger articles. Also, because of the varying rows in a template issue, I'm more in favor of having the shown image beneath the details image.

SysteRn (Contributions • Message) 22:10, January 15, 2014 (EST)