Template:CSS image crop is permanently
protected from editing because it is a
heavily used or highly visible template. Substantial changes should first be proposed and discussed here on this page. If the proposal is uncontroversial or has been discussed and is supported by
consensus, editors may use {{
edit template-protected}} to notify an administrator or template editor to make the requested edit. Usually, any contributor may edit the template's
documentation to add usage notes or
categories.
Any contributor may edit the template's sandbox. Functionality of the template can be checked using test cases. |
This template was considered for deletion on 7 March 2012. The result of the discussion was "keep". |
As I understand it, «Location = right» should position the image box on the right of the page. This is no longer working. Would anybody be able to fix this? (Location = tright is a poor workaround; the thumb then lacks padding on the right) — WOFall ( talk) 17:58, 28 May 2010 (UTC)
— Code Hydro 00:32, 13 September 2010 (UTC)
Hello, If I crop different portions of the same base image several times in the same article, is this unique base image sent several times over the internet to the browser, or is it sent once and then reused from the browser memory buffer ?
The idea is to create a base image representing a gallery of portrait thumbnails (about 30 people), and then crop this gallery to extract the right portrait to the right place (genealogy). If I had to dynamically resize all the individual portraits, the page size would be huge (about 50 Mb) and the downloading would also take too much time.
You can find here an example of what I wish to achieve visually -- but want to avoid technically. -- Olivier1961 ( talk) 10:47, 15 October 2010 (UTC)
This template needs a sandbox. I will use Template talk:CSS image crop/sandbox in the meantime. 84.127.80.114 ( talk) 16:09, 20 August 2014 (UTC)
Please compare
List of Presidents of the United States (mobile) with
List of Presidents of the United States (desktop). On mobile, the images seem resized instead of cropped. -- [[
User:Edokter]] {{
talk}}
17:33, 29 August 2014 (UTC)
@ Edokter: do I understand correctly that you've replaced the magnify-link parameter with Link? The documentation needs to reflect the change if so. I'd also suggest including it in one of the testcases you created. Cheers. — WOFall ( talk) 13:27, 6 December 2014 (UTC)
|Link=
is closer to the original image syntax. (I may also add/replace |Description=
with |Caption=
and make the parameter names case insensitive.) -- [[
User:Edokter]] {{
talk}}
13:42, 6 December 2014 (UTC)
|Caption=
sounds fine too, apart from the obvious migration concerns. —
WOFall (
talk) 15:42, 6 December 2014 (UTC)-- [[
User:Edokter]] {{
talk}}
17:41, 14 December 2014 (UTC)
<p>...</p>
bug again. I have protected the template; test all your edits in the sandbox and then discuss them here. Also, if this keeps going, we end up right where we started. So we should decide on parameters now; Any invalid parameter in use is just bad luck. -- [[
User:Edokter]] {{
talk}}
16:37, 15 December 2014 (UTC)
@ Edokter: Thanks for your recent patch. Just be careful about removing "redundancies" as it did break the template under certain conditions. Some redundancies are to allow the template to tolerate input based on older versions of the template. Anyhow, I have fixed it. Good job re-organizing the code to make it more human-readable. Would certainly make it easier for others to maintain. Good job! — Code Hydro 19:42, 6 December 2014 (UTC)
-- [[
User:Edokter]] {{
talk}}
19:49, 6 December 2014 (UTC)
-- [[
User:Edokter]] {{
talk}}
20:07, 6 December 2014 (UTC)
if you are going to remove the px stripping from bSize, you should remove it in all locations, not just in one. Frietjes ( talk) 16:01, 7 December 2014 (UTC)
I have created a tool that should make it easier for some folks to use this template available at User:Codehydro/Auto CSS image crop. You may audit the source code at User:Codehydro/Auto CSS image crop/script.js. I'm pretty sure that user scripts in my namespace cannot be edited by anyone other than myself, so as long as you trust me, then the script is safe ;) Happy cropping! — Code Hydro 16:42, 8 December 2014 (UTC)
As mentioned above, certain templates ({{
IrinotecanPathway WP229}}) are using |Image={{
Annotated image}}
, and specifying |magnify-link=
to fix the magnify-icon. Assuming we bless this template combination, I suggest:
|magnify-link=
|AnnotatedImage={{
Annotated image}}
, always combined with |Image=underlying-image
.Image would always be used as the magnify-icon link.
This would also clean up the output, rather than generating [[File: ...]]
with the output of {{
Annotated image}} (a div block) dumped in the middle. Otherwise we could consider this combination broken and remove magnify-link anyway. —
WOFall (
talk) 19:15, 15 December 2014 (UTC)
|ImageDiv=
rather than |AnnotatedImage=
, see
Template:CSS image crop/testcases § Annotated Image. —
WOFall (
talk) 21:10, 15 December 2014 (UTC)[[File:..]]
tags are hidden beyond the crop. Perhaps the more flexible thing would be just to rename this CSS crop and provide a parameter like not_an_image = true
to suppress the File tags. heck, I'll test it out....Yep {{ chart}} works as I expected XD Imagine the possibilities this opens!!! — Code Hydro 13:53, 18 December 2014 (UTC)
-- [[
User:Edokter]] {{
talk}}
15:32, 18 December 2014 (UTC)Is there a version for wikipedia in Spanish ? Thanks
Initial testing shows this can also support PDF files, but I'm unable to set a specific page. Is there a way to do it or does it need to be introduced?-- Uwe a ( talk) 12:48, 14 May 2015 (UTC)
-- [[
User:Edokter]] {{
talk}}
13:12, 14 May 2015 (UTC)
|Page=
parameter. -- [[
User:Edokter]] {{
talk}}
16:01, 14 May 2015 (UTC)The template now shows even the file name in the captions if the Description parameter is used. A mod should check it out. Penpaperpencil (Talk) 16:49, 12 June 2016 (UTC)
-- [[
User:Edokter]] {{
talk}}
17:19, 12 June 2016 (UTC)
Hello. I'm looking into using this template on Wikibooks, where it could potentially be very useful. However, I'm running into an issue when an image needs to be anchored somewhere in the middle of a paragraph. The template causes long paragraphs to break where this is not wanted. (comment continues below)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
I'm not saying the above is necessarily the best possible way to achieve this, but MediaWiki has some annoying parser bugs and this is the best I could think of for the moment. If you can think of a better way, please edit away. I also think the ability to specify the crop coordinates in terms of the original image coordinates, not the resized coordinates, would be very helpful. I think that to achieve that an extra parameter would be needed specifying the original image size.
Is it possible to add Scale option to this template ? For now it seems to use only 100% scale, so it's not possible to use huge cropped images in articles. Mnavi ( talk) 21:27, 5 August 2017 (UTC)
|bSize=
. That will be the scaled original file, on which the crop is made. -
DePiep (
talk) 18:27, 18 September 2017 (UTC)As reported on phab:T183822, the thumbnails' captions are not displayed correctly with Timeless: you can see it by scrolling down this Timeless view to the second caption.
Waiting for Timeless's skin to take this into account, it could be fixed either by copying the Vector/Monobook/... style applied to the ".magnify a" links to Timeless pages (using Mediawiki:Common.css), or simply by removing the discrete "Englarge" button. Automatik ( talk) 17:49, 30 December 2017 (UTC)
This
edit request has been answered. Set the |answered= or |ans= parameter to no to reactivate your request. |
This HTML class will create a border the cropped image. This class should be actived by |Description=
parameter if this image have a caption text, thus making the same appearence as other thumbnails in an article. I was already implemented in sandbox page.--
Great Brightstar (
talk) 16:49, 12 January 2018 (UTC)
thumbimage
class, snipped from test cases:
https://i.imgur.com/vuigCiY.pngthumbimage
class. This HTML class is already used in {{
Annotated image}}. But since this template is full protected, I decided to implement in {{
CSS image crop/sandbox}}, you can done just via pressing Ctrl + A to copy source code from sandbox page. --
Great Brightstar (
talk) 14:11, 15 January 2018 (UTC)
Okay well you seem to know what you're talking about, and no one has objected, so I have made the change. — Martin ( MSGJ · talk) 09:16, 16 January 2018 (UTC)
Is it possible to insert cropped images in galleries? Eccekevin ( talk) 00:13, 6 March 2021 (UTC)
This
edit request has been answered. Set the |answered= or |ans= parameter to no to reactivate your request. |
MediaWiki usually use additional <div>
tag with center class to cover a thumbnail image for centering, I made the adoption in {{
image frame}}, {{
pseudo image}} and {{
scalable image}}, and now I hope administrator can follow them soon. The proper code available at sandbox page and you can see the effects at test case page.
Great Brightstar (
talk) 04:29, 2 March 2022 (UTC)
Align
parameter is added. --
Great Brightstar (
talk) 05:36, 3 March 2022 (UTC)|Align=
parameter. Please reactivate this request only after the testcases match, or if they do not match, provide an explanation for why the non-matching cases differ. –
Jonesey95 (
talk) 06:13, 3 March 2022 (UTC)
I am attempting to use a cropped image in the infobox for an article, however the image is not automatically resized (shrunk) to fit the infobox. Does anyone know how to achieve this, as the Extended_image_syntax doesn't appear to work with a template image? Dpschramm ( talk) 20:16, 16 April 2022 (UTC)
I'm asking the question too. If anyone have an answer that'd be great OtharLuin ( talk) 11:50, 16 November 2022 (UTC)
@ Dpschramm and OtharLuin: A bit late, but try Template:Easy CSS image crop: It lets you state the desired width, and then just state the percentage you want cropped off each side, which is probably easier. Adam Cuerden ( talk)Has about 8.8% of all FPs. 02:36, 3 February 2024 (UTC)
I got the rotation param to partially work with this template on Wikisource-en, but there's a problem with cropping. E.g. if you rotate 90 degrees, then both oLeft and cWidth crop from the left edge, though oTop and cHeight seem to be okay. Could someone check if it can be fixed?
See test wiki and a test image on my user page there, [4]. (I'm trying to crop to the left-hand illustration.) Thanks. — kwami ( talk) 00:13, 28 August 2022 (UTC)
On the regular page everything is ok, but on mobile the image looks very weirdly cropped. -- Oleh325 ( talk) 20:43, 7 September 2023 (UTC)
Go to Thom Yorke's page on mobile and you'll see his image is aligned to the left visually even though it is suppose to be aligned center according to CSS Image Crop. Aternias ( talk) 23:48, 20 October 2023 (UTC)
@
Aternias: I've put forth a requested that should fix this.
Adam Cuerden (
talk)Has about 8.8% of all
FPs. 09:43, 4 February 2024 (UTC)
@
Frietjes: Unlike {{
Multiple image}}, {{
CSS image crop}} doesn't have a border=infobox
parameter to display the image with a caption in an infobox. Can we add this feature to this template as well?
Jarble (
talk) 17:45, 5 January 2024 (UTC)
This
edit request has been answered. Set the |answered= or |ans= parameter to no to reactivate your request. |
Change the opening code to:
{{#if:{{{Image|}}}|{{#switch:{{{Location|{{{Align|}}}}}}
| center | centre = <div class="center">}}<div class="{{#if:{{{Description|}}}|thumb <!--
-->{{#switch:{{{Location|{{{Align|}}}}}}
| none | tnone | center | centre = tnone
| left | tleft = tleft
| right | tright = tright
| #default = tright }}|<!-- if no description:
-->{{#switch:{{{Location|{{{Align|}}}}}}
| none = floatnone <!-- This line was changed -->
| center | centre = center <!-- This line is new -->
| left = floatleft
| right = floatright}}}}">
It's that simple. You can leave out my two comments, they're just there to make it clear what's changed.
I've checked the test cases, and none of them change except the broken centering in the "without description" section under mobile view. Which is the bug being fixed, and also the only significant difference between mobile and non-mobile view.
This fixes the problem Aternias brought up. Adam Cuerden ( talk)Has about 8.8% of all FPs. 09:34, 4 February 2024 (UTC)
This
edit request has been answered. Set the |answered= or |ans= parameter to no to reactivate your request. |
West Bengal Film Journalists' Association Award for Best Actress was using {{
border}}
templates on images. Then someone added an image with {{
CSS image crop}}
and wrapped it with {{
border}}
, which caused a div-span-flip lint error. The quick fix was to remove {{
border}}
from all the images. According to
Redrose64, "regular images don't use <div>...</div>
elements any more. They used to, but the MediaWiki software was altered at some point in the last few months so that images are enclosed in <figure>...</figure>
elements." Can a similar fix be implemented to modify {{
CSS image crop}}
so as to to have inline-level output instead of block-level output? That way, it will be possible to put a {{
border}}
around {{
CSS image crop}}
images, just like regular images. —
Anomalocaris (
talk) 06:01, 26 March 2024 (UTC)
{{border|element}}
, where element is the image, text, etc around which the border is to appear." —
Anomalocaris (
talk) 03:58, 4 April 2024 (UTC)
|div=
in {{
border/sandbox}} to swap a div tag for the default span tag. You can see it working on the testcases page for that template. –
Jonesey95 (
talk) 14:14, 4 April 2024 (UTC)Jonesey95: The offending markup that started this discussion was
{{border| {{CSS image crop |Image = The Team of MEGHNADBADH RAHASYA at the screening of their film, during the 48th International Film Festival of India (IFFI-2017), in Panaji, Goa on November 22, 2017.jpg |bSize = 1200 |cWidth = 100 |cHeight = 145 |oTop = 130 |oLeft = 500 |Location=center|95px}}|width=2px|style=solid |color=gold}}
substituting {{
border/sandbox}}
doesn't make the div-span-flip error go away. —
Anomalocaris (
talk) 18:00, 4 April 2024 (UTC)
|div=yes
, as I did at {{
Border/testcases}}. –
Jonesey95 (
talk) 21:29, 4 April 2024 (UTC)
|div=yes
. –
Jonesey95 (
talk) 17:21, 5 April 2024 (UTC)