Template talk:Flickr image

tricky new tag

The optional scan_by tag shall be used when the flickr image is a scan of a source with expired copyright or a fair use source and the flickr image is not completely license-free. Thus the one who made the scan might have some kind of copyright or CC license for his/her scan. Use a <br/> HTML tag as end of the image text when the image_text tag is also used with long contents, and <br/> as start of the value of the image_by tag when image_by is also used with long contents.

Image rights tag =

I have added automatic inclusion of the "image rights" tag to this template, because there are way too many images added without proper mention of their copyright status. It is particularly important to distinguish images used "with permission" and under "creative commons".

I am well aware that this temporarily disturbs the condition of many pages, and will participate in an effort to restore them to a good condition by adding the corresponding "image_rights" entries. --rebollo_fr 10:17, 19 December 2010 (EST)

OK, I've changed my mind: there are more than 2,000 pages using this template, and I'm not prepared to go through all of them. So I've used one of the newly functioning #ifeq statements to make the entry optional. But this is bad practice, and now there is no more excuse not to add mention of image rights. (We might omit them for small thumbnails on the side of the camera lists, but not for larger images.) --rebollo_fr 10:29, 19 December 2010 (EST)

Just an idea...if the author does not fill in but leave blank, can we then use a Flickr API that grabs the image owner's copyright level (as s/he defines it in Flickr) and state that these are the rights as attributed by the original poster of the image?--GitzoCollector 15:29, 20 December 2010 (EST)

According to the Wiki's TODO-list image_rights abbreviations should be enabled for this template. Now it's done. Tested change with template copy.U. Kulick 10:35, 16 May 2011 (PDT)

Image SIZE tag

Brandon, how easy would it be to include a image height and width tag that overrides the Flickr size and give fine control for those who need it?--GitzoCollector 15:29, 20 December 2010 (EST)

Validated

The template is now validated as compatible to XHTML 1.0 Transitional, the standard supported MediaWiki software. See page validation and MediaWiki, our wiki software.

XHTML fans find an experimental template version which is complying to XHTML (strict) standard. But it has a major disadvantage when compared to this original Flickr image template which allows centered alignment. See Template:Flickr_image_xhtml_1.0_strict. Please take this second Flickr image template for XHTMLization experiments. U. Kulick 08:53, 25 April 2011 (PDT)

I don't know what you mean by "XHTMLization experiments", but (like so much else in CW) the use of a table for layout witihn your new template hardly conforms to XHTML, let alone XHTML 1.0 Strict. True, there's nothing about the markup that would cause a validator to give a warning message, but good (X)HTML requires a lot more than that. Zuleika 09:15, 25 April 2011 (PDT)

The elements offered by a tool give it its flexibility. If that's beyond somebody's personal taste that does not matter. Tables are a very normal page or page element mark-up element. Any spin-doctoring spread by somebody in the web that use of tables would be devilish non-conforming stuff are without any base and don't make any sense. Tool is tool and ideology is ideology. I use the tools. U. Kulick 15:21, 25 April 2011 (PDT)

That is just silly talk. Nobody has alleged anything "devilish". What markup is for is not a matter of "personal taste", it's a matter of decisions made fairly openly and announced openly by W3C, decisions that have not been seriously challenged (as far as I know) for a decade. There is no "spin doctoring". Ends do not necessarily justify means (if they did, I might turn to pickpocketing), and a claim that they do is particularly bizarre when other simple means exist.

Here's one alternative:

Camera image example
image by Laurie.pettitt (Image rights)

It's from:

<div style="margin:auto; text-align:center">
[http://www.flickr.com/photos/53848489@N05/5277025936/in/pool-camerawiki/ http://farm6.static.flickr.com/5125/5277025936_6c4c6c0ce9_m.jpg]<br />
Camera image example<br />
<small>image by [[:Category:image by Laurie.pettitt|Laurie.pettitt]]</small> {{with permission}}
</div>

I do not claim that this is the best way. It is just one way, a way that very likely can be improved by rational suggestions made by people who've taken the trouble to read and digest some well-informed material about (X)HTML and CSS, and who think coolly. Zuleika 23:19, 25 April 2011 (PDT)

That's truly astounding. I used almost similar sample code from several web pages where the problem was dicussed, but they all used sized contents of the div elements. In my html files at home I had only success follwing these ideas. Your idea is simple, exactly what we need. With that we can go on. U. Kulick 09:13, 26 April 2011 (PDT)

I'm glad that you like it. (I have reverted your changes, however well intended, to material that's signed by me.) If this very simple (and well known) method that I've demonstrated did not work earlier, then a possible explanation is that you were using what is now an old version of Internet Explorer. I have a dim (and perhaps mistaken) memory that versions of IE earlier than 6 or so didn't get this right. But I think and hope that we can now forget about versions of Internet Explorer preceding 7. (Anyone still using any of these should be encouraged to switch, not for "ideological" but for security reasons.) Zuleika 09:24, 26 April 2011 (PDT)

Now let's clear it up a bit by zapping the arrow+box graphic to its side:

Camera image example
image by Laurie.pettitt (Image rights)

Any takers? Zuleika 02:46, 30 April 2011 (PDT)

Validation: dependent pages

Here the most important dependent page, the one which explains usage, checked: Validation of HELP:Adding images page! Now it's ok.U. Kulick 15:14, 25 April 2011 (PDT)

old explanations

• image_rights: image right status, must be one of the following:
  • "creative commons" for images licensed under Creative Commons;
  • "with permission" for images used with permission of the copyright owner;
  • "fair use" for images used under fair use (this practice is discouraged, please follow the link for the details)
  • "public domain voluntary" for images released into public domain by their author (please follow the link for the details)
  • "public domain 1923" for images in public domain published before 1923;
  • "public domain US no copyright" for images published in the USA without copyright notice between 1923 and 1977;
  • "public domain UK" for images in public domain published in the UK between 1923 and 1937;
  • "public domain Germany" for images in public domain published in Germany between 1923 and 1937;
  • "public domain Japan old" for images in public domain published in Japan before 1946;
  • "public domain Japan new" for images in public domain published in Japan between 1946 and 1957.

Image gallery markup

Here's some food for thought:

Mycro I.
Picture by Cassianius. (Image rights)

Transitional Mycro (Sanwa Shokai).
Picture by Cassianius. (Image rights)

Mycro II, early version.
Picture by Cassianius. (Image rights)

Mycro IIIA, early version.
Picture by Scott.cron. (Image rights)

Mycro IIIA, middle version.
Picture by Rick Soloway. (Image rights)

Mycro IIIA, late version,
no serial number.
Picture by Cassianius. (Image rights)

Mycro IIIA.
Picture courtesy of Pacific Rim
Camera. (Image rights)

---

The markup starts:

<div class="plainlinks" style="background:#cef; border:solid 1px #115; margin:1em; padding:0.5em;">

As a sample of a single image/text box:

<div style="float:left; margin:0.25em; padding:0; border:solid 1px #115; background:#fff; height:280px; overflow:auto">
[http://www.flickr.com/photos/amberflykezzie/5234308322/in/pool-camerawiki/ http://farm6.static.flickr.com/5243/5234308322_4472f53abf_m.jpg]
<p style="text-align:center; margin:0; padding:0.5em;">''Mycro I.<br />
Picture by Cassianius. {{creative commons}}''</p>
</div>

And the whole thing finishes:

<hr style="clear:both; visibility:hidden; margin:0; padding:0; height:1px;" />
</div>

Of course this is far more markup than anybody can be expected to copy and paste, let alone to understand and memorize. But let's put that aside for a moment.

This has no table markup, and the whole thing wraps. (Try changing the width of your browser window; see what happens.)

One nasty aspect is that every box has to be of the same height. If it isn't, the boxes don't wrap properly. And because they have to be the same height, one has to specify a height. I've specified 280px; and in all the browsers I've used to look at this page, 280px is enough to display all but one properly. A vertical scrollbar appears in any that need it. In two browsers I've tried (IceWeasel and Safari), this scrollbar appears within the space otherwise used for the image, thus reducing its width, and thus requiring a horizontal scrollbar. In Opera, the vertical scrollbar instead adds to the width, meaning that no horizontal scrollbar is needed. (Of course I can do away with the horizontal scrollbar by either by prescribing an ample width for the box containing this image or by increasing the height of all the boxes -- but this piles kludge on kludge; I'm hoping that instead somebody reading this will think of a better way.)

Markup complexity aside, I'm not sure that this will appeal to others here or seem worth refining and using. And if it did seem worth refining and using, I'm sure that others could think of refinement. But let's imagine for a moment that no, we wanted it just as it is (though with simpler markup). Unless my understanding of MediaWiki is even weaker than I think, the markup within the editable wikitext could be radically simplified:

1. The outer div could be given a class, and the CSS for the class specified in the stylesheet. (So no more <div class="plainlinks" style="background:#cef; border:solid 1px #115; margin:1em; padding:0.5em;">; instead, <div class="gallery">.)
2. The inner div (that around each graphic and caption) and the closing invisible rule would then be (in CSS terminology) "children" of the outer div. Without even class names, they too could have CSS specified in the stylesheet. (Supposing the outer div were class "gallery". Then thanks to "div.gallery > div", the stylesheet would format it. (So no more <div style="float:left; margin:0.25em; padding:0; border:solid 1px #115; background:#fff; height:280px; overflow:auto">; instead, <div style="height:280px">. Or for that matter just <div height="280">.)
3. Similarly, the "p class" stuff would (I think) be unnecessary. I'd have to experiment (and also to read up on the fine points of CSS selection) in order to be sure, but I think that Mediawiki would generate the P tag, and if so that "div.gallery > div > p" would then do the job. If one can't concatenate child selectors, then "div.gallery p" would select this. (So if I'm right, not <p style="text-align:center; margin:0; padding:0.5em;"> and </p>; instead, nothing at all.)
4. And again, thanks to "div.gallery > hr", the stylesheet would format (invisibilize) the horizontal rule. (So no more <hr style="clear:both; visibility:hidden; margin:0; padding:0; height:1px;" />; instead, <hr />.)

My general point being that the markup here is a lot scarier than it need be.

Again, I don't claim that this is the greatest way to make a gallery. Indeed, there's at least one aspect of it that I don't like, and I'm sure that somebody more proficient in CSS than I am could do a better job. Furthermore, perhaps I'm just "reinventing the wheel": Wikipedia already has image gallery markup (though I don't think that this is usable here). Zuleika 02:43, 26 April 2011 (PDT) revised 02:18, 30 April 2011 (PDT)

Suggestion to remove the align tag

Because it seems that the align tag is deprecated, how about this:

<includeonly>{| class="plainlinks" style="{{#ifeq: {{{image_align|}}}|center|margin: 0 auto;}} {{#ifeq: {{{image_align|}}}|left|float: left;}} {{#ifeq: {{{image_align|}}}|right|float: right;}} text-align:{{{image_text_align|center}}};" || [{{{image_source|}}} {{{image|}}}] {{#if: {{{image2|}}}|[{{{image2_source|}}} {{{image2|}}}]|}} |- || {{{image_text|}}}{{#if: {{{image_by|}}} |<small>{{#if: {{{image_text|}}} |{{#if: {{{image_size|}}} |   |<br/>}}}}image{{#if: {{{image2|}}}|s|}} by [[:Category:image by {{{image_by}}}|{{{image_by}}}]]</small>}}{{#if: {{{image_rights|}}} | {{{{{image_rights}}}}}}} |}</includeonly>

It replaces "align=center" with "margin: 0 auto;", and "align=left or right" with "float: left;" or "float: right;" inside the style tag.

You can currently test this template as Template: Test.

--NihonCamera 10:45, 2 May 2011 (PDT)