diff --git a/bookmarks/static/preview-placeholder.svg b/bookmarks/static/preview-placeholder.svg
new file mode 100644
index 0000000..1bf4597
--- /dev/null
+++ b/bookmarks/static/preview-placeholder.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/bookmarks/styles/bookmark-page.css b/bookmarks/styles/bookmark-page.css
index 8adc88d..093624a 100644
--- a/bookmarks/styles/bookmark-page.css
+++ b/bookmarks/styles/bookmark-page.css
@@ -154,14 +154,29 @@ li[ld-bookmark-item] {
min-width: 0;
}
- & img.preview-image {
+ & .preview-image {
flex: 0 0 auto;
width: 100px;
height: 60px;
margin-top: var(--unit-h);
- object-fit: cover;
border-radius: var(--border-radius);
border: solid 1px var(--border-color);
+ object-fit: cover;
+
+ &.placeholder {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--body-color-contrast);
+
+ & .img {
+ width: var(--unit-12);
+ height: var(--unit-12);
+ background-color: var(--tertiary-text-color);
+ -webkit-mask: url(preview-placeholder.svg) no-repeat center;
+ mask: url(preview-placeholder.svg) no-repeat center;
+ }
+ }
}
& .form-checkbox.bulk-edit-checkbox {
diff --git a/bookmarks/templates/bookmarks/bookmark_list.html b/bookmarks/templates/bookmarks/bookmark_list.html
index d68bdc1..e115975 100644
--- a/bookmarks/templates/bookmarks/bookmark_list.html
+++ b/bookmarks/templates/bookmarks/bookmark_list.html
@@ -142,8 +142,14 @@
{% endif %}
- {% if bookmark_list.show_preview_images and bookmark_item.preview_image_file %}
-
+ {% if bookmark_list.show_preview_images %}
+ {% if bookmark_item.preview_image_file %}
+
+ {% else %}
+