Template talk:Annotated image

Discussion

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)[reply]

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

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)[reply]

Firefox does too have text scaling.

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)[reply]

It's a shame

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)[reply]

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

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)[reply]

Eliminating frame around image

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! 67.186.19.151 (talk) 11:03, 26 May 2015 (UTC)[reply]

Interactive image icon

The image above contains clickable links

I've added a 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)[reply]

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)[reply]

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:

whether an icon is needed at all
whether the image is appropriate
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)[reply]

@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 (talk • contribs) 14:43, 12 April 2016 (UTC)[reply]

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)[reply]

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 (talk • contribs) 15:26, 12 April 2016 (UTC)[reply]

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)[reply]

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)[reply]

Data point One thing I discovered is that some readers think they're supposed to click the itself - -not sure how to fix that. E Eng 18:44, 13 April 2016 (UTC)[reply]

Mobile browser issues

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 2¢) 22:09, 10 August 2017 (UTC)[reply]

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 (talk • contribs) 23:04, 10 August 2017 (UTC)[reply]

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 2¢) 23:35, 10 August 2017 (UTC); edited 23:49, 10 August 2017 (UTC)[reply]

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)[reply]

Minor point: Template:AI redirects to Template:Artificial intelligence.

Seppi333 (Insert 2¢) 00:10, 11 August 2017 (UTC)[reply]

FYI

– {{AI1}} now redirects here. Seppi333 (Insert 2¢) 17:34, 11 August 2017 (UTC)[reply]

@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 2¢) 17:39, 11 August 2017 (UTC)[reply]

No, but at least it will be less annoying for screen reader users. —TheDJ (talk • contribs) 17:47, 11 August 2017 (UTC)[reply]

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 2¢) 18:00, 11 August 2017 (UTC)[reply]

Seppi333, you can't have something that needs to hide that which is 'too big' (cropping feature) and NOT hide that same area when it is too big to fit at the same time. Those two things just do not mix. Maybe someone can fix it, but it would at least be a full rewrite of the template, possibly by adding another layer of divs. —TheDJ (talk • contribs) 14:48, 15 August 2020 (UTC)[reply]

TheDJ That functionality came from template:annotated image; go complain to whoever coded it per its history. I merely forked the template and expanded the functionality. Anyway, I am extremely busy IRL due to running a newly formed company; I won’t be active on WP for the next 8-12 months. Seppi333 (Insert 2¢) 19:12, 15 August 2020 (UTC)[reply]

Can "Template:Multiple image" and "Template:Annotated image" work together?

I am struggling to figure out how to use this asome Template:Annotated image work with Template:Multiple image. I have groups of images that work best when they are portrayed together and some need to be zoomed-in. Since I've not been able to figure out how to use these two templates together, I've been forced to crop and upload new versions of these images, which seems inefficient and wasteful to me. Does anyone know how to make the two templates work together? --McChizzle (talk) 17:14, 23 March 2019 (UTC)[reply]

McChizzle, no. You would have to write a separate implementation for that. Generally.. try not to overcomplicate things though. It just makes it harder to keep things working. —TheDJ (talk • contribs) 17:45, 23 March 2019 (UTC)[reply]

Okay, thank you. --McChizzle (talk) 14:43, 24 March 2019 (UTC)[reply]

You can scale an image. You can crop an image. Just don't ask for both.

To me, cropping and scaling have always gone together, like pan and zoom. Here they seem to be separate:

The [File:xxx] markup has no parameters to specify cropping. It takes a display-width parameter, which it assembles into a long URL for the thumbnail image, which it puts in the HTML. The URL asks the image server for a scaled image, which it scales on-the-fly.
The {Annotated image|image=xxx...} template has parameters for cropping, which it puts into the HTML, along with the URL of the original image. The image server serves the entire image, and the browser does the cropping. (Consider this when cropping a huge image down to a tiny portion!) But it has no parameters for scaling – if the source image is scaled large, the cropped portion has the same scaling, and can't be used.

There are potential ways to provide both scaling and cropping:

Add cropping to the image server. The [File:xxx] markup would add the cropping parameters into the image URL, and the image server would crop and scale accordingly. (Optionally, the {Annotated image|image=xxx...} template could change from browser-cropped images to server-cropped images.)
Add scaling to the {Annotated image|image=xxx...} template. The template would assemble the scaling parameter into a long URL, which would pull a scaled image from the server (like [File:xxx] already does). It would have the browser crop the scaled image, similar to what it already does. - A876 (talk) 06:14, 22 July 2019 (UTC)[reply]

Mobile device corrupted rendering of annotation text

An example is shown at "https://wiki.riteme.site/wiki/History_of_life#Membranes_first:_Lipid_world" with the annotated image for "Cross-section through a liposome". On FireFox on the desktop, the AIm is displayed properly. On a Galaxy S8+—both on the Wikipedia app and on the FireFox browser—the annotation text rendering is corrupted as shown. — Preceding unsigned comment added by SwalADuntI (talk • contribs) 16:07, 13 March 2022 (UTC)[reply]

Unreadable caption on mobile

At Felo de se#Detailed evolution (old version) the caption seemed to be rendered at the full width of the image, but cropped to the same width that the image was cropped to, making it unreadable. For some reason this only happens on mobile. I fixed it by wrapping the caption in a div with max-width set to the width of the crop. But this sort of hack shouldn't be needed – it is obviously a problem with the template itself. Hairy Dude (talk) 00:22, 21 January 2023 (UTC)[reply]

I had the same issue on Colón, Panama. I replicated using desktop browser hitting en.m.wikipedia.org with minerva skin when the screen is so narrow that the image box is placed on its own line rather than floating right of text. I guess the CSS Flexible Box Layout kicks in and interferes. In browser developer tools commenting out this CSS snippet fixed the issue:


.content .thumbcaption {
    width: auto !important;
}

As a hack, wrapping in div style width 100% fixed in preview but not on save; as a worse hack. changing 100% to 202px fixed on save, at least in minerva skin.

jnestorius^(talk) 23:21, 6 February 2023 (UTC)[reply]

This seems like a bug in the minerva styling. Please report bugs and don't start stacking workaround upon workaround upon workaround, it makes everything less maintainable. —TheDJ (talk • contribs) 00:13, 7 February 2023 (UTC)[reply]

Can you advise where to report this please? jnestorius^(talk) 01:05, 7 February 2023 (UTC)[reply]

I've reported it at Wikipedia:Village pump (technical)#Template:Annotated image. jnestorius^(talk) 16:38, 14 February 2023 (UTC)[reply]

Doc, "image-width", "second number" ???

On the "image-width" setting it says "Width of the original image (in pixels). (Look on the file's page and use the second number in the image size.)"

I'm kinda mystified why is says "second number". As far as I know image size dimensions are always in [(X)Width, (Y)Height] order, ... or is it referring to something else I don't get ??? MvGulik (talk) 21:38, 6 July 2024 (UTC)[reply]

Potential Con's ?

Are there any potential con's for the MW system in general when using this template extensively.

Like what if I stuff a lot of icons in a single image. Or displaying all those icons separately with this template inside a single page.

Saving such a page might take a bit longer than normal, but that would be more or less a minor thing.

(Figure I quickly hit some MW include limit that will limit how meany times it can be used on a single page)

MvGulik (talk) 13:24, 7 July 2024 (UTC)[reply]

Minimum width for crop?

What does not seem to work: cropping the first of twenty silhouettes using width 50 from 1000 out of File:body_roundness_index_silhouettes.svg. Cropping two or three silhouettes using width 100 and 150 works fine.

1 NOK: width 50 should crop just the first silhouette	1 2 OK: width 100 crops 2 silhouettes	1 2 3 OK: width 150 crops 3 sihouettes
OK: Same crop width 50 using Template:CSS image crop

Does Annotated image have a minimum width for cropping? Uwappa (talk) 16:20, 11 October 2024 (UTC)[reply]

Wording about size of source image

The coding under the "Cropping" heading in this template includes the note: "choose any width, as you like it. It doesn't matter the factual width of the image". It seems to me that it does matter. For example, if I set the width to 1000px instead of 2000, a part of the image, much reduced in size, appears; and at 3000 it shows a close-up of part of the image.

I suggest something like the following would be easier to understand (I've changed the nominal size to 1000 to make the proportions more able to be perceived as decimal fractions):

|image-width = 1000 <!-- This number does not affect the image's display – it simply serves to provide a [[lowest common denominator|denominator]] for the numbers in the following 4 lines, resulting in four [[fraction]]s. It has no connection with the actual number of pixels in the image. -->

And this would be the over-all coding (which includes some copy-edits too):

{{Annotated image
| image = Mona Lisa color restoration2.jpg
| image-width = 1000 <!-- This number does not affect the image's display – it simply serves to provide a [[lowest common denominator|denominator]] for the numbers in the following 4 lines, resulting in four [[fraction]]s. It has no connection with the actual number of pixels in the image. -->
| image-left = -425<!--This sets where the left-hand edge of the image will be in the article. Remember to include the "-" minus character.  --> 
| image-top = -400<!-- This sets where the top edge of the image will be. Remember to include the "-" minus character. -->
| width =  125 <!--By  specifying the width, this sets where the right-hand edge of the image will be. -->
| height =  125 <!-- By  specifying the height, this sets where the right-hand edge of the image will be. -->
| float = left
| annotations = <!-- Empty or not, this parameter must be included. -->
| caption = The cropped version
}}
[[File:Monalisa.svg|thumb|right|300px|The criteria for which values are specified in the coding]]

I'm sure this can be improved on, so I look forward to some modifications! :-) Cheers, Simon – SCHolar44 🇦🇺 💬 at 01:39, 14 December 2024 (UTC)[reply]