655:
21:
545:
530:
1024:
927:
914:
166:'right', 'left', 'center' or 'none'. Determines placement of the image on the page Defaults to 'right' when description is provided (as is default for thumb images) When description is blank, it defaults to left (as is default for non-thumbs)
52:
1113:
would be much more sensible! However, for more sensible crops, this can be a major boon, as it allows MediaViewer to pull up the missing context when the image is clicked on, showing the viewer the whole image, as well as linking to a file that's arguably more useful to reusers of our content (They
364:
can be left out if the default of 220 pixels wide is acceptable. Any of the crop percentage parameters can be left out if you don't want to crop from that side. (But if you're not using at least one of them, why are you using this template?) All crop parameters default to 0, which means nothing is
1108:
Admittedly, cropping a tiny bit out of a large image with any sort of CSS image crop is very inefficient: It still has to load a thumbnail big enough to crop that tiny bit from. In this case, it's loading a 400px wide image for the first, smaller example of the isolated water droplet, and a 900px
630:
This crops 10% from the left, 10% from the right, 5% from the top, and nothing from the bottom, and keeps the image 220 px wide. Since it's the same width, but bits have been cropped, this gives a "zoomed in" effect, which is generally what you want in articles. Note that, since it has no value,
883:
was created with certain idiosyncratic names for the parameters that aren't standard, but it's also existed for over a decade. Also, for further backwards compatibility, note that the captitalised forms of the shared parameters
86:
crops, making it more intuitive and easier to guess what you'll get. It also allows for more predictable scaling: Want to make the image bigger after setting up a crop? Just change desired_width and the rest will follow.
909:
One example used in the documentation for the old template (which is, in fact, called by this one after doing all the necessary calculations) is isolating a water drop from a photo. The original file:
1141:
36:
1012:
In practice, you might not care about it being quite that precise. However, the big advantage of Easy CSS image crop is that once you're happy with your crop, simply changing
1174:
1137:
32:
1195:
226:
Name of an article to be linked by clicking on the image (omit unless there is a good reason to link to an article instead of the image).
663:
40:
1123:
1170:
1131:
28:
1105:
This is much, much harder with {{tl|CSS image crop: You have to calculate a scaling ratio and apply it to every parameter.
1190:
646:
If we want to have this as a standard in-article thumbnail (with a description and the box around it), we can use:
106:
The name of the image file. Do not include File: at the start. Just the base page name.
492:
900:
877:
509:
80:
256:
The image to be linked by the magnify icon (Use if the image parameter is set to
654:
544:
529:
1110:
666:
1127:
502:
65:
58:
1023:
926:
913:
196:
Caption for the image (will render out using thumbnail class).
1184:
425:
Percent to crop from the left, leaving out percentage sign (so 10.3% becomes 10.3)
314:
Percent to crop from the left, leaving out percentage sign (so 10.3% becomes 10.3)
126:
Percent to crop from the left, leaving out percentage sign (so 10.3% becomes 10.3)
15:
246:
The page of the file, if there are multiple pages (such as pdf files).
1109:
wide image for the second. Not ideal, and probably a case where using
643:
optional, but, as it's good practice, we'll use it in other examples.
266:
or the Link parameter leads to something other than the image).
415:
How wide the image should be after cropping. Defaults to 220.
304:
How wide the image should be after cropping. Defaults to 220.
116:
How wide the image should be after cropping. Defaults to 220.
46:
768:
Which renders as seen to the right. We could also have used
475:
alternative text for the image (description for the blind)
354:
alternative text for the image (description for the blind)
936:
Easy CSS image crop can do this as well. Here's the code:
505:
only accepting the base filename. Please continue using
1162:
1154:
1150:
866:
A man with a moustache wearing pince-nez eyeglasses
761:
A man with a moustache wearing pince-nez eyeglasses
380:
This causes it to behave as expected in an infobox.
1147:Editors can experiment in this template's sandbox
369:is optional, but best practice is to include it.
76:This is intended to be an easier way to prepare
515:if you want to use it with an annotated image.
8:
892:) will all still work with this template.
294:The name of the image file, e.g. Foo.jpg
186:for compatibility with the old template.
886:Image, Location, Description, Link, Alt,
795:Theodore Roosevelt by the Pach Bros.jpg
690:Theodore Roosevelt by the Pach Bros.jpg
574:Theodore Roosevelt by the Pach Bros.jpg
385:For an image that renders as a thumbnail
1196:Image formatting and function templates
1016:can scale your crop however you want.
635:could have been left out. We left out
501:Not currently supported here, due to
7:
14:
455:Percent to crop from the bottom.
344:Percent to crop from the bottom.
156:Percent to crop from the bottom.
1132:Template:Easy CSS image crop/doc
1114:can crop images themselves, for
1022:
925:
912:
653:
543:
528:
485:is optional, but best practice.
435:Percent to crop from the right.
324:Percent to crop from the right.
136:Percent to crop from the right.
50:
19:
536:Cropped, but at the same width:
376:|align = center
445:Percent to crop from the top.
334:Percent to crop from the top.
146:Percent to crop from the top.
1:
1048:Dew on grass Luc Viatour.jpg
955:Dew on grass Luc Viatour.jpg
372:In infoboxes, add the line:
236:The alt text for the image.
405:The name of the image file
1212:
1121:
1175:Subpages of this template
365:cropped from that side.
1031:
938:
778:
673:
557:
388:
374:
277:
89:
206:can be used instead of
176:may be used instead of
1169:Add categories to the
861:alt
849:description
840:crop_bottom_perc
830:crop_top_perc
820:crop_right_perc
810:crop_left_perc
800:desired_width
790:image
756:alt
744:caption
735:crop_bottom_perc
725:crop_top_perc
715:crop_right_perc
705:crop_left_perc
695:desired_width
685:image
619:crop_bottom_perc
609:crop_top_perc
599:crop_right_perc
589:crop_left_perc
579:desired_width
569:image
470:alt
460:caption
450:crop_bottom_perc
440:crop_top_perc
430:crop_right_perc
420:crop_left_perc
410:desired_width
400:image
349:alt
339:crop_bottom_perc
329:crop_top_perc
319:crop_right_perc
309:crop_left_perc
299:desired_width
289:image
251:magnify-link
241:page
231:alt
221:link
191:caption
161:align
151:crop_bottom_perc
141:crop_top_perc
131:crop_right_perc
121:crop_left_perc
111:desired_width
101:image
24:Template documentation
919:Is cropped to this:
776:for the same effect:
57:This template uses
1191:Lua-based templates
1037:Easy CSS image crop
944:Easy CSS image crop
784:Easy CSS image crop
679:Easy CSS image crop
563:Easy CSS image crop
394:Easy CSS image crop
283:Easy CSS image crop
216:for compatibility.
95:Easy CSS image crop
667:Theodore Roosevelt
554:Code for the crop:
465:The image caption
1118:specific usage.)
1093:crop_bottom_perc
1083:crop_top_perc
1073:crop_right_perc
1063:crop_left_perc
1053:desired_width
1000:crop_bottom_perc
990:crop_top_perc
980:crop_right_perc
970:crop_left_perc
960:desired_width
633:crop_bottom_perc=
503:Module:ImageRatio
74:
73:
66:Module:ImageRatio
1203:
1166:
1158:
1145:
1101:
1097:
1094:
1091:
1087:
1084:
1081:
1077:
1074:
1071:
1067:
1064:
1061:
1057:
1054:
1051:
1047:
1044:
1041:
1038:
1035:
1026:
1015:
1014:|desired_width =
1008:
1004:
1001:
998:
994:
991:
988:
984:
981:
978:
974:
971:
968:
964:
961:
958:
954:
951:
948:
945:
942:
929:
916:
905:
899:
896:Comparison with
891:
887:
882:
876:
873:This is because
869:
865:
862:
859:
856:
853:
850:
847:
844:
841:
838:
834:
831:
828:
824:
821:
818:
814:
811:
808:
804:
801:
798:
794:
791:
788:
785:
782:
775:
771:
764:
760:
757:
754:
751:
748:
745:
742:
739:
736:
733:
729:
726:
723:
719:
716:
713:
709:
706:
703:
699:
696:
693:
689:
686:
683:
680:
677:
657:
638:
634:
626:
623:
620:
617:
613:
610:
607:
603:
600:
597:
593:
590:
587:
583:
580:
577:
573:
570:
567:
564:
561:
547:
532:
514:
508:
497:
491:
484:
478:
474:
471:
468:
464:
461:
458:
454:
451:
448:
444:
441:
438:
434:
431:
428:
424:
421:
418:
414:
411:
408:
404:
401:
398:
395:
392:
368:
363:
357:
353:
350:
347:
343:
340:
337:
333:
330:
327:
323:
320:
317:
313:
310:
307:
303:
300:
297:
293:
290:
287:
284:
281:
274:Basic parameters
269:
265:
262:
259:
255:
252:
249:
245:
242:
239:
235:
232:
229:
225:
222:
219:
215:
212:
209:
205:
202:
199:
195:
192:
189:
185:
182:
179:
175:
172:
169:
165:
162:
159:
155:
152:
149:
145:
142:
139:
135:
132:
129:
125:
122:
119:
115:
112:
109:
105:
102:
99:
96:
93:
85:
79:
54:
53:
47:
44:
25:
23:
22:
1211:
1210:
1206:
1205:
1204:
1202:
1201:
1200:
1181:
1180:
1179:
1178:
1168:
1160:
1148:
1146:
1135:
1120:
1103:
1102:
1099:
1095:
1092:
1089:
1085:
1082:
1079:
1075:
1072:
1069:
1065:
1062:
1059:
1055:
1052:
1049:
1045:
1042:
1039:
1036:
1033:
1030:
1029:
1028:
1027:
1013:
1010:
1009:
1006:
1002:
999:
996:
992:
989:
986:
982:
979:
976:
972:
969:
966:
962:
959:
956:
952:
949:
946:
943:
940:
935:
933:
932:
931:
930:
907:
903:
897:
889:
885:
880:
874:
871:
870:
867:
863:
860:
857:
854:
851:
848:
845:
842:
839:
836:
832:
829:
826:
822:
819:
816:
812:
809:
806:
802:
799:
796:
792:
789:
786:
783:
780:
773:
769:
766:
765:
762:
758:
755:
752:
749:
746:
743:
740:
737:
734:
731:
727:
724:
721:
717:
714:
711:
707:
704:
701:
697:
694:
691:
687:
684:
681:
678:
675:
672:
671:
670:
665:
660:
659:
658:
636:
632:
628:
627:
624:
621:
618:
615:
611:
608:
605:
601:
598:
595:
591:
588:
585:
581:
578:
575:
571:
568:
565:
562:
559:
551:
550:
549:
548:
521:
512:
506:
499:
495:
493:Annotated image
489:
482:
480:
479:
476:
472:
469:
466:
462:
459:
456:
452:
449:
446:
442:
439:
436:
432:
429:
426:
422:
419:
416:
412:
409:
406:
402:
399:
396:
393:
390:
382:
378:
377:
366:
361:
359:
358:
355:
351:
348:
345:
341:
338:
335:
331:
328:
325:
321:
318:
315:
311:
308:
305:
301:
298:
295:
291:
288:
285:
282:
279:
271:
270:
267:
263:
261:Annotated image
260:
257:
253:
250:
247:
243:
240:
237:
233:
230:
227:
223:
220:
217:
213:
210:
207:
203:
200:
197:
193:
190:
187:
183:
180:
177:
173:
170:
167:
163:
160:
157:
153:
150:
147:
143:
140:
137:
133:
130:
127:
123:
120:
117:
113:
110:
107:
103:
100:
97:
94:
91:
83:
77:
70:
51:
45:
26:
20:
18:
12:
11:
5:
1209:
1207:
1199:
1198:
1193:
1183:
1182:
1159:and testcases
1032:
1021:
1020:
1019:
1018:
939:
924:
923:
922:
921:
906:
901:CSS image crop
894:
878:CSS image crop
779:
770:|description =
674:
662:
661:
652:
651:
650:
649:
648:
558:
542:
541:
540:
539:
520:
517:
510:CSS image crop
498:
487:
389:
375:
278:
90:
81:CSS image crop
72:
71:
69:
68:
62:
55:
17:
16:
13:
10:
9:
6:
4:
3:
2:
1208:
1197:
1194:
1192:
1189:
1188:
1186:
1176:
1172:
1164:
1156:
1152:
1143:
1139:
1133:
1129:
1125:
1124:documentation
1119:
1117:
1112:
1106:
1025:
1017:
937:
928:
920:
917:
915:
910:
902:
895:
893:
879:
777:
668:
664:
656:
647:
644:
642:
556:
555:
546:
538:
537:
533:
531:
526:
525:
518:
516:
511:
504:
494:
488:
486:
387:
386:
381:
373:
370:
362:desired_width
276:
275:
88:
82:
67:
64:
63:
60:
56:
49:
48:
42:
38:
34:
30:
1115:
1107:
1104:
1011:
934:
918:
911:
908:
904:}}
898:{{
881:}}
875:{{
872:
767:
645:
640:
629:
553:
552:
535:
534:
527:
523:
522:
513:}}
507:{{
500:
496:}}
490:{{
481:
384:
383:
379:
371:
360:
273:
272:
201:description
84:}}
78:{{
75:
1128:transcluded
772:instead of
524:Base image:
39:] [
35:] [
31:] [
1185:Categories
1122:The above
774:|caption =
1173:subpage.
171:location
1111:CropTool
519:Examples
211:caption
1153:|
1142:history
1140:|
37:history
1167:pages.
1163:create
1155:mirror
1151:create
1043:Image
950:Image
181:align
1130:from
1116:their
1088:62.7
995:62.7
639:; it
43:]
41:purge
27:[
1171:/doc
1138:edit
1098:2.4
1058:150
1005:2.4
965:100
890:Page
888:and
805:220
700:220
637:alt=
584:220
33:edit
29:view
1126:is
1078:60
1068:15
985:60
975:15
825:10
815:10
720:10
710:10
604:10
594:10
483:alt
367:alt
59:Lua
1187::
1134:.
1100:}}
1034:{{
1007:}}
941:{{
868:}}
835:5
781:{{
763:}}
730:5
676:{{
669:.
641:is
625:}}
614:5
560:{{
477:}}
391:{{
356:}}
280:{{
268:}}
264:}}
258:{{
92:{{
61::
1177:.
1165:)
1161:(
1157:)
1149:(
1144:)
1136:(
1096:=
1090:|
1086:=
1080:|
1076:=
1070:|
1066:=
1060:|
1056:=
1050:|
1046:=
1040:|
1003:=
997:|
993:=
987:|
983:=
977:|
973:=
967:|
963:=
957:|
953:=
947:|
884:(
864:=
858:|
855:]
852:=
846:|
843:=
837:|
833:=
827:|
823:=
817:|
813:=
807:|
803:=
797:|
793:=
787:|
759:=
753:|
750:]
747:=
741:|
738:=
732:|
728:=
722:|
718:=
712:|
708:=
702:|
698:=
692:|
688:=
682:|
622:=
616:|
612:=
606:|
602:=
596:|
592:=
586:|
582:=
576:|
572:=
566:|
473:=
467:|
463:=
457:|
453:=
447:|
443:=
437:|
433:=
427:|
423:=
417:|
413:=
407:|
403:=
397:|
352:=
346:|
342:=
336:|
332:=
326:|
322:=
316:|
312:=
306:|
302:=
296:|
292:=
286:|
254:=
248:|
244:=
238:|
234:=
228:|
224:=
218:|
214:=
208:|
204:=
198:|
194:=
188:|
184:=
178:|
174:=
168:|
164:=
158:|
154:=
148:|
144:=
138:|
134:=
128:|
124:=
118:|
114:=
108:|
104:=
98:|
Text is available under the Creative Commons Attribution-ShareAlike License. Additional terms may apply.
