Template talk:Auto images

Width Problem

There's a width mismatch between two consecutive auto images, with the second one's cont parameter set as "yes". here is an example. Windroff (talk) 20:20, 18 August 2013 (UTC)

Good catch! It seems to arise when there are a different number of images in each row. I'm not yet sure whether it's a rounding issue, in which case it is likely to be difficult or impossible to fix because of the limitations of the template language or whether there's a logic error in the width calculations. I'm investigating. Peter coxhead (talk) 21:50, 18 August 2013 (UTC)

I've implemented a fix, which seems to work on all the cases I've tested. I'm never sure if there are any browser-specific features in the display of images in this way, so please let me know if you see any consecutive sets which don't line up properly. Peter coxhead (talk) 22:56, 18 August 2013 (UTC)

By the way, it can't be guaranteed to work within 1 pixel either way because of inevitable rounding errors – each row of auto images does the calculations independently so may not come up with exactly the same total width allowing for rounding. Peter coxhead (talk) 22:59, 18 August 2013 (UTC)

Thank you very much. It works with all combinations I tested so far. Windroff (talk) 23:11, 18 August 2013 (UTC)

Caption alignment

I added a parameter to the template sandbox to set caption text alignment. You can see comparative results in the testcases page. It saves quite a lot of typing for transclusions with many images. Windroff (talk) 21:48, 7 April 2014 (UTC)

Seems a very good idea. I'll move the change to the real template. Peter coxhead (talk) 10:04, 8 April 2014 (UTC)

 Done Peter coxhead (talk) 10:19, 8 April 2014 (UTC)

Thank you. I changed the parameter name to the respective HTML property name, because it sets alignment for the footer in addition to image captions, and it's more intuitive this way. Windroff (talk) 15:02, 8 April 2014 (UTC)

Ok, I like brevity myself but it's perhaps clearer now. Peter coxhead (talk) 21:09, 8 April 2014 (UTC)

Float

I added a parameter to the template sandbox to float the template. You can see comparative results in the testcases page. It should not interfere with existing transclusions that use the div enclosure workaround. Windroff (talk) 21:48, 7 April 2014 (UTC)

@Windroff: what is the difference between |align= and |float=? seems confusing to have both? If the intent is to wrap text as well, then we should add a |clear= option? Frietjes (talk) 01:58, 10 April 2014 (UTC)

@Frietjes: The goal is to let text wrap around the table without having to do it with HTML.

|align= was already there and it may be in use in several transclusions; it moves the table to the requested side and sets the opposite margin so there can be no text wrapping.

|float= acts like the CSS float property (wrapping text around)

To avoid confusion the template could be changed so if |float= is set (e.g. to "yes") the table would float to the side set by |align=, leaving the usual no-wrap behavior when unset. Windroff (talk) 05:12, 10 April 2014 (UTC)

personally, I would like to see |align= and |float= do the exact same thing, if both parameters are available, and have an option for |clear=none to avoid text-wrapping, but text-wrapping would be the default. with only 202 transclusions, we can just check all the uses and fix them to make sure there are no actual changes in the layout. Frietjes (talk) 18:37, 10 April 2014 (UTC)

okay, I added float, with possible values of 'left', 'right', 'center', and 'none', and a tracking category for align. if float is not set to one of these four values, then the template should function the same as before. but, this should allow us to get rid of the div hacks in the articles, as well as most clear hacks. the old |align=left should be essentially equivalent to the new |float=none (just like images with none). I will wait for the tracking category to populate, then check the transclusions that use align. Frietjes (talk) 19:30, 10 April 2014 (UTC)

@Frietjes: Thanks. Perhaps "none" should have a more descriptive alias ("clear_left" ? ) and another choice ("clear_right" ? ) should be added for automatic inclusion of the {{clear right}} template. Windroff (talk) 21:09, 11 April 2014 (UTC)

@Windroff: just matching the syntax of {{multiple image}} and standard picture syntax, which seems like a good idea if editors already know standard picture syntax? however, I have no problem with adding more options for |align= and/or |float=. the whole {{clear right}}/{{clear left}} template thing is confusing since you probably just want to clear both. Frietjes (talk) 21:17, 11 April 2014 (UTC)

by the way, I didn't find any usage of the non-wrapping text feature with align right in the articles that I checked, so it seems like it's not going to be needed much in practice. Frietjes (talk) 21:23, 11 April 2014 (UTC)

I just added two explicit nowrap options to the aux template sandbox. Could {{clear left}} be replaced by margin:auto or is it really needed? Windroff (talk) 21:39, 11 April 2014 (UTC)

looks good. as far as I can tell, left, right, center, and none cover all the existing usage, but I may have missed one. aligning right with no text wrapped seems very rare, if not entirely not needed. Frietjes (talk) 16:54, 12 April 2014 (UTC)

I merged the changes, adding "right_nowrap" only for the sake of completeness. I also updated the documentation, removing the "embedding text" section because it's the default behavior now. Windroff (talk) 22:08, 12 April 2014 (UTC)

Layout

I modified the table's layout to make it look more like {{Multiple image}} and plain images, and to let each row of pictures seamlessly merge with the previous one. Changes are in the template sandbox. You can see comparative results in the testcases page. Windroff (talk) 06:16, 17 April 2014 (UTC)

To clarify, so far as I can see, this change is solely to the numbers in the calculation of ht. I can only say that I arrived at the original numbers by a lot of trial and error, including viewing on different browsers and different operating systems. For example, the values I used at first, which worked under Firefox under Mac OS X (my normal combination), did not work for IE under Windows 7. I'm certainly not saying that other values such as yours won't work, but I would urge great caution in changing these values until you have checked complex layouts with as wide a range of browsers as possible. There are significant differences in the way in which browsers handle some kinds of layout. Peter coxhead (talk) 08:45, 17 April 2014 (UTC)

While there's a rationale behind the change of numbers, I see no improvement over the originals in the cases I tested so far. As for the layout changes, they are here {{Auto images/aux/sandbox}}. Windroff (talk) 20:57, 17 April 2014 (UTC)

I'm not quite sure what you're saying about the version you left in the sandbox. Are you saying that as a whole it isn't an improvement over the originals? It would be useful to see a page with complex sets of images laid out using the current template version and the sandbox version. Then we need to check them with different browsers and operating systems. When I was developing this template, I found that apparently small or even irrelevant changes altered appearance on some systems. Peter coxhead (talk) 09:08, 18 April 2014 (UTC)

I mean that your original numbers also work well for the modified template in aux/sandbox, so I restored them (although because these numbers are bigger, the table gets slightly reduced due to ht being smaller) Update: I set the padding numbers to "4" (2 to the left, 2 to the right) to fix a width mismatch between rows with different number of images (testcases "Complex 2" and "Complex 3")

Please have a look here. There are several examples using both the current template and the sandbox versions, including a quite complex case at the end. More should be added to compare the final appearances. Windroff (talk) 21:24, 18 April 2014 (UTC)

The narrower margin version at Template:Auto images/testcases#Float left doesn't work in Safari, Firefox or Chrome under Mac OS X 10.9. Instead of "Echinopsis candicans" over two lines, I see "Echinops candican", with only part of the following "i" and "s". So the wider margins seem to be necessary. The problem only occurs with italic caption text, so far as I can see: this is slanted to the right, and so goes beyond the right bounds of the image above. (It probably depends on the font used as well.)

Which browsers and platforms have you checked? Peter coxhead (talk) 08:58, 21 April 2014 (UTC)

That's intended and should work that way on every CSS2 browser. In the original template if any word is too long for the caption box width, text simply overflows and doesn't look right. It becomes worse with thinner margins, so the sandbox template adds the property "overflow:hidden" to clip the excess. The real fix is to increase total_width.

Display is fine in Chrome and Firefox on Windows 7. There are top border draw issues in IE

I added another testcase here to show the hiding overflow behavior. Windroff (talk) 02:58, 22 April 2014 (UTC)

Ah, I haven't expressed myself clearly. Obviously if there's a long word in the caption which is wider than the image above, there will be overflow. (I slightly prefer not having "overflow:hidden" because the error is then obvious and editors are more likely to correct it, but that's another matter.) The issue is that some captions display correctly with the current version of the template, but won't if the changes are implemented – that's the case with the example at Template:Auto images/testcases#Float left. So if this change is moved over to the main template, every use will have to be manually checked. Is it really worth doing this?

I suspect it's more likely to be an issue with italic caption text, since whether it extends further to the right is system and font dependent. So it's possible to have text which looks ok on one browser/system/font, because the italics are implemented within the same "character box" but not on another combination, where italics are implemented by right-skewing. (You see the same issue with some editors putting double spaces between italic text and following roman text because the spacing looks wrong on some set-ups.) My feeling is that allowing a reasonably generous margin is less likely to cause a editor using a particular set-up to choose a total width which looks right to them, but won't to viewers with a different set-up. Peter coxhead (talk) 11:28, 22 April 2014 (UTC)

have you tried 'overflow:auto' (adds a scrollbar instead of chopping the text)? Frietjes (talk) 14:46, 22 April 2014 (UTC)

@Frietjes: This was meant to account for browser specifics, hiding perhaps half a letter in some cases without altering much the aspect of the table. Options such as "overflow:auto" and "word-wrap:break-word" produce too drastic changes for even the tiniest overflows. Windroff (talk) 15:36, 22 April 2014 (UTC)

@Peter coxhead: Please have a look at the actual HTML in the previous aux sandbox. The clipped text that you saw is due to the 2px margin on each side of the caption box, that I added to avoid long text being visually fused between consecutive images. This causes the actual content space to become smaller and thus any excess to be cut out. In the testcases I set the same "total_width" in every pair of examples for the sake of fair comparison, but this shouldn't happen in real usage where editors would simply pick the "total_width" that looks good.

My issue with wide margins is that they are inconsistent with {{multiple image}} and plain [[File:]] images and in small tables they take quite a bit of space that should be for the pictures themselves.

I removed the 2px caption margins and the overflow control here, so it should behave like your original version now. Nevertheless I think that some overflow handling should be enabled. Windroff (talk) 15:22, 22 April 2014 (UTC)

I think that any change to the template which can alter the appearance of existing articles should be avoided unless it fixes a bug, although I agree that ideally the visual appearance should imitate {{multiple image}}. (I didn't start with the idea of having wide margins; they just evolved by trial and error until my test examples looked more or less the same on all the browsers I was able to try.) Peter coxhead (talk) 21:43, 22 April 2014 (UTC)

Achieving consistency across image templates and making the most of the available space are worth giving sandbox a try. So far, the only display issue remaining is the top border under IE. Windroff (talk) 12:33, 23 April 2014 (UTC)

is there any reason why we don't just make this a frontend for {{multiple image}}, and just have this template compute the widths? Frietjes (talk) 00:31, 23 April 2014 (UTC)

The reasons I first knocked this template together (and it was "knocked together" largely by trial and error) were twofold: (1) I was tired of having to calculate the image sizes required to fit a row of images into a total width of about 500-600 pixels as per the recommendations in the MOS; (2) I wanted an easy way of having multiple rows of images in what appeared to be a single multiple image, hence the cont parameter (rather than putting multiple horizontal uses of {{multiple image}} into one vertical use of {{multiple image}}, which I'd seen others try to do, not always very successfully. Now (1) can almost certainly be achieved as you suggest, i.e. feeding the calculations into {{multiple image}}. (2) seemed to me at the time to require some changes to {{multiple image}} to make it work properly, and I didn't want the hassle of sorting this out – I just wanted to put images into articles like Cactus and Schlumbergera which I was working on. I'm very open to making this template a frontend, if either it then behaves identically or all existing uses (not that many) are checked.

The "ideal" template would, I think, work like this. You would give it a total width, a minimum width for an individual image (with a sensible default), and an ordered set of images (plus captions, etc.). It would then work out how to lay them out – how many rows and how many in each row. A nice challenge for someone (it looks possible in Lua). Peter coxhead (talk) 09:07, 23 April 2014 (UTC)

A frontend would be perfect. However {{multiple image}} would have to be slightly modified because only alignment for header and footer can be set; captions are always left-aligned. And there's no support for consecutive rows. Windroff (talk) 12:37, 23 April 2014 (UTC)

see Template:Auto images/sandbox2 which uses Template:Multiple image/sandbox which uses Module:Multiple image. I will work on having the main multiple image template updated to use the module, which will make a frontend possible. the module:multiple image is basically a lua version of both this template and the mutliple image template. if total_width is defined, then it rescales the widths, but otherwise does not. I do like the idea of eliminating the whole 'cont' parameter, and making the module render multiple rows, but we will need to settle on syntax before I can implement such a feature. Frietjes (talk) 19:51, 24 April 2014 (UTC)

It looks very good. I updated the testcases to point to sandbox2. There are a few 1-pixel differences in picture height that I had fixed in the original sandbox by using widthxheightpx. Windroff (talk) 22:27, 24 April 2014 (UTC)

I added the height as suggested, and changed the algorithm to better match the method used in the current code. it appears this fixes the jagged bottom, but I may have introduced new artifacts. Frietjes (talk) 00:11, 25 April 2014 (UTC)

I see no vertical issues anymore. Use of widthxheightpx preserves aspect ratio, so a white inner margin appears in some images where the set height forces the width to be smaller than the enclosure.

To fix this I set the image width to be 1px-2px wider and trimmed the height excess with "overflow:hidden". Please have a look here, although it may work differently in the new layout. Windroff (talk) 00:51, 25 April 2014 (UTC)

Seems good to me. Peter coxhead (talk) 09:02, 25 April 2014 (UTC)

Multiple rows

For the automated display of multiple rows, when I thought about it in the past the logic seemed to me to be this:

Set temp_width to 0

repeat

Increment temp_width by total_width

Calculate the image widths to fit in a single row at temp_width

until (all image widths are >= minimum_width)

// now know that temp_width/total _width rows are needed

Divide the images between the rows so that the width of each row is as similar as possible

Lay out the images in their rows with their newly calculated widths

The algorithms I know for the best fit division into rows seem to require some iteration; I don't know if there's an analytic solution. If the images can be re-ordered it's a variant of the bin packing problem; if not I think hill-climbing works, from a starting point of putting enough images in each row at their initially calculated widths to not overflow total_width and all the rest in the last row. I quickly realized that the above is very difficult if not impossible to program in the template language and gave up. But it should be possible in Lua. Whether it's worthwhile is another matter. Peter coxhead (talk) 09:02, 25 April 2014 (UTC)

rather than going with a bin packing algorithm, I was thinking we could go with |image1-1=, |image1-2=, .. for the first row, and |image2-1=, |image2-2=, ... for the second row. this would provide the user with more flexibility for deciding which images are in which rows, and would reduce the complexity since we wouldn't need to implement an iterative method for binning. it would be useful for {{multiple image}} as well (there have been prior requests for layouts other than horizontal and vertical). and, I just added 'overlow:hidden' and 'height:NUMpx' to the divs that wrap the images (just the images, not the captions), so the minor 1px artifacts should be gone in the LUA version (thanks for the suggestion). Frietjes (talk) 19:42, 25 April 2014 (UTC)

Perhaps |image1.2= rather than |image1-2=? I assume that either all the numbered parameters would have to be of the "row + image-in-row" style or none would.

It feels a bit clumsy to me, remembering that the "1-2" or "1.2" has to be repeated for the all the parameters for that image. I wonder about keeping to the simple numbering with additional parameters |row1=no. of images in row 1, etc. Peter coxhead (talk) 20:35, 25 April 2014 (UTC)

just specifying the number of images in each row would work as well. I found Template:Photomontage recently, which uses 1a, 1b, 1c, ... Frietjes (talk) 22:03, 25 April 2014 (UTC)

Setting e.g. |row1=4, |row2=3, and |row3=4 would let 11 images to be arranged in 3 rows of 4, 3, and 4 pictures each. But to enable support for a total of more than 6 images as in the previous example, many lines such as this one:

|imageN={{{imageN|}}}|widthN={{{widthN|}}}|heightN={{{heightN|}}}|captionN={{{captionN|}}}|altN={{{altN|}}}

must be added to {{Auto images/sandbox2}}

Is it possible to remove such lines and pass |imageN=, |widthN=, etc. as parameters straight from the template invocation in each article? Windroff (talk) 05:18, 29 April 2014 (UTC)

the sandbox2 is really just a proof of concept to hack the cont parameter. once we have the multiple row syntax, and the main module has been updated, we will be able to just invoke the module, and not use the wrapper. this will require, of course, changing all the articles that use cont, but that is only a handful. Frietjes (talk) 14:25, 29 April 2014 (UTC)

Lua version

Windroff, Peter coxhead, there has been some progress. Module:Multiple image is now in use in Template:Multiple image. a slightly less hacked version of this template using that module can be found in Template:Auto images/sandbox2. I would still like to see support added there for multiple rows (so we can get rid of the cont hack), but we are getting closer. check the Template:Auto images/testcases to see the minor spacing differences between the current version and sandbox2. Frietjes (talk) 16:45, 1 December 2014 (UTC)

The spacing difference is a matter of taste, I guess. Personally, I prefer the wider gaps of the original. The failure to centre the footer in the sandbox2 version needs to be fixed. Peter coxhead (talk) 21:12, 1 December 2014 (UTC)

Spacing and margin issues

On this edit, notice with the DeGroot cluster how there is an extra line of spacing above the group and no bottom margin after the group. I'm going to make a div hack to fix it for the article, but wanted to save it when it was messed up so someone else could see it.  czar ♔ 21:04, 22 June 2014 (UTC)

Don't put blank lines above and below the auto images template if you want it displayed inline, i.e. part of the same paragraph. The mediawiki software interprets the blank lines as indicating that a new paragraph is required which then interacts with the other coding. Peter coxhead (talk) 08:18, 23 June 2014 (UTC)

A double blank line I could see, but a single blank line for readability? None of the other image templates work that way czar ♔ 08:30, 23 June 2014 (UTC)

Also it perhaps fixes the top issue (which I already knew) but it doesn't fix the wrapping on the bottom. The same margin given to the top and the right (in align=left) is not given to the bottom czar ♔ 08:34, 23 June 2014 (UTC)

Draft:Development of Fez looks fine to me (Firefox, Mac OS). Maybe there's a browser issue? Peter coxhead (talk) 21:13, 23 June 2014 (UTC)

Template no longer needed

Changes to Module:Multiple image, invoked by {{Multiple image}}, mean that when |total_width= is defined, it behaves like this template (although the template documentation doesn't seem to have been updated). So I think that this template can become simply a redirect to {{Multiple image}}. Peter coxhead (talk) 17:31, 31 January 2015 (UTC)

Peter coxhead, we are nearly there. we will have to change all the ones without |total_width= defined and without |align= or |float= defined. and, the big one, is that I haven't added an alternative to |cont= yet. but, I plan to do that soon. Frietjes (talk) 17:36, 31 January 2015 (UTC)

Ok. I'm not sure that |cont= is really needed; it was the way I coded the template when I first wrote it, but tests suggest that two rows of images defined by two uses of {{Multiple image}}, without a header in the second row, display correctly. However, I have only tried a few examples. Peter coxhead (talk) 17:42, 31 January 2015 (UTC)

as you know, the |cont= is there to remove some spacing between two successive invocations. my plan is to add something like |perrow= which will allow you to use one call and get two rows. however, if you think it looks fine just using two successive invocations, then feel free to use that instead :) Frietjes (talk) 17:45, 31 January 2015 (UTC)

Have you guys seen the new "mode" parameter for galleries (see phab:T67451)? In a cursory look, it seems to make this template obsolete, but I didn't investigate it in detail. It might even make this and various other templates unnecessary :) --Waldir ^talk 03:43, 25 February 2015 (UTC)

The big problem for me is that the captions are only visible on hover. The point of a multiple image should not be to produce a "gallery" of pretty pictures, but a set of carefully chosen images with an overall purpose, e.g. the life-cycle of an organism, the variety of colours available in a cultivated plant, etc. For this purpose the captions are important. Ultimately, however, it would be good to integrate multiple images and galleries. Peter coxhead (talk) 10:00, 25 February 2015 (UTC)

with mode=packed you still get the captions, but the image size is specified by image height, rather than width. Frietjes (talk) 14:16, 25 February 2015 (UTC)

Ah, my error; I missed the fact that the example has |mode=packed-hover. Yes, it does look as though |mode=packed may be able replace this template and {{Multiple image}} in many uses. I'm not sure about floating left or right and allowing text to flow round, though. Can this be done? Peter coxhead (talk) 14:33, 25 February 2015 (UTC)

unfortunately, to float it left or right you still have to put it inside a table, and the syntax is a bit awkward. see, for example, Moustache or Mikengreg#Other games. Frietjes (talk) 14:49, 25 February 2015 (UTC)

Peter coxhead and Waldir I added a |perrow= option to the module sandbox for {{multiple image}}, to go along with the already implemented |total_width=. unless there is a major problem, this should be implemented in the main module soon. for examples, see the testcases starting from around test 13. the perrow will allow eliminate the need for |cont=, since you will be able to get multiple rows. please feel free to comment at Template talk:Multiple image. Frietjes (talk) 01:17, 5 March 2015 (UTC)