Template talk:Annotated image 4

problem
Hi. Can someone tell me what's wrong with this feeble attempt please! The doc file mentions 'SVG images are allowed.' but is that the only option? I take it it needs to be a vector? Llywelyn2000 (talk) 14:58, 6 December 2014 (UTC)
 * Hey there! The template takes raster images too. The only thing preventing the current revision from displaying is that the width and height need to be specified in addition to the image-width. If an image doesn't need to be cropped, image-width and width should be the same, with the height value determined by the image file's aspect ratio.  So, if you wanted that image, which measures 788x941 pixels, to have a width of 500, the corresponding height would need to be about 597 pixels (500x597).
 * The only reason the template was coded this way is that width and height can be used with image-left and image-top to crop or expand the area around an image, both of which I've found useful at times. Seppi  333  (Insert 2¢ &#124; Maintained) 00:22, 7 December 2014 (UTC)
 * Hey! Many thanks! Brilliant stuff! This is really useful, and should be suggested as the default for ALL diagrams etc on enwiki, so that other languages can use and amend the text, rather than slow, hard work on image pixels! Many thanks! Llywelyn2000 (talk) 03:43, 7 December 2014 (UTC)
 * Looks good. Glad you like it.  Seppi  333  (Insert 2¢ &#124; Maintained) 04:02, 8 December 2014 (UTC)

Using the formatting
Hi, I love the annotated image template. Before I start to use it, I wanted to ask a couple of questions: Thanks! T.Shafee(Evo&#65120;Evo)talk 03:42, 26 March 2015 (UTC)
 * When the image is clicked on to expand it, the annotations disappear. Is there a way to include them in the image?
 * Why do you tend to make a template for the image then embed the template in an article?
 * Are there any common mis-formatting mistakes that I should be aware of?

I could also remove the image background hyperlink to prevent the media viewer from opening on a mis-click; although, for attribution purposes, I'd need to add an image thumbnail icon which hyperlinks to the commons page instead. See example to the right - it has no background link.
 * Hey! Thanks for the positive feedback.  In response to your questions:
 * At the moment, there's no way of doing this, although I could add an optional parameter to bypass the standard media viewer and go straight to the commons page when clicking the image. As long as there's annotations on the commons media file (commons uses  for this), the page will display the annotations in that template's format. That template's annotations show up in the yellow text boxes that appear when mousing over the image; see COMMONS:File:ΔFosB.svg for an example.

If you'd like to have either of those options (or anything else) in this template, let me know and I'll see about adding that functionality.


 * If the annotated image is going to be used in multiple articles, or simply might be in the future, it's usually best to make an image insertion template instead of add it directly to an article. Doing this reduces the amount of work for editors when updating the source code, since changes only need to be made on 1 centralized page instead of every page that includes the annotated image. It's probably also worth doing this if the image includes a lot of annotations because, in those cases, the annotated image 4 template will take up a lot of space in the article's source code. As an example, in the collapse tabs below, I've included the source code and resulting image of the most heavily annotated/elaborate annotated image template that I've made thus far. It's probably best to just transclude that instead of place it directly into the article text.


 * The template is pretty new, so I haven't gotten enough feedback to identify problem areas yet - I plan to revise the template to make it more user friendly based upon the feedback I get. Personally, the only thing I've found to be a little finicky is the annotation template's formatting, since it literally requires no spaces between vertical bars and the first two unnamed parameters for the x and y coordinates (I habitually add spaces which creates problems for me).  I covered this issue in the documentation here: Template:Annotated image 4/doc.

Note that the annotated reference group and caption references show up in the references section at the end of the article as opposed to below the image in this example.


 * References


 * Image color legend

I'm happy to assist others with using this template and I'd also appreciate the feedback for improving its user friendliness.  Seppi  333  (Insert 2¢ &#124; Maintained) 19:44, 26 March 2015 (UTC)
 * Please let me know if there's anything you find less than intuitive or if you need any help with annotating a particular image though!

Thank you for the really helpful responses! I've used them to develop Template:Glycolysis_summary. One thing that has bugged me is that images in the mobile phone viewer, the right hand side of the image is lost if the images is wider than the screen. Is there a way to allow scrolling of the image as happens in the three images in Picture_tutorial?

Also. The idea of adding a  parameter would be amazing! That way, it would be possible to redirect to a version of the image with annotations included in the picture (i.e. ). T.Shafee(Evo&#65120;Evo)talk 12:22, 28 March 2015 (UTC)


 * Unfortunately, there's no way that I know about to fix the issue with the annotation template when viewed on mobile phones. I'm aware of it, but I also figure the template isn't really useful for mobile viewers anyway, since it's very difficult (at least for me, when using my iphone) to click an annotation instead of the image background.
 * I've made the template bypass the mediaviewer when clicking the background link by default. It now goes straight to the commons file page. Using the link parameter will allow the background link to be manually targeted in the template call. Using the parameter yes will remove the background link altogether, but, when removing the on-click link, it's imperative for copyright purposes that something on the image or in the caption be added which links to the commons page.  I'm thinking about making it append [[Image:Desc-20.png|15px]] to the end of the caption when this parameter is used, where this icon would link to the commons file page of the associated image when it is clicked.  I've added an example of what I'm suggesting in the collapse tab below:


 * References


 * Image color legend

Also, if the image is retargeted to a different commons page than the one associated with the template image, there would need to be a link somewhere on the retargeted file description page to the commons page of the template's image. I'm not sure if it's clear what I mean by this, so I'll provide an example of what I mean by this if necessary. In any event, I need to update the template documentation within the next few days.  Seppi  333  (Insert 2¢ &#124; Maintained) 02:52, 1 April 2015 (UTC)
 * Is this solution agreeable with you, or do you prefer a different option?
 * Forgot to add: I couldn't add the standard thumbnail's expand icon to the top right because of the way I coded the template (i.e., I can't add the "thumb" option to the source code without breaking the template).  Seppi  333  (Insert 2¢ &#124; Maintained) 02:57, 1 April 2015 (UTC)
 * Excellent, thank you. I've implemented it in Template:Glycolysis_summary and it seems to be working well. Agree with the idea of adding a [[Image:Desc-20.png|15px]] link too when you have the chance. T.Shafee(Evo&#65120;Evo)talk 10:23, 1 April 2015 (UTC)


 * I've found a work-around for improving the rendering on mobile devices - embedding the template in a table allows it to be scrolled though if it doesn't fit on a screen (rather than be clipped). See Glycolysis on a mobile or tablet for an example. Doesn't seem to cause any other problems as far as I can see. T.Shafee(Evo&#65120;Evo)talk 10:04, 11 April 2015 (UTC)

Neat, I'll have to test this out a bit - I'll mention it in the documentation if I don't find any weird bugs. I'm a bit behind on my wiki-editing, so I'm probably not going to get around to tweaking the template's code for nolink or adjusting the documentation for a week or two.  Seppi  333  (Insert 2¢) 06:48, 17 April 2015 (UTC) Edit: Nevermind, I updated the nolink code to include the icon functionality. I used it in psychostimulant addiction since it has a ton of wikilinks.  Seppi  333  (Insert 2¢) 07:09, 17 April 2015 (UTC)

Mobile version image scrolling
I think the problem may have actually been resolved by an update in the wikimedia software since you mentioned this, because these images now display in scrollable windows on my iphone's browser; is this resolved for your mobile devices as well, or is it still an issue?  Seppi  333  (Insert 2¢) 12:52, 11 August 2015 (UTC)


 * Interesting. Sadly it still remains un-scrollable on my android phone using chrome - checked using eukaryote gene structure. Placing the template in a 1x1 table still seems to be the only bodge that works for me. T.Shafee(Evo&#65120;Evo)talk 23:59, 11 August 2015 (UTC)

I'm considering updating the functionality of to automatically nest the annotated image in an invisible wikitable that uses a switch statement to set the table alignment and the image alignment together with the align parameter's input (it seems unnecessary and a bit redundant to create a second alignment parameter just for the table IMO). I need to thoroughly test this switch statement functionality on different mobile/desktop browsers with the 4 templates that I listed at Talk:Amphetamine first though since their combined transclusion count spans around 20–30 different pages (they have different alignment settings on each page).  Seppi  333  (Insert 2¢) 01:17, 21 August 2016 (UTC)
 * Have you encountered any rendering issues from putting AI4-templated images into a nested table since you first started doing this? Also, does your mobile chrome browser have issues with left–right scrolling with very wide wikitables that don't contain images, like, or is it just an issue with left–right scrolling the AI4-templated images that are nested in a wikitable?
 * I've not found any problems with the scrolling of wikitables, or AI4 templates nested in wikitables. I've stress-tested it in a few platforms: firefox, chrome (desktop and android phone), safari (desktop and iphone), edge. An alternative is that it may be possible to do a similar thing using a  with some CSS overflow property. T.Shafee(Evo &#38; Evo)talk 08:09, 21 August 2016 (UTC)
 * Hmm... that's a good point; it'd be a lot simpler if this could be accomplished with HTML/CSS than by nesting every image in a wikitable. I'll look into that.  Seppi  333  (Insert 2¢) 10:51, 21 August 2016 (UTC)


 * Left: style="float: left;"
 * Center: style="margin-left: auto; margin-right: auto; border: none;"
 * Right: style="float: right;"



This doesn't seem to be an issue on my phone anymore due to intervening WP software updates. I haven't checked on the Wikipedia iphone app since it just seems broken in a number of other ways at the moment. Are you still seeing an issue that would require some form of reformatting in the browser(s) on your mobile device(s)?  Seppi  333  (Insert 2¢) 23:06, 13 July 2017 (UTC)
 * Nevermind. I just started seeing this again. Since the issue also appears in the mobile browser preview gadget (from Special:Preferences), I modified the template to include a 2nd switch object for a table wrapper (Special:diff/772063089/794666466). Sorry that it took me so long to get around to this.  I feel like our readers got screwed the most. Anyway, it may be worth removing the nested table syntax from the template where it was used in templates or articles prior to this update.  Having the 2nd table wrapper adds about 10 px in width which isn't a big deal, but it's still probably worth removing it since it's no longer necessary.  Seppi  333  (Insert 2¢) 10:44, 9 August 2017 (UTC)
 * Fantastic work! Sorry for not replying to the earlier message. I've updated the templates that I mage that use . The pages seem to now be working perfectly on desktop and mobile so far as I can see (e.g. lead images in Gene and Glycolysis)! Thanks again, T.Shafee(Evo &#38; Evo)talk 11:08, 9 August 2017 (UTC)


 * Actually, following that update, I noticed the following rendering issue in the amphetamine article:


 * I've updated the template again so that there shouldn't be any issues when there are juxtaposed tables now.  Seppi  333  (Insert 2¢) 11:11, 9 August 2017 (UTC)

Annotated image policy
I've made a post on WP:IUP to discuss when wikilinked image annotation is appropriate. T.Shafee(Evo&#65120;Evo)talk 02:40, 19 April 2015 (UTC)

Icon


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  to remove it. T.Shafee(Evo&#65120;Evo)talk 10:36, 2 January 2016 (UTC)
 * Good idea, thanks for adding it.  Seppi  333  (Insert 2¢) 14:31, 2 January 2016 (UTC)

"Upright"-like functionality, sizing images relative to user preferences
I'd really like to use this template for its cropping functionality (so I can display a thumbnail which is the crop of some existing image, without uploading a separate cropped version of the image) but there's a problem: as far as I can tell all the sizing functions here work in absolutes i.e., and don't offer anything like the   functionality found in the normal image syntax. I realize that the crop coordinates and sizes must (?) be absolute (relative to the base image), but it ought to be possible, after the crop step, to size the image according to upright, thus respecting the users image-size preferences. Can this be added? Or is it already there and I'm just not seeing it?

Or, if there's some other way to get this functionality (again, all I want is the cropping function) please tell me where to find it. Thanks! EEng (talk) 15:08, 10 January 2016 (UTC)
 * I'm not sure how to encode a reference that user preference in a template. Assuming I were able to, implementing that would require scaling the font size as well as all the coordinates for annotations and the image itself; I'm not sure if fractional font sizes will create problems or not, but I wouldn't mind adding upright functionality to the template if I knew how.  Seppi  333  (Insert 2¢) 17:38, 10 January 2016 (UTC)
 * Thanks for taking an interest! Take a look at the weird image= syntax here, which in a way is a use of upright by a template, though maybe these params are just getting blindly passed into something deeper down that knows how to use upright.
 * Assuming you can get past that problem, that leaves the problem of the font scaling. Well like I said, I only want the cropping functionality, and though I hate to suggest another awful confusing hackish limitation, I wouldn't mind if the upright functionality was only available if there's no text to worry about scaling. Or you could just invent a separate template (which I also hate to suggest).
 * There really are a lot of potential uses for a crop function. Remember out discussion at Wikipedia_talk:Image_use_policy? With cropping functionality, we wouldn't have to have two different images uploaded -- one the full image, and one cropped for the thumb.
 * EEng (talk) 18:02, 10 January 2016 (UTC)


 * Conceivably, you might be able to use m:Help:Calculation functions to scale fonts, but only to nearest integer font size I think. It'd be a lot of work I suspect. T.Shafee(Evo&#65120;Evo)talk 03:31, 11 January 2016 (UTC)

Can there be frameless option?
Can there be any way to get rid of the frame or border around the image? I tried myself but couldn't figure it out. Thanks.--MCEllis (talk) 22:49, 15 February 2016 (UTC)
 * The frame unfortunately can't be removed at the moment- sorry.  Seppi  333  (Insert 2¢) 23:55, 15 February 2016 (UTC)
 * I know that you've already been made aware of this since you tested it at Template:Annotated image 4/testcases; however, I figured I'd just leave a note here for others: a frameless option was added to this template, thanks to.
 * To remove the default thumbnail frame, use true.  Seppi  333  (Insert 2¢) 03:08, 25 March 2017 (UTC)

Right margin


In a discussion with, I noticed that this template does not produce the same right margin as the standard thumb image. so, if you put it next to an infobox or a standard right floating thumb image, you get a ragged right margin. can we update this template to use the same right margin? it looks like it's just a few pixels off. I added an example above with a black line to help visualize the difference. Frietjes (talk) 13:52, 20 January 2018 (UTC)


 * I looked at the margins on this template yesterday, so I know for certain that there's 0 margin/padding of the image with respect to the right side of the page; however, it just occurred to me that the reason there's a small indent/margin to the right of the image is that this template is nested inside a borderless table.


 * The only reason this template was coded that way is to allow relatively wide images to be scrollable on mobile. Without that table, wide images end up being cut off on the right on mobile browsers and don't render with a left/right scroll.  That severely limits the functionality of this template on mobile browsers. IIRC As illustrated below,  suffers from the same issue, but it's not corrected with a table in that template.
 * Below is with & without table nesting compared with 


 *  Seppi  333  (Insert 2¢) 23:30, 20 January 2018 (UTC)
 * , so are you saying there is no way to have the margin aligned without breaking the mobile version? Frietjes (talk) 17:19, 21 January 2018 (UTC)
 * Unless there's an alternate method that can be used to enable left/right scrolling of the annotated images, then unfortunately no. If you happen to know of a method or discover one in the future, please let me know.  Seppi  333  (Insert 2¢) 05:30, 22 January 2018 (UTC)
 * who might know. Frietjes (talk) 15:58, 22 January 2018 (UTC)
 * I'm out of idea for this, but I think this could be rewrite without table markup. --Great Brightstar (talk) 16:38, 22 January 2018 (UTC)
 * Jdlrobson (talk) 19:11, 22 January 2018 (UTC)

I've pasted the template code for, excluding the table, in Template:Annotated image 4/sandbox. You can work from that if you'd like. The last image in this section is now transcluded from the sandbox version.  Seppi  333  (Insert 2¢) 21:36, 22 January 2018 (UTC)
 * It's not an image. It's a table that wraps an image. The table adds extra spacing, because all tables have cell-spacing by default. I've fixed this for desktop now, but for mobile it's a lot more difficult, because tables are simply troublesome on narrow screens and come with their own set of styling rules (for a reason). So the solution will be to get rid of the table. I haven't checked yet if that is possible, but it probably is (considering this thing is apparently presentational). —Th e DJ (talk • contribs) 23:07, 22 January 2018 (UTC)
 * Hmm, I thought this might be fixable with jon's code, but the problem here is that this template also tries to do image cropping. That technique is fundamentally broken with "try to show everything even if you don't have enough space". We will have to think about this a bit longer... VERY hard problem. —Th e DJ (talk • contribs) 23:25, 22 January 2018 (UTC)
 * Prior to adding the table wrapper last year, I actually spent a number of hours tinkering with this template in an attempt to find an HTML-based solution to this problem. I eventually gave up since nothing seemed to work. For what it's worth, I agree that the way Template:annotated image and Template:annotated image 4 crop images is rather borked (i.e., render the entire image and then hide the cropped-out area); I didn't code that.  Seppi  333  (Insert 2¢) 01:42, 23 January 2018 (UTC)
 * I've just added  and   properties into sandbox page, then mobile site could automatically scrolling the image in . Please test for actual effects in different devices and web browsers. --Great Brightstar (talk) 15:30, 24 January 2018 (UTC)
 * thats exactly the same thing that noresize already does as well, so superfluous. —Th e DJ (talk • contribs) 19:37, 26 January 2018 (UTC)

Looks fine on desktop chrome & IE as well as mobile safari (vector skin). The image scrollbar appears for the sandbox version on both desktop browsers when you zoom in. It doesn't for the current AI4 template; the horizontal scrollbar for the page has to be used instead. I think that functionality of the sandbox version is an improvement over the current version of AI4.  Seppi  333  (Insert 2¢) 17:06, 24 January 2018 (UTC)
 * yes it fixes the problem, UNLESS the image is also cropped, and too wide to fit in the viewport on mobile. 19:37, 26 January 2018 (UTC)
 * That's unfortunate. I suppose we should add cropped images to the testcases page.  Seppi  333  (Insert 2¢) 06:48, 27 January 2018 (UTC)
 * After creating Template:Annotated image 4/testcases2 with 3 different tests of this template's more complex functionality (i.e., cropping+enlarging images, shifting images outside the thumbnail frame, enlarging the thumbnail frame relative to the image), I noticed 1 issue in each of the 3 AI4/sandbox tests; although, in the last test (i.e., enlarging the thumbnail frame relative to the image), the problem I noticed wasn't with how the image rendered. Rather, I noticed that one of the image annotations was superimposed on top of the caption. I explained the problem that I noticed in each test in the caption of the corresponding AI4/sandbox image.  Seppi  333  (Insert 2¢) 06:57, 27 January 2018 (UTC)
 * I managed to fix the problem in the 2nd and 3rd testcases on that page using overflow:hidden. Now it's just the 1st testcase which is problematic: Template:Annotated_image_4/testcases2. Nevermind, I see what TheDJ meant now in his edit summary.  Doing that just swapped one problem for another since it doesn't appear with a scroll bar now.  Seppi  333  (Insert 2¢) 13:29, 27 January 2018 (UTC)

down scaling with image-width?
If I've understood it correctly, in the Mona Lisa example the source image is 450px wide and the template image-width = 900 which upscales the cropped portion. Is the reverse possible to downscale, e.g. in this case set image-width = 225? I've been experimenting but don't get consistent results. --Cornellier (talk) 14:50, 27 March 2019 (UTC)
 * Cornellier, if your only objective is to scale an image from the default thumb size, use 0.8 or whatever with the standard image syntax. if you are trying to do something else, you should provide more details. Frietjes (talk) 00:09, 30 March 2019 (UTC)
 * Frietjes the goal is to scale and crop. --Cornellier (talk) 02:33, 30 March 2019 (UTC)
 * Cornellier, apparently my response was tldr: if you are trying to do something else, you should provide more details. you may find Template:CSS image crop useful. Frietjes (talk) 12:30, 30 March 2019 (UTC)
 * I am having the same problem - the example (Mona Lisa, upscaling) is not teaching me how to do the same but downscaling. My attempts are:
 * Invasive Spices (talk) 9 December 2021 (UTC)
 * Invasive Spices (talk) 9 December 2021 (UTC)
 * Invasive Spices (talk) 9 December 2021 (UTC)
 * Invasive Spices (talk) 9 December 2021 (UTC)
 * Invasive Spices (talk) 9 December 2021 (UTC)

Image alignment issues on mobile site (m.wikipedia.org)
Hello, quick question. when viewing an "annotated image 4" the image defaults to the left, and doesn't stay aliged to the centre like a normal thumbnail, for example: https://en.m.wikipedia.org/wiki/Cycling_kit. Am I missing something or is this a technical limitation? Thanks. Adenosine Triphosphate (talk) 17:05, 11 December 2023 (UTC)