Fixes SLING-9386 - Updating to lazy load images for the grid and search
diff --git a/ui/src/main/frontend/scss/_overrides.scss b/ui/src/main/frontend/scss/_overrides.scss
index 3d718fa..21f84ba 100644
--- a/ui/src/main/frontend/scss/_overrides.scss
+++ b/ui/src/main/frontend/scss/_overrides.scss
@@ -38,4 +38,5 @@
$danger: $crimson;
$navbar-height: 5rem;
$navbar-item-img-max-height: 4rem;
-$modal-z: 2000;
\ No newline at end of file
+$modal-z: 2000;
+$selected: $violet;
\ No newline at end of file
diff --git a/ui/src/main/frontend/scss/cms.scss b/ui/src/main/frontend/scss/cms.scss
index c8b7dae..b876ef9 100644
--- a/ui/src/main/frontend/scss/cms.scss
+++ b/ui/src/main/frontend/scss/cms.scss
@@ -16,8 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import 'fonts';
-@import 'overrides';
+@import "fonts";
+@import "overrides";
@import "../../../../node_modules/bulma/bulma.sass";
body.cms {
@@ -69,7 +69,7 @@
}
.card.is-selected {
- border: 1px solid $violet;
+ border: 1px solid $selected;
}
.card-footer-item {
@@ -79,8 +79,12 @@
text-align: center;
}
+.card-image {
+ background-color: $gray-light;
+}
+
small.card-footer-item {
- font-size: 12px;
+ font-size: 12px;
}
.container {
@@ -130,7 +134,7 @@
.is-linked {
cursor: pointer;
- border: 1px solid rgba(0,0,0,0);
+ border: 1px solid rgba(0, 0, 0, 0);
}
.is-draggable {
@@ -173,7 +177,8 @@
margin: 0;
}
-nav .level-left, nav .level-right {
+nav .level-left,
+nav .level-right {
flex-shrink: inherit;
}
@@ -251,7 +256,7 @@
table thead .sorting_asc_disabled:after,
table thead .sorting_desc:after,
table thead .sorting_desc_disabled:after {
- font-family: 'jam-icons';
+ font-family: "jam-icons";
}
table thead .sorting:after {
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/contentgrid/contentgrid.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/contentgrid/contentgrid.jsp
index 664f595..200494c 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/contentgrid/contentgrid.jsp
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/contentgrid/contentgrid.jsp
@@ -34,27 +34,27 @@
<figure class="image is-5by4">
<c:choose>
<c:when test="${child.resourceType == 'sling:File' || child.resourceType == 'nt:file'}">
- <img src="${child.path}.transform/sling-cms-thumbnail.png" alt="${child.name}">
+ <img src="${child.path}.transform/sling-cms-thumbnail.png" loading="lazy" alt="${child.name}">
</c:when>
<c:when test="${child.resourceType == 'sling:Site'}">
- <img src="/static/sling-cms/thumbnails/site.png.transform/sling-cms-thumbnail.png" alt="${sling:encode(child.name, 'HTML_ATTR')}">
+ <img src="/static/sling-cms/thumbnails/site.png.transform/sling-cms-thumbnail.png" loading="lazy" alt="${sling:encode(child.name, 'HTML_ATTR')}">
</c:when>
<c:when test="${child.resourceType == 'sling:OrderedFolder' || child.resourceType == 'sling:Folder' || child.resourceType == 'nt:folder'}">
- <img src="/static/sling-cms/thumbnails/folder.png.transform/sling-cms-thumbnail.png" alt="${sling:encode(child.name, 'HTML_ATTR')}">
+ <img src="/static/sling-cms/thumbnails/folder.png.transform/sling-cms-thumbnail.png" loading="lazy" alt="${sling:encode(child.name, 'HTML_ATTR')}">
</c:when>
<c:when test="${child.resourceType == 'sling:Page'}">
<c:set var="templateThumbnail" value="${child.valueMap['jcr:content/sling:template']}/thumbnail"/>
<c:choose>
<c:when test="${sling:getResource(resourceResolver, templateThumbnail) != null}">
- <img src="${templateThumbnail}.transform/sling-cms-thumbnail.png" alt="${sling:encode(child.name, 'HTML_ATTR')}">
+ <img src="${templateThumbnail}.transform/sling-cms-thumbnail.png" loading="lazy" alt="${sling:encode(child.name, 'HTML_ATTR')}">
</c:when>
<c:otherwise>
- <img src="/static/sling-cms/thumbnails/page.png.transform/sling-cms-thumbnail.png" alt="${child.name}">
+ <img src="/static/sling-cms/thumbnails/page.png.transform/sling-cms-thumbnail.png" loading="lazy" alt="${child.name}">
</c:otherwise>
</c:choose>
</c:when>
<c:otherwise>
- <img src="/static/sling-cms/thumbnails/file.png.transform/sling-cms-thumbnail.png" alt="${child.name}">
+ <img src="/static/sling-cms/thumbnails/file.png.transform/sling-cms-thumbnail.png" loading="lazy" alt="${child.name}">
</c:otherwise>
</c:choose>
</figure>
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/searchresults/searchresults.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/searchresults/searchresults.jsp
index 5a6693c..40aa217 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/searchresults/searchresults.jsp
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/searchresults/searchresults.jsp
@@ -50,7 +50,7 @@
</c:otherwise>
</c:choose>
<c:if test="${icon == 'file'}">
- <img src="${result.path}.transform/sling-cms-thumbnail.png" alt="${sling:encode(title,'HTML_ATTR')}" />
+ <img src="${result.path}.transform/sling-cms-thumbnail.png" loading="lazy" alt="${sling:encode(title,'HTML_ATTR')}" />
</c:if>
<h5 title="${sling:encode(title,'HTML_ATTR')}">
<span class="jam jam-${icon}"></span> ${sling:encode(title,'HTML')}
