uikit 3.11.2-dev.28b7953b9 → 3.11.2-dev.29f2881ed

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (223) hide show
  1. package/.eslintrc.json +4 -49
  2. package/.prettierignore +14 -0
  3. package/.prettierrc.json +13 -0
  4. package/.webstorm.js +3 -3
  5. package/CHANGELOG.md +42 -29
  6. package/build/.eslintrc.json +1 -3
  7. package/build/build.js +26 -28
  8. package/build/icons.js +7 -11
  9. package/build/less.js +48 -36
  10. package/build/package.json +2 -2
  11. package/build/prefix.js +21 -18
  12. package/build/publishDev.js +6 -8
  13. package/build/release.js +20 -17
  14. package/build/scope.js +21 -11
  15. package/build/scss.js +72 -39
  16. package/build/util.js +71 -62
  17. package/build/wrapper/icons.js +0 -2
  18. package/dist/css/uikit-core-rtl.css +127 -201
  19. package/dist/css/uikit-core-rtl.min.css +1 -1
  20. package/dist/css/uikit-core.css +127 -201
  21. package/dist/css/uikit-core.min.css +1 -1
  22. package/dist/css/uikit-rtl.css +129 -207
  23. package/dist/css/uikit-rtl.min.css +1 -1
  24. package/dist/css/uikit.css +129 -207
  25. package/dist/css/uikit.min.css +1 -1
  26. package/dist/js/components/countdown.js +88 -133
  27. package/dist/js/components/countdown.min.js +1 -1
  28. package/dist/js/components/filter.js +408 -439
  29. package/dist/js/components/filter.min.js +1 -1
  30. package/dist/js/components/lightbox-panel.js +1098 -1316
  31. package/dist/js/components/lightbox-panel.min.js +1 -1
  32. package/dist/js/components/lightbox.js +1144 -1393
  33. package/dist/js/components/lightbox.min.js +1 -1
  34. package/dist/js/components/notification.js +94 -114
  35. package/dist/js/components/notification.min.js +1 -1
  36. package/dist/js/components/parallax.js +345 -358
  37. package/dist/js/components/parallax.min.js +1 -1
  38. package/dist/js/components/slider-parallax.js +343 -357
  39. package/dist/js/components/slider-parallax.min.js +1 -1
  40. package/dist/js/components/slider.js +768 -843
  41. package/dist/js/components/slider.min.js +1 -1
  42. package/dist/js/components/slideshow-parallax.js +343 -357
  43. package/dist/js/components/slideshow-parallax.min.js +1 -1
  44. package/dist/js/components/slideshow.js +643 -826
  45. package/dist/js/components/slideshow.min.js +1 -1
  46. package/dist/js/components/sortable.js +587 -620
  47. package/dist/js/components/sortable.min.js +1 -1
  48. package/dist/js/components/tooltip.js +324 -356
  49. package/dist/js/components/tooltip.min.js +1 -1
  50. package/dist/js/components/upload.js +155 -167
  51. package/dist/js/components/upload.min.js +1 -1
  52. package/dist/js/uikit-core.js +5339 -6661
  53. package/dist/js/uikit-core.min.js +1 -1
  54. package/dist/js/uikit-icons.js +7 -9
  55. package/dist/js/uikit-icons.min.js +1 -1
  56. package/dist/js/uikit.js +8156 -9889
  57. package/dist/js/uikit.min.js +1 -1
  58. package/jsconfig.json +1 -1
  59. package/package.json +64 -60
  60. package/src/js/api/boot.js +25 -32
  61. package/src/js/api/component.js +15 -28
  62. package/src/js/api/global.js +6 -12
  63. package/src/js/api/hooks.js +14 -33
  64. package/src/js/api/instance.js +7 -15
  65. package/src/js/api/state.js +65 -82
  66. package/src/js/components/countdown.js +24 -50
  67. package/src/js/components/filter.js +70 -66
  68. package/src/js/components/index.js +13 -13
  69. package/src/js/components/internal/lightbox-animations.js +14 -25
  70. package/src/js/components/internal/slider-preload.js +37 -0
  71. package/src/js/components/internal/slider-transitioner.js +66 -45
  72. package/src/js/components/internal/slideshow-animations.js +46 -64
  73. package/src/js/components/lightbox-panel.js +107 -105
  74. package/src/js/components/lightbox.js +17 -39
  75. package/src/js/components/notification.js +49 -43
  76. package/src/js/components/parallax.js +16 -30
  77. package/src/js/components/slider-parallax.js +13 -23
  78. package/src/js/components/slider.js +95 -64
  79. package/src/js/components/slideshow-parallax.js +1 -1
  80. package/src/js/components/slideshow.js +15 -44
  81. package/src/js/components/sortable.js +125 -106
  82. package/src/js/components/tooltip.js +41 -31
  83. package/src/js/components/upload.js +52 -63
  84. package/src/js/core/accordion.js +53 -48
  85. package/src/js/core/alert.js +9 -17
  86. package/src/js/core/core.js +74 -53
  87. package/src/js/core/cover.js +11 -15
  88. package/src/js/core/drop.js +106 -92
  89. package/src/js/core/form-custom.js +20 -25
  90. package/src/js/core/gif.js +3 -7
  91. package/src/js/core/grid.js +57 -58
  92. package/src/js/core/height-match.js +16 -29
  93. package/src/js/core/height-viewport.js +28 -35
  94. package/src/js/core/icon.js +47 -52
  95. package/src/js/core/img.js +80 -78
  96. package/src/js/core/index.js +39 -39
  97. package/src/js/core/leader.js +9 -18
  98. package/src/js/core/margin.js +21 -37
  99. package/src/js/core/modal.js +49 -36
  100. package/src/js/core/nav.js +2 -4
  101. package/src/js/core/navbar.js +112 -88
  102. package/src/js/core/offcanvas.js +49 -53
  103. package/src/js/core/overflow-auto.js +13 -17
  104. package/src/js/core/responsive.js +14 -12
  105. package/src/js/core/scroll.js +10 -20
  106. package/src/js/core/scrollspy-nav.js +34 -31
  107. package/src/js/core/scrollspy.js +37 -54
  108. package/src/js/core/sticky.js +156 -118
  109. package/src/js/core/svg.js +68 -83
  110. package/src/js/core/switcher.js +47 -46
  111. package/src/js/core/tab.js +7 -10
  112. package/src/js/core/toggle.js +66 -67
  113. package/src/js/core/video.js +11 -22
  114. package/src/js/mixin/animate.js +19 -20
  115. package/src/js/mixin/class.js +2 -4
  116. package/src/js/mixin/container.js +7 -11
  117. package/src/js/mixin/internal/animate-fade.js +73 -30
  118. package/src/js/mixin/internal/animate-slide.js +58 -41
  119. package/src/js/mixin/internal/slideshow-animations.js +7 -14
  120. package/src/js/mixin/internal/slideshow-transitioner.js +10 -17
  121. package/src/js/mixin/media.js +5 -10
  122. package/src/js/mixin/modal.js +89 -66
  123. package/src/js/mixin/parallax.js +149 -106
  124. package/src/js/mixin/position.js +26 -20
  125. package/src/js/mixin/slider-autoplay.js +12 -21
  126. package/src/js/mixin/slider-drag.js +64 -65
  127. package/src/js/mixin/slider-nav.js +26 -35
  128. package/src/js/mixin/slider-reactive.js +2 -8
  129. package/src/js/mixin/slider.js +48 -55
  130. package/src/js/mixin/slideshow.js +13 -19
  131. package/src/js/mixin/togglable.js +89 -63
  132. package/src/js/uikit-core.js +2 -4
  133. package/src/js/uikit.js +2 -4
  134. package/src/js/util/ajax.js +25 -40
  135. package/src/js/util/animation.js +77 -75
  136. package/src/js/util/attr.js +17 -21
  137. package/src/js/util/class.js +14 -52
  138. package/src/js/util/dimensions.js +58 -45
  139. package/src/js/util/dom.js +39 -66
  140. package/src/js/util/env.js +7 -12
  141. package/src/js/util/event.js +60 -59
  142. package/src/js/util/fastdom.js +1 -6
  143. package/src/js/util/filter.js +17 -34
  144. package/src/js/util/index.js +0 -1
  145. package/src/js/util/lang.js +82 -121
  146. package/src/js/util/mouse.js +19 -17
  147. package/src/js/util/options.js +32 -46
  148. package/src/js/util/player.js +41 -36
  149. package/src/js/util/position.js +54 -46
  150. package/src/js/util/selector.js +43 -58
  151. package/src/js/util/style.js +39 -49
  152. package/src/js/util/viewport.js +75 -64
  153. package/src/less/components/base.less +10 -33
  154. package/src/less/components/flex.less +0 -9
  155. package/src/less/components/form-range.less +48 -95
  156. package/src/less/components/form.less +0 -1
  157. package/src/less/components/height.less +3 -0
  158. package/src/less/components/leader.less +0 -1
  159. package/src/less/components/lightbox.less +0 -1
  160. package/src/less/components/modal.less +3 -7
  161. package/src/less/components/navbar.less +0 -7
  162. package/src/less/components/progress.less +14 -36
  163. package/src/less/components/slider.less +0 -3
  164. package/src/less/components/slideshow.less +0 -3
  165. package/src/less/components/text.less +16 -32
  166. package/src/less/components/utility.less +22 -0
  167. package/src/scss/components/base.scss +10 -33
  168. package/src/scss/components/flex.scss +0 -9
  169. package/src/scss/components/form-range.scss +48 -95
  170. package/src/scss/components/form.scss +3 -4
  171. package/src/scss/components/height.scss +3 -0
  172. package/src/scss/components/icon.scss +2 -2
  173. package/src/scss/components/leader.scss +0 -1
  174. package/src/scss/components/lightbox.scss +0 -1
  175. package/src/scss/components/modal.scss +3 -7
  176. package/src/scss/components/navbar.scss +0 -7
  177. package/src/scss/components/progress.scss +14 -36
  178. package/src/scss/components/search.scss +1 -1
  179. package/src/scss/components/slider.scss +0 -3
  180. package/src/scss/components/slideshow.scss +0 -3
  181. package/src/scss/components/text.scss +16 -32
  182. package/src/scss/components/utility.scss +22 -0
  183. package/src/scss/mixins-theme.scss +1 -1
  184. package/src/scss/mixins.scss +1 -1
  185. package/src/scss/variables-theme.scss +9 -9
  186. package/src/scss/variables.scss +9 -9
  187. package/tests/align.html +10 -10
  188. package/tests/animation.html +2 -2
  189. package/tests/article.html +2 -2
  190. package/tests/base.html +3 -3
  191. package/tests/card.html +10 -10
  192. package/tests/column.html +3 -3
  193. package/tests/comment.html +9 -9
  194. package/tests/dotnav.html +3 -3
  195. package/tests/image.html +296 -54
  196. package/tests/images/image-type.avif +0 -0
  197. package/tests/images/image-type.jpeg +0 -0
  198. package/tests/images/image-type.webp +0 -0
  199. package/tests/index.html +8 -8
  200. package/tests/js/index.js +114 -85
  201. package/tests/lightbox.html +10 -10
  202. package/tests/marker.html +2 -2
  203. package/tests/modal.html +8 -9
  204. package/tests/navbar.html +2 -2
  205. package/tests/overlay.html +7 -7
  206. package/tests/parallax.html +14 -5
  207. package/tests/position.html +12 -12
  208. package/tests/slidenav.html +12 -12
  209. package/tests/slider.html +20 -20
  210. package/tests/sortable.html +1 -1
  211. package/tests/sticky-parallax.html +55 -70
  212. package/tests/svg.html +6 -6
  213. package/tests/table.html +11 -11
  214. package/tests/thumbnav.html +12 -12
  215. package/tests/transition.html +30 -30
  216. package/tests/utility.html +33 -33
  217. package/tests/video.html +1 -1
  218. package/tests/width.html +1 -1
  219. package/src/js/mixin/flex-bug.js +0 -56
  220. package/src/js/util/promise.js +0 -191
  221. package/tests/images/animated.gif +0 -0
  222. package/tests/images/test.avif +0 -0
  223. package/tests/images/test.webp +0 -0
package/tests/image.html CHANGED
@@ -14,27 +14,290 @@
14
14
 
15
15
  <h1>Image</h1>
16
16
 
17
- <div class="uk-child-width-1-2@m uk-background-secondary" uk-grid>
17
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1495321308589-43affb814eee?fit=crop&w=1200&h=450&q=80" uk-img="loading: eager">
18
+ <h1>Background Image Loading Eager</h1>
19
+ </div>
20
+
21
+ <h2>Loading Lazy Attribute</h2>
22
+
23
+ <div class="uk-child-width-1-2@m" uk-grid>
18
24
  <div>
19
- <img src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="">
25
+ <img src="https://images.unsplash.com/photo-1476820865390-c52aeebb9891?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" loading="lazy">
26
+ <p class="uk-margin-small-top">Image</p>
20
27
  </div>
21
28
  <div>
22
- <img src="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="">
29
+ <picture>
30
+ <source srcset="https://images.unsplash.com/photo-1487958449943-2429e8be8625?fit=crop&w=580&h=386&q=80 580w,
31
+ https://images.unsplash.com/photo-1487958449943-2429e8be8625?fit=crop&w=900&h=600&q=80 900w"
32
+ media="(min-width: 1200px)">
33
+ <img src="https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=900&h=600&q=80"
34
+ srcset="https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=580&h=386&q=80 580w,
35
+ https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=900&h=600&q=80 900w"
36
+ sizes="(min-width: 960px) 580px, 100vw"
37
+ width="900" height="600" alt="" loading="lazy">
38
+ </picture>
39
+ <p class="uk-margin-small-top">Picture with Srcset</p>
23
40
  </div>
24
41
  </div>
25
42
 
26
- <div class="uk-background-primary">
27
- <picture>
28
- <source type="image/webp" sizes="(min-width: 780px) 780px" srcset="http://localhost/site/image?src=WyJzaXRlXC9pbWFnZXNcL2hvbWVcL3lvb3RoZW1lLXByby5qcGciLFtbInR5cGUiLFsid2VicCIsIjg1Il1dLFsiZG9SZXNpemUiLFs3ODEsNDg4LDc4MSw0ODhdXSxbImRvQ3JvcCIsWzc4MCw0ODgsMCwwXV1dXQ%3D%3D&amp;hash=9a3c6f9c 780w, /site/cache/images/yootheme-pro-5db7acab.webp 1560w">
29
- <img src="/site/cache/images/yootheme-pro-0d67d545.jpeg" width="780" height="488" alt="Introduction Video on using the YOOtheme Pro Page Builder for WordPress and Joomla">
30
- </picture>
43
+ <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
44
+ <div>
45
+ <img src="https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=373&h=249&q=80"
46
+ srcset="https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=373&h=249&q=80 373w,
47
+ https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=746&h=498&q=80 746w"
48
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
49
+ width="746" height="498" alt="" loading="lazy">
50
+ </div>
51
+ <div>
52
+ <img src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=373&h=249&q=80"
53
+ srcset="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=373&h=249&q=80 373w,
54
+ https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=746&h=498&q=80 746w"
55
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
56
+ width="746" height="498" alt="" loading="lazy">
57
+ </div>
58
+ <div>
59
+ <img src="https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=373&h=249&q=80"
60
+ srcset="https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=373&h=249&q=80 373w,
61
+ https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=746&h=498&q=80 746w"
62
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
63
+ width="746" height="498" alt="" loading="lazy">
64
+ </div>
65
+ <div>
66
+ <img src="https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=373&h=249&q=80"
67
+ srcset="https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=373&h=249&q=80 373w,
68
+ https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=746&h=498&q=80 746w"
69
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
70
+ width="746" height="498" alt="" loading="lazy">
71
+ </div>
72
+ <div>
73
+ <img src="https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=373&h=249&q=80"
74
+ srcset="https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=373&h=249&q=80 373w,
75
+ https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=746&h=498&q=80 746w"
76
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
77
+ width="746" height="498" alt="" loading="lazy">
78
+ </div>
79
+ <div>
80
+ <img src="https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=373&h=249&q=80"
81
+ srcset="https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=373&h=249&q=80 373w,
82
+ https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=746&h=498&q=80 746w"
83
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
84
+ width="746" height="498" alt="" loading="lazy">
85
+ </div>
86
+ <div>
87
+ <img src="https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=373&h=249&q=80"
88
+ srcset="https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=373&h=249&q=80 373w,
89
+ https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=746&h=498&q=80 746w"
90
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
91
+ width="746" height="498" alt="" loading="lazy">
92
+ </div>
93
+ <div>
94
+ <img src="https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=373&h=249&q=80"
95
+ srcset="https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=373&h=249&q=80 373w,
96
+ https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=746&h=498&q=80 746w"
97
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
98
+ width="746" height="498" alt="" loading="lazy">
99
+ </div>
100
+ <div>
101
+ <img src="https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=373&h=249&q=80"
102
+ srcset="https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=373&h=249&q=80 373w,
103
+ https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=746&h=498&q=80 746w"
104
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
105
+ width="746" height="498" alt="" loading="lazy">
106
+ </div>
107
+ <div>
108
+ <img src="https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=373&h=249&q=80"
109
+ srcset="https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=373&h=249&q=80 373w,
110
+ https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=746&h=498&q=80 746w"
111
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
112
+ width="746" height="498" alt="" loading="lazy">
113
+ </div>
114
+ <div>
115
+ <img src="https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=373&h=249&q=80"
116
+ srcset="https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=373&h=249&q=80 373w,
117
+ https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=746&h=498&q=80 746w"
118
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
119
+ width="746" height="498" alt="" loading="lazy">
120
+ </div>
121
+ <div>
122
+ <img src="https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=373&h=249&q=80"
123
+ srcset="https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=373&h=249&q=80 373w,
124
+ https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=746&h=498&q=80 746w"
125
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
126
+ width="746" height="498" alt="" loading="lazy">
127
+ </div>
128
+ <div>
129
+ <img src="https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=373&h=249&q=80"
130
+ srcset="https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=373&h=249&q=80 373w,
131
+ https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=746&h=498&q=80 746w"
132
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
133
+ width="746" height="498" alt="" loading="lazy">
134
+ </div>
135
+ <div>
136
+ <img src="https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=373&h=249&q=80"
137
+ srcset="https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=373&h=249&q=80 373w,
138
+ https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=746&h=498&q=80 746w"
139
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
140
+ width="746" height="498" alt="" loading="lazy">
141
+ </div>
142
+ <div>
143
+ <img src="https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=373&h=249&q=80"
144
+ srcset="https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=373&h=249&q=80 373w,
145
+ https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=746&h=498&q=80 746w"
146
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
147
+ width="746" height="498" alt="" loading="lazy">
148
+ </div>
149
+ <div>
150
+ <img src="https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=373&h=249&q=80"
151
+ srcset="https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=373&h=249&q=80 373w,
152
+ https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=746&h=498&q=80 746w"
153
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
154
+ width="746" height="498" alt="" loading="lazy">
155
+ </div>
156
+ <div>
157
+ <img src="https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=373&h=249&q=80"
158
+ srcset="https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=373&h=249&q=80 373w,
159
+ https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=746&h=498&q=80 746w"
160
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
161
+ width="746" height="498" alt="" loading="lazy">
162
+ </div>
163
+ <div>
164
+ <img src="https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=373&h=249&q=80"
165
+ srcset="https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=373&h=249&q=80 373w,
166
+ https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=746&h=498&q=80 746w"
167
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
168
+ width="746" height="498" alt="" loading="lazy">
169
+ </div>
170
+ <div>
171
+ <img src="https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=373&h=249&q=80"
172
+ srcset="https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=373&h=249&q=80 373w,
173
+ https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=746&h=498&q=80 746w"
174
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
175
+ width="746" height="498" alt="" loading="lazy">
176
+ </div>
177
+ <div>
178
+ <img src="https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=373&h=249&q=80"
179
+ srcset="https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=373&h=249&q=80 373w,
180
+ https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=746&h=498&q=80 746w"
181
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
182
+ width="746" height="498" alt="" loading="lazy">
183
+ </div>
184
+ <div>
185
+ <img src="https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=373&h=249&q=80"
186
+ srcset="https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=373&h=249&q=80 373w,
187
+ https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=746&h=498&q=80 746w"
188
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
189
+ width="746" height="498" alt="" loading="lazy">
190
+ </div>
191
+ <div>
192
+ <img src="https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=373&h=249&q=80"
193
+ srcset="https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=373&h=249&q=80 373w,
194
+ https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=746&h=498&q=80 746w"
195
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
196
+ width="746" height="498" alt="" loading="lazy">
197
+ </div>
198
+ <div>
199
+ <img src="https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=373&h=249&q=80"
200
+ srcset="https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=373&h=249&q=80 373w,
201
+ https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=746&h=498&q=80 746w"
202
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
203
+ width="746" height="498" alt="" loading="lazy">
204
+ </div>
205
+ <div>
206
+ <img src="https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=373&h=249&q=80"
207
+ srcset="https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=373&h=249&q=80 373w,
208
+ https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=746&h=498&q=80 746w"
209
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
210
+ width="746" height="498" alt="" loading="lazy">
211
+ </div>
212
+ <div>
213
+ <img src="https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=373&h=249&q=80"
214
+ srcset="https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=373&h=249&q=80 373w,
215
+ https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=746&h=498&q=80 746w"
216
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
217
+ width="746" height="498" alt="" loading="lazy">
218
+ </div>
219
+ <div>
220
+ <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=373&h=249&q=80"
221
+ srcset="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=373&h=249&q=80 373w,
222
+ https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=746&h=498&q=80 746w"
223
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
224
+ width="746" height="498" alt="" loading="lazy">
225
+ </div>
226
+ <div>
227
+ <img src="https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=373&h=249&q=80"
228
+ srcset="https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=373&h=249&q=80 373w,
229
+ https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=746&h=498&q=80 746w"
230
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
231
+ width="746" height="498" alt="" loading="lazy">
232
+ </div>
31
233
  </div>
32
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" data-sources="srcset: images/test.avif; type: image/avif" uk-img>
234
+
235
+ <h2>Background Image</h2>
236
+
237
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" uk-img>
33
238
  <h1>Background Image</h1>
34
239
  </div>
35
240
 
36
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" data-sources="[{&quot;srcset&quot;: &quot;images/test.avif&quot;, &quot;type&quot;: &quot;image/avif&quot;},{&quot;srcset&quot;: &quot;images/test.webp&quot;, &quot;type&quot;: &quot;image/webp&quot;}]" uk-img>
37
- <h1>Background Image</h1>
241
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
242
+ data-src="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80"
243
+ data-srcset="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=800&h=300&q=80 800w,
244
+ https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80 1200w,
245
+ https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=2400&h=900&q=80 2400w"
246
+ sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
247
+ <h1>Background Image with Srcset</h1>
248
+ </div>
249
+
250
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
251
+ sources="srcset: https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=1200&h=450&q=80; media: (min-width: 1200px)"
252
+ data-src="https://images.unsplash.com/photo-1546349851-64285be8e9fa?fit=crop&w=1200&h=450&q=8"
253
+ uk-img>
254
+ <h1>Background Picture</h1>
255
+ </div>
256
+
257
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
258
+ sources="srcset: https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=800&h=300&q=80 800w,
259
+ https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1200&h=450&q=80 1200w,
260
+ https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=2400&h=900&q=80 2400w; media: (min-width: 1200px)"
261
+ data-src="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1200&h=450&q=80"
262
+ data-srcset="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=800&h=300&q=80 800w,
263
+ https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1200&h=450&q=80 1200w,
264
+ https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=2400&h=900&q=80 2400w"
265
+ sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
266
+ <h1>Background Picture with Srcset</h1>
267
+ </div>
268
+
269
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
270
+ sources="[{&quot;srcset&quot;: &quot;images/image-type.avif&quot;,
271
+ &quot;type&quot;: &quot;image\/avif&quot;
272
+ },
273
+ {&quot;srcset&quot;: &quot;images/image-type.webp&quot;,
274
+ &quot;type&quot;: &quot;image\/webp&quot;
275
+ }]"
276
+ data-src="images/image-type.jpg"
277
+ uk-img>
278
+ <h1>Background Picture with Multiple Sources</h1>
279
+ </div>
280
+
281
+ <h2>uk-img with Image element (Deprecated)</h2>
282
+
283
+ <div class="uk-child-width-1-2@m" uk-grid>
284
+ <div>
285
+ <img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
286
+ <p class="uk-margin-small-top">Image</p>
287
+ </div>
288
+ <div>
289
+ <picture>
290
+ <source data-srcset="https://images.unsplash.com/photo-1447933601403-0c6688de566e?fit=crop&w=580&h=386&q=80 580w,
291
+ https://images.unsplash.com/photo-1447933601403-0c6688de566e?fit=crop&w=900&h=600&q=80 900w"
292
+ media="(min-width: 1200px)">
293
+ <img data-src="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80"
294
+ data-srcset="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=580&h=386&q=80 580w,
295
+ https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80 900w"
296
+ sizes="(min-width: 960px) 580px, 100vw"
297
+ width="900" height="600" alt="" uk-img>
298
+ </picture>
299
+ <p class="uk-margin-small-top">Picture with Srcset</p>
300
+ </div>
38
301
  </div>
39
302
 
40
303
  <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
@@ -228,34 +491,7 @@
228
491
  width="746" height="498" alt="" uk-img>
229
492
  </div>
230
493
  </div>
231
-
232
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
233
- data-src="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80"
234
- data-srcset="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=800&h=300&q=80 800w,
235
- https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80 1200w,
236
- https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=2400&h=900&q=80 2400w"
237
- sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
238
- <h1>Background Image</h1>
239
- </div>
240
-
241
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
242
- data-src="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=1200&h=450&q=80"
243
- data-srcset="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=800&h=300&q=80 800w,
244
- https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=1200&h=450&q=80 1200w,
245
- https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=2400&h=900&q=80 2400w"
246
- sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
247
- <h1>Background Image</h1>
248
- </div>
249
-
250
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
251
- data-src="https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1200&h=450&q=80"
252
- data-srcset="https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=800&h=300&q=80 800w,
253
- https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1200&h=450&q=80 1200w,
254
- https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=2400&h=900&q=80 2400w"
255
- sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
256
- <h1>Background Image</h1>
257
- </div>
258
-
494
+
259
495
  <div class="uk-child-width-1-2@m" uk-grid>
260
496
  <div>
261
497
 
@@ -263,28 +499,28 @@
263
499
 
264
500
  <ul class="uk-slideshow-items">
265
501
  <li>
266
- <img data-src="images/photo.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
502
+ <img data-src="images/photo.jpg" alt="" uk-cover uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
267
503
  <div class="uk-position-center uk-position-small uk-text-center">
268
504
  <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
269
505
  <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
270
506
  </div>
271
507
  </li>
272
508
  <li>
273
- <img data-src="images/dark.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !* +*">
509
+ <img data-src="images/dark.jpg" alt="" uk-cover uk-img="target: !* -*, !* +*">
274
510
  <div class="uk-position-center uk-position-small uk-text-center">
275
511
  <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
276
512
  <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
277
513
  </div>
278
514
  </li>
279
515
  <li>
280
- <img data-src="images/light.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !* +*">
516
+ <img data-src="images/light.jpg" alt="" uk-cover uk-img="target: !* -*, !* +*">
281
517
  <div class="uk-position-center uk-position-small uk-text-center">
282
518
  <h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
283
519
  <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
284
520
  </div>
285
521
  </li>
286
522
  <li>
287
- <img data-src="images/photo2.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
523
+ <img data-src="images/photo2.jpg" alt="" uk-cover uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
288
524
  <div class="uk-position-center uk-position-small uk-text-center">
289
525
  <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
290
526
  <p uk-slideshow-parallax="x: 0,0,-200">Lorem ipsum dolor sit amet.</p>
@@ -304,43 +540,43 @@
304
540
 
305
541
  <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m">
306
542
  <li>
307
- <img data-src="images/slider1.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
543
+ <img data-src="images/slider1.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
308
544
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
309
545
  </li>
310
546
  <li>
311
- <img data-src="images/slider2.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
547
+ <img data-src="images/slider2.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
312
548
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
313
549
  </li>
314
550
  <li>
315
- <img data-src="images/slider3.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
551
+ <img data-src="images/slider3.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
316
552
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
317
553
  </li>
318
554
  <li>
319
- <img data-src="images/slider4.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
555
+ <img data-src="images/slider4.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
320
556
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
321
557
  </li>
322
558
  <li>
323
- <img data-src="images/slider5.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
559
+ <img data-src="images/slider5.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
324
560
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
325
561
  </li>
326
562
  <li>
327
- <img data-src="images/slider1.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
563
+ <img data-src="images/slider1.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
328
564
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
329
565
  </li>
330
566
  <li>
331
- <img data-src="images/slider2.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
567
+ <img data-src="images/slider2.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
332
568
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
333
569
  </li>
334
570
  <li>
335
- <img data-src="images/slider3.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
571
+ <img data-src="images/slider3.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
336
572
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
337
573
  </li>
338
574
  <li>
339
- <img data-src="images/slider4.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
575
+ <img data-src="images/slider4.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
340
576
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
341
577
  </li>
342
578
  <li>
343
- <img data-src="images/slider5.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
579
+ <img data-src="images/slider5.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
344
580
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
345
581
  </li>
346
582
  </ul>
@@ -373,11 +609,17 @@
373
609
  <td>The image's `src` attribute.</td>
374
610
  </tr>
375
611
  <tr>
376
- <td><code>dataSources</code></td>
612
+ <td><code>sources</code></td>
377
613
  <td>String</td>
378
614
  <td>''</td>
379
615
  <td>The image's sources. This option is used for background images only. The sources attributes be passed in `key: value;` format for a single source. For multiple sources in JSON format.</td>
380
616
  </tr>
617
+ <tr>
618
+ <td><code>loading</code></td>
619
+ <td>`lazy`|`eager`</td>
620
+ <td>`lazy`</td>
621
+ <td>Enable lazy/eager loading. Set to `eager` for images within the first visible viewport.</td>
622
+ </tr>
381
623
  <tr>
382
624
  <td><code>offsetTop</code></td>
383
625
  <td>String</td>
package/tests/images/image-type.avif ADDED
Binary file
package/tests/images/image-type.jpeg ADDED
Binary file
package/tests/images/image-type.webp ADDED
Binary file
package/tests/index.html CHANGED
@@ -195,7 +195,7 @@
195
195
  <header class="uk-comment-header uk-position-relative">
196
196
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
197
197
  <div class="uk-width-auto">
198
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
198
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
199
199
  </div>
200
200
  <div class="uk-width-expand">
201
201
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -470,7 +470,7 @@
470
470
  <div>
471
471
 
472
472
  <div class="uk-inline">
473
- <img src="images/light.jpg" alt="">
473
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
474
474
  <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a>
475
475
  <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" uk-marker></a>
476
476
  <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a>
@@ -480,7 +480,7 @@
480
480
  <div>
481
481
 
482
482
  <div class="uk-inline-clip">
483
- <img src="images/photo.jpg" alt="">
483
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
484
484
  <div class="uk-overlay uk-overlay-default uk-position-bottom">
485
485
  <p>Default Lorem ipsum dolor sit amet, consectetur.</p>
486
486
  </div>
@@ -490,7 +490,7 @@
490
490
  <div>
491
491
 
492
492
  <div class="uk-inline-clip">
493
- <img src="images/photo.jpg" alt="">
493
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
494
494
  <div class="uk-overlay uk-overlay-primary uk-position-bottom">
495
495
  <p>Primary Lorem ipsum dolor sit amet, consectetur.</p>
496
496
  </div>
@@ -500,7 +500,7 @@
500
500
  <div>
501
501
 
502
502
  <div class="uk-inline uk-light">
503
- <img src="images/photo.jpg" alt="">
503
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
504
504
  <div class="uk-position-center">
505
505
  <span uk-overlay-icon></span>
506
506
  </div>
@@ -533,9 +533,9 @@
533
533
  <div>
534
534
 
535
535
  <ul class="uk-thumbnav">
536
- <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="60" alt=""></a></li>
537
- <li><a href="#"><img src="images/dark.jpg" width="60" alt=""></a></li>
538
- <li><a href="#"><img src="images/light.jpg" width="60" alt=""></a></li>
536
+ <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="60" height="40" alt=""></a></li>
537
+ <li><a href="#"><img src="images/dark.jpg" width="60" height="40" alt=""></a></li>
538
+ <li><a href="#"><img src="images/light.jpg" width="60" height="40" alt=""></a></li>
539
539
  </ul>
540
540
 
541
541
  </div>