Forum:(Solved) Vertical spacing of images

ShoutWiki — express yourself and be heard!
Jump to navigation Jump to search
Forums: Index > Community help

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

Image-spacing-before.png

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

Image-spacing-after.png

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)