Forum:(Solved) Vertical spacing of images

Forums: Index > Community help

---

On this wiki page, there's a image gallery shown at listed applications:

The problem is that the thumbnails are spaced by rows, but I would like to see them spaced vertically the same way:

On the page, I'm using the following code to show the pictures:

<div class="thumb tleft"><gallery mode=nolines widths=175 heights=999 perrow=3>
Gnash-1.png
Gnash-2.png
Gnash-3.png
Gnash-4.png
Gnash-5.png
Gnash-6.png
</gallery></div>

Is there some easy hack to fix this (possibly without using CSS, to keep the code short)? --MYself (talk) 18:43, 25 January 2014 (UTC)

Out of curiosity what does class="thumb tleft" do?

And where is the CSS stored for class="thumb tleft"? I don't see it here:

http://tep.shoutwiki.com/wiki/MediaWiki:Vector.css

http://tep.shoutwiki.com/wiki/MediaWiki:Common.css

And what did you do to create that second gallery shown here? The wikicode you presented here is for the first gallery. --Timeshifter (talk) 22:22, 25 January 2014 (UTC)

1. The specified class aligns the image gallery (or anything else you specify, like YouTube videos), allowing text to appear on the side, rather than on top/bottom

2. No idea, I copied it from this page (this is the reason why I would not like to use CSS, since there can be some function already implemented, that will fit for my needs)

3. Edited the first image using GIMP

--MYself (talk) 13:01, 26 January 2014 (UTC)

Thanks. I looked around on Wikipedia and elsewhere and found this info:

Wikipedia:WP:Picture tutorial#Co-aligning

Wikipedia:WP:Picture tutorial#Galleries

Wikipedia:Help:Gallery tag

mw:Help:Images#Gallery_syntax

--Timeshifter (talk) 23:52, 26 January 2014 (UTC)

I tried the suggestions from pages today, but was unable to find anything useful. It probably needs a new template where the images will be sorted using a table. I'm going to abandon this effort for now, and focus on other, more important parts.

For the meantime, if anyone reading this know about a wiki page that has a gallery of images aligned the same way as shown above, please drop a link to this thread. Any working example is appreciated too. --MYself (talk) 18:37, 29 January 2014 (UTC)

I was able to implement the required function by using the following code:

{|

|style="vertical-align:top"|<div style="margin-bottom:4px">[[File:{{{name}}}-1.png|182px]]</div>[[File:{{{name}}}-4.png|182px]]

|style="vertical-align:top"|<div style="margin-bottom:4px">[[File:{{{name}}}-2.png|182px]]</div>[[File:{{{name}}}-5.png|182px]]

|style="vertical-align:top"|<div style="margin-bottom:4px">[[File:{{{name}}}-3.png|182px]]</div>[[File:{{{name}}}-6.png|182px]]

|}

This thread can be now marked as solved. --MYself (talk) 15:46, 4 February 2014 (UTC)