Template talk:Annotated image

From Wikipedia, the free encyclopedia
Jump to: navigation, search


I think we need to sort out Template:Annotated image before we go any further, as we're starting to make serious use of it - and so far we appear to be the only users. I think it needs to be revamped so that users have much more explicit control. I think a suitable box structure might be something like:

  • Outer DIV, which also contains caption. Sized as next div plus 2px all round.
    • Inner border DIV. Sized explicitly by user.
      • Picture DIV. Absolute positioning within Inner border DIV, default to centered horizontally and vertically (vertical centering will need exprs).
        For flexibility and maintainability of position, it might be nice (not essential) to support right and bottom params. I'd leave this until "phase 2".
      • Annotation DIVs. Absolute positioning within Inner border DIV. Sized automatically. Maximum control over internal formatting (color, font-weight, etc.). Should if possible support any (X)HTML that's allowed in a DIV.

I suggest we develop it in a sandbox page. Once we're happy, I'll convert existing uses, which will also serve as test cases - only fair, since I'm the one suggesting this. Philcha (talk) 10:07, 29 June 2008 (UTC)

Done. Philcha (talk) 22:47, 30 June 2008 (UTC)

This template is broken, inserting Wikipedia's example image along with the intended file. See Template:Annotated_image/doc/Samples for examples. Xxovercastxx (talk) 01:51, 3 April 2012 (UTC)

Firefox does too have text scaling.[edit]

Only Google Chrome does not. And that is one of the reasons I will never use Chrome. Scaled up images look blurry as all get out. — trlkly 12:19, 28 May 2012 (UTC)

It's a shame[edit]

This template could be really useful -- a simply application is cropping an existing image "on the fly" for use in a particular context, without the need to clog up commons with a separate, cropped version of an image already on file. (and the crop can be adjusted without having upload another image!) But the documentation is hopeless. EEng (talk) 01:53, 22 August 2013 (UTC)

Will it be possible to use percentage for cropping rather then amount of pixels?[edit]

Will it be possible to use percentage rather then amount of pixels? e.g. crop 9% from the top rather then "-22" pixels?. I have used it recently and the experience was rather inconvenient. thanks. Ykantor (talk) 20:50, 17 September 2013 (UTC)

Eliminating frame around image[edit]

Is there a way to eliminate the frame that appears around an Annotated image? (I want to put an Annotated image into a context that already has a frame.) I might hypothesize that it could be done with either the "image-css" or "outer-css" parameter, but I don't know enough about them or CSS itself to know how. BTW I hope someone sees this sometime this year! (talk) 11:03, 26 May 2015 (UTC)

Interactive image icon[edit]

The image above contains clickable links

I've added a The image above contains clickable links icon to the captions of images that use this template. I've found that users seem to rarely realise that the images are interactive, so an icon that prompts them to test should be useful to readers.

I think having it on as default is probably the better option, but I've added an option to use |icon=none to remove it. T.Shafee(Evo﹠Evo)talk 11:31, 2 January 2016 (UTC)

This should probably have been discussed beforehand, and definitely be tested in the sandbox before imnplemeting it. -- [[User:Edokter]] {{talk}} 12:21, 2 January 2016 (UTC)
Apologies, I thought the template was narrowly enough used to be within the realms of WP:BOLD. I'm happy to revert whilst discussions occur! I guess, the main points are:
  1. whether an icon is needed at all
  2. whether the image is appropriate
  3. what the ideal mouseover text is
Despite my over-enthusiastic implementation, I'm open to people's opinions, suggestions and criticisms! T.Shafee(Evo﹠Evo)talk 00:09, 3 January 2016 (UTC)
@Evolution and evolvability: I personally like the icon. I noticed it was added to another template as well ? Probably better to standardize it's look and wording in a single template of it's own. Also, it only needs to be added inside the thumbcaption, the other caption where it was added will probably not work. —TheDJ (talkcontribs) 14:43, 12 April 2016 (UTC)
I don't know about you guys, but I'm one of the most devoted users of this template and I find the icon bothersome. Wikipedia uses pop-up windows which display the whole image at an instance as soon as you place your cursor directly on the zoomed image. There's absolutely no need for a confusing icon in front of a stand-alone wp:caption. The icon doesn't do anything. Its meaning is unclear and its size overbearing. If you insist on adding it, please set the icon default parameter to |icon=none| not to force it on already implemented templates by surprise, and against the wish of users like me. Thanks, Poeticbent talk 15:17, 12 April 2016 (UTC)
As a user of the template, you probably aren't the target audience of an icon like this. I'd say if there are some indications that 'the general public' gains more understanding on how to use the content, then that is a good thing and should be encouraged. Experienced editors can always use their personal css stylesheets, to hide every little thing they find useless, but the burden for discovery should not be on the general public. —TheDJ (talkcontribs) 15:26, 12 April 2016 (UTC)
There seem to be a little misunderstanding with regard to what I just said. I do not want my "target audience" or the general public as you call it, to be bothered with an icon that does not serve encyclopaedic purpose per WP:ICONDECORATION please. Poeticbent talk 15:41, 12 April 2016 (UTC)
I understand being wary of cluttering Wikipedia with icons and other paraphernalia. However, in this particular case, I think it is still reasonable to use a specific icon to indicate that the image above is fundamentally different to the other 99% of images on Wikipedia. I that think the icon (which displays a tooltop of "The image above contains clickable links" when moused-over) satisfies WP:ICONDECORATION's requirement for "visual cues that aid the reader's comprehension, or improve navigation". The issue I have found with annotated/interactive Wikipedia images is that readoers don't think to click on the text, and so never find out that it contains links. T.Shafee(Evo﹠Evo)talk 10:56, 13 April 2016 (UTC)
  • Data point One thing I discovered is that some readers think they're supposed to click the Interactive icon.svg itself - -not sure how to fix that. EEng 18:44, 13 April 2016 (UTC)

Mobile browser issues[edit]

I recently updated {{AI4}} to improve the rendering of wide AI4-templated images in mobile browsers by wrapping the entire template in a table. The table wrapper allows horizontal scrolling for wide images in a mobile browser, however without the table, the right side of wide images is cut off. An example would be the current Template:annotated image/testcases page (permalinked version: Special:permalink/697862202). If this page is viewed in a mobile browser, or with the mobile browser preview gadget (Special:Preferences#mw-prefsection-gadgets → check the box for "Mobile sidebar preview" under the heading "Testing and development"), the wide images on that page (i.e., the first 2 images that appear) will not render correctly: a portion of the right side of the image is cut off.

If it's desired, I could easily update this template to incorporate the same functionality that I added to template:Annotated image 4 to correct this problem. Seppi333 (Insert ) 22:09, 10 August 2017 (UTC)

Please don't, that's a terrible solution. Let's find a better solution using proper css. This templates are already quite enough of a nightmare. —TheDJ (talkcontribs) 23:04, 10 August 2017 (UTC)
If you've got a better workaround, I'm all for it. Keep in mind that about half of all article pageviews are from mobile browsers, so this is a fairly pressing issue that needs to be corrected ASAP. Seppi333 (Insert ) 23:35, 10 August 2017 (UTC); edited 23:49, 10 August 2017 (UTC)
I hope that a mobile-compatible update can be worked out given the increasing prevalence of mobile browsing. Well done to Seppi for spotting the solution, and well done to theDJ for adapting it to CSS. It's great to see {{AI}} and {{AI4}} continuing to improve, since I'm a big fan of their functionality. T.Shafee(Evo&Evo)talk 23:53, 10 August 2017 (UTC)
Minor point: Template:AI redirects to Template:Artificial intelligence. Face-tongue.svg Seppi333 (Insert ) 00:10, 11 August 2017 (UTC)
FYI: {{AI1}} now redirects here. Seppi333 (Insert ) 17:34, 11 August 2017 (UTC)

────────────────────────────────────────────────────────────────────────────────────────────────────@TheDJ: does the inclusion of the role attribute in the table wrapper resolve the concerns you had about the use of a layout table? I'm open to alternative solutions if it doesn't. Seppi333 (Insert ) 17:39, 11 August 2017 (UTC)

No, but at least it will be less annoying for screen reader users. —TheDJ (talkcontribs) 17:47, 11 August 2017 (UTC)
Do you have any ideas on how we could go about using CSS to replicate the layout that the table provides (i.e., the image scrolling)? I'm willing to tinker around with the formatting in CSS if you can point me in the right direction. Seppi333 (Insert ) 18:00, 11 August 2017 (UTC)