Community Central
Register
Community Central
Forums: Index Support Requests Gallery template
Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.
Archive
Note: This topic has been unedited for 4351 days. It is considered archived - the discussion is over. Information in this thread may be out of date. Do not add to unless it really needs a response.


Hi, I'd like to hear some suggestion about which is the best way to make a "gallery template". I'm currently using templates like this one, basically simply a table, but I want to make a generic template which I'll use to make these kind of galleries. My idea was to use a pair of template that in the end have a structure like this one:

{{Gallery
|sectiontitle = ....
|{{Gallery-cell|parameters for element 1}}
|{{Gallery-cell|parameters for element 1}}
|{{Gallery-cell|parameters for element 1}}
|{{Gallery-cell|parameters for element 1}}
|{{Gallery-cell|parameters for element 1}}
|{{Gallery-cell|parameters for element 1}}
|{{Gallery-cell|parameters for element 1}}
|{{Gallery-cell|parameters for element 1}}
}}

Each cell is composed by an image and a caption, so I tried making the elements nested tables of the mother table with these templates (1 and 2, which give this result, the standard way is shown above it). My problem is that I want the nested tables/elements to be displayed inline so that an element will be shown in a new row when there is no more space left, now I'm forcing the rows every 5 elements, I want it automatic because, for example, in monobook the table can be wider. I tried to make divs instead nested tables, but it either show all elements in a single row or make a new row for each of them. Any ideas? leviathan_89 22:29, 11 April, 2012 (UTC)

The trick is to use the css styling display:inline-block; on your divs to make them behave like a cross between inline elements and block elements. That's what Wikia does for their galleries. Check out this W3Schools page for more information about the display property: http://www.w3schools.com/cssref/pr_class_display.asp
Look at the html code in the page source below to see an example of Wikia's gallery code.
For some reason Wikia sticks their divs inside of span tags that have been styled with display:inline-block; I'm not sure why. Technically, placing a block level element (such as a div) inside of an inline element (such as a span) is invalid html.
I've never made an image gallery template like yours, but I have made a video gallery template that might be a helpful example. My video gallery template has a fixed width, so it can't wrap onto multiple lines like you want. However, it does have the basic idea of individual items or captions being hidden automatically if they are left empty, so you could have a variable number of images with or without captions in your gallery. If you combine that idea with Wikia's html gallery code, you would have what you want. --Gardimuer { ʈalk } 18:16, April 12, 2012 (UTC)
I have already tried the propriety inline-block, but I tried it in a wiki table which results in an image per row (don't know why), now I'll try doing all that in HTML, hope it will works. leviathan_89 20:54, 12 April, 2012 (UTC)