Switch from easy-thumbnails to django-imagekit #68

pyproject.toml

@@ -7,6 +7,7 @@ readme = "README.md"
 requires-python = ">=3.8"
 dependencies = [
     "django-bootstrap-icons>=0.7.8",
+    "django-imagekit>=5.0.0",
     "django-taggit>=5.0.0",
     "django<5.3,>=4.2",
     "docutils>=0.19",

src/genericsite/admin.py

@@ -1,4 +1,5 @@
 from django.contrib import admin
+from imagekit.admin import AdminThumbnail
 
 from genericsite.models import (
     Article,
@@ -15,9 +16,15 @@
 #######################################################################################
 @admin.register(Image)
 class ImageAdmin(admin.ModelAdmin):
-    readonly_fields = ("width", "height", "mime_type")
+    def thumbnail(self, instance):
+        if instance.is_portrait:
+            return AdminThumbnail(image_field="portrait_small").__call__(instance)
+        return AdminThumbnail(image_field="small").__call__(instance)
+
+    readonly_fields = ("width", "height", "mime_type", "thumbnail")
     fields = (
         "title",
+        "thumbnail",
         "image_file",
         "site",
         "alt_text",

src/genericsite/apps.py

@@ -6,19 +6,13 @@
     "genericsite",
     # 3rd party apps we require
     "django_bootstrap_icons",
+    "imagekit",
     "taggit",
 ]
 # Apps required for admin with genericsite extensions
 ADMIN = [
     "genericsite.adminoverride",
 ]
-# THUMBNAIL_PROCESSORS = (
-#     "easy_thumbnails.processors.colorspace",
-#     "easy_thumbnails.processors.autocrop",
-#     "easy_thumbnails.processors.scale_and_crop",
-#     "easy_thumbnails.processors.filters",
-# )
-# THUMBNAIL_WIDGET_OPTIONS = {"size": (160, 90)}
 
 # TINYMCE_CONFIG = {
 #     "height": "320px",
@@ -114,42 +108,6 @@ def as_dict(self) -> dict:
             "paginate_orphans": self.paginate_orphans,
         }
 
-    # def ready(self):
-    # Landscape aliases, most common in genericsite and many designs
-    # if not aliases.get("hd1080p"):
-    #     aliases.set("hd1080p", {"size": (1920, 1080), "crop": False})
-    # if not aliases.get("hd720p"):
-    #     aliases.set("hd720p", {"size": (1280, 720), "crop": False})
-    # # Ref https://buffer.com/library/ideal-image-sizes-social-media-posts/
-    # # Recommended size for sharing social images on FB, and close enough for others
-    # if not aliases.get("opengraph"):
-    #     aliases.set("opengraph", {"size": (1200, 630), "crop": "smart"})
-    # if not aliases.get("large"):
-    #     aliases.set("large", {"size": (960, 540), "crop": False})
-    # if not aliases.get("medium"):
-    #     aliases.set("medium", {"size": (400, 225), "crop": "smart"})
-    # if not aliases.get("small"):
-    #     aliases.set("small", {"size": (160, 90), "crop": "smart"})
-
-    # # Portrait orientation aliases
-    # if not aliases.get("portrait_small"):
-    #     aliases.set("portrait_small", {"size": (90, 160), "crop": "smart"})
-    # if not aliases.get("portrait_medium"):
-    #     aliases.set("portrait_medium", {"size": (225, 400), "crop": "smart"})
-    # if not aliases.get("portrait_large"):
-    #     aliases.set("portrait_large", {"size": (540, 960), "crop": False})
-    # # Buffer post recommends this size for Pinterest
-    # if not aliases.get("portrait_cover"):
-    #     aliases.set("portrait_cover", {"size": (1000, 1500), "crop": False})
-    # # Buffer post recommends this size for Insta/FB
-    # if not aliases.get("portrait_social"):
-    #     aliases.set("portrait_social", {"size": (1080, 1350), "crop": "smart"})
-    # if not aliases.get("portrait_hd"):
-    #     aliases.set("portrait_hd", {"size": (1080, 1920), "crop": False})
-
-    # # Auto-generate thumbs on file upload
-    # saved_file.connect(generate_aliases_global)
-
 
 # A context processor to add our vars to template contexts:
 def context_defaults(request):

src/genericsite/models.py

@@ -11,10 +11,18 @@
 from django.utils.html import format_html
 from django.utils.translation import gettext_lazy as _
 from django.utils.translation import to_locale
+from imagekit.models import ImageSpecField
+from imagekit.processors import ResizeToFill
 from taggit.managers import TaggableManager
 
 from genericsite.common import Status
-from genericsite.schemas import ImageProp, OGArticle, OGProfile, OpenGraph
+from genericsite.schemas import (
+    CreativeWorkSchema,
+    ImageProp,
+    OGArticle,
+    OGProfile,
+    OpenGraph,
+)
 
 # Transform "en-us" to "en_US"
 DEFAULT_LOCALE = to_locale(settings.LANGUAGE_CODE)
@@ -389,6 +397,27 @@ def copyright_notice(self):
     def url(self):
         return f"https://{self.site.domain}{self.get_absolute_url()}"
 
+    @property
+    def schema(self) -> CreativeWorkSchema:
+        """Return the data as a schema.org object."""
+        schema = CreativeWorkSchema(
+            name=self.title,
+            headline=self.title,
+            description=self.description,
+            creativeWorkStatus=self.status,
+            url=self.url,
+            dateCreated=self.date_created,
+            datePublished=self.date_published,
+            dateModified=self.date_modified,
+            expires=self.expires,
+        )
+        if self.author:
+            schema.author = self.author.schema
+        tags = list(self.tags.names())
+        if tags:
+            schema.keywords = tags
+        return schema
+
     @property
     def opengraph(self) -> OpenGraph:
         """Serialize data to Open Graph metatags.
@@ -483,9 +512,88 @@ class Meta(MediaObject.Meta):
     alt_text = models.CharField(_("alt text"), max_length=255, blank=True)
     width = models.PositiveIntegerField(_("width"), blank=True, null=True)
     height = models.PositiveIntegerField(_("height"), blank=True, null=True)
+
+    # ImageSpec fields defining different renditions
+    hd1080p = ImageSpecField(
+        source="image_file",
+        processors=[ResizeToFill(1920, 1080)],
+        format="JPEG",
+        options={"quality": 60},
+    )
+    hd720p = ImageSpecField(
+        source="image_file",
+        processors=[ResizeToFill(1280, 720)],
+        format="JPEG",
+        options={"quality": 60},
+    )
+    social = ImageSpecField(
+        source="image_file",
+        processors=[ResizeToFill(1200, 630)],
+        format="JPEG",
+        options={"quality": 60},
+    )
+    large = ImageSpecField(
+        source="image_file",
+        processors=[ResizeToFill(960, 540)],
+        format="JPEG",
+        options={"quality": 60},
+    )
+    medium = ImageSpecField(
+        source="image_file",
+        processors=[ResizeToFill(400, 225)],
+        format="JPEG",
+        options={"quality": 60},
+    )
+    small = ImageSpecField(
+        source="image_file",
+        processors=[ResizeToFill(160, 90)],
+        format="JPEG",
+        options={"quality": 60},
+    )
+    portrait_small = ImageSpecField(
+        source="image_file",
+        processors=[ResizeToFill(90, 160)],
+        format="JPEG",
+        options={"quality": 60},
+    )
+    portrait_medium = ImageSpecField(
+        source="image_file",
+        processors=[ResizeToFill(225, 400)],
+        format="JPEG",
+        options={"quality": 60},
+    )
+    portrait_large = ImageSpecField(
+        source="image_file",
+        processors=[ResizeToFill(540, 960)],
+        format="JPEG",
+        options={"quality": 60},
+    )
+    portrait_cover = ImageSpecField(
+        source="image_file",
+        processors=[ResizeToFill(1000, 1500)],
+        format="JPEG",
+        options={"quality": 60},
+    )
+    portrait_social = ImageSpecField(
+        source="image_file",
+        processors=[ResizeToFill(1080, 1350)],
+        format="JPEG",
+        options={"quality": 60},
+    )
+    portrait_hd = ImageSpecField(
+        source="image_file",
+        processors=[ResizeToFill(1080, 1920)],
+        format="JPEG",
+        options={"quality": 60},
+    )
+
     content_field = "image_file"
     icon_name = "image"
 
+    @property
+    def is_portrait(self):
+        return self.height > self.width
+
     @property
     def opengraph(self):
         return ImageProp(

src/genericsite/templates/genericsite/blocks/article_featuredimage.html

@@ -1,20 +1,21 @@
 {% load genericsite %}{% with object as article %}
 <article class="article-full">
-  <h1 class="article-title">{% firstof article.headline article.title article.opengraph.title %}</h1>
-  {% if article.author_display_name and article.author_profile_url %}
-  <p class="article-meta">{{ article.opengraph.date_published|date:"DATE_FORMAT"}}
-    <a href="{{ article.author_profile_url }}">{{ article.author_display_name }}</a></p>
-  {% elif article.author_display_name %}
-  <p class="article-meta">{{ article.opengraph.date_published|date:"DATE_FORMAT"}} {{ article.author_display_name }}</p>
+  <h1 class="article-title">{% firstof article.headline article.title article.schema.title %}</h1>
+  {% if article.author %}
+  <p class="article-meta">{{ article.date_published|date:"DATE_FORMAT"}}
+    <a href="{{ article.author.url }}">{{ article.author.name }}</a></p>
   {% else %}
-  <p class="article-meta">{{ article.opengraph.date_published|date:"DATE_FORMAT"}}</p>
+  <p class="article-meta">{{ article.date_published|date:"DATE_FORMAT"}}</p>
   {% endif %}
   {% opengraph_image article as img %} {% if img %}
   <p>
     <img
     class="img-fluid"
-    src="{{img.image_file.url}}"
-    alt="{{img.alt_text}}"/>
+    src="{{img.large.url}}"
+    alt="{{img.alt_text}}"
+    height="{{img.large.height}}"
+    width="{{img.large.width}}"
+    />
   </p>
   {% endif %}
   {{ article.body|safe }}

src/genericsite/templates/genericsite/blocks/article_list_album.html

@@ -8,14 +8,20 @@
           <a href="{{article.get_absolute_url}}">
           {% opengraph_image article as img %}
           {% if img %}
-          <img class="img-fluid" src="{{ img.image_file.url }}" alt="{{ img.alt_text }}" />
+          <img
+            class="img-fluid"
+            src="{{ img.medium.url }}"
+            width="{{ img.medium.width }}"
+            height="{{ img.medium.height }}"
+            alt="{{ img.alt_text }}"
+            />
           {% else %}
           <svg class="bd-placeholder-img card-img-top" width="400" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
           {% endif %}
           </a>
           <div class="card-body">
-            <h3 class="card-title"><a class="text-reset text-decoration-none" href="{{article.get_absolute_url}}">{% firstof article.title article.opengraph.title %}</a></h3>
-            <p class="card-text">{% firstof article.description article.opengraph.description %}</p>
+            <h3 class="card-title"><a class="text-reset text-decoration-none" href="{{article.get_absolute_url}}">{% firstof article.title article.schema.headline %}</a></h3>
+            <p class="card-text">{% firstof article.description article.schema.description %}</p>
           </div>
         </div>
       </div>

src/genericsite/templates/genericsite/blocks/article_list_blog.html

@@ -2,14 +2,12 @@
 <div class="article-list">{% for article in object_list %}
 <article class="article-preview">
   <h2 class="article-title"><a href="{{ article.get_absolute_url}}"
-    >{% firstof article.headline article.title article.opengraph.title %}</a></h2>
-  {% if article.author_display_name and article.author_profile_url %}
-  <p class="article-meta">{{ article.opengraph.date_published|date:"DATE_FORMAT"}}
-    <a href="{{ article.author_profile_url }}">{{ article.author_display_name }}</a></p>
-  {% elif article.author_display_name %}
-  <p class="article-meta">{{ article.opengraph.date_published|date:"DATE_FORMAT"}} {{ article.author_display_name }}</p>
+    >{% firstof article.headline article.title article.schema.headline %}</a></h2>
+  {% if article.author %}
+  <p class="article-meta">{{ article.date_published|date:"DATE_FORMAT"}}
+    <a href="{{ article.author.url }}">{{ article.author.name }}</a></p>
   {% else %}
-  <p class="article-meta">{{ article.opengraph.date_published|date:"DATE_FORMAT"}}</p>
+  <p class="article-meta">{{ article.date_published|date:"DATE_FORMAT"}}</p>
   {% endif %}<div class="article-excerpt">
   {{ article.excerpt|safe }}
   </div>

src/genericsite/templates/genericsite/blocks/article_text.html

@@ -1,13 +1,11 @@
 {% with object as article %}
 <article class="article-full">
-  <h1 class="article-title">{% firstof article.headline article.title article.opengraph.title %}</h1>
-  {% if article.author_display_name and article.author_profile_url %}
-  <p class="article-meta">{{ article.opengraph.date_published|date:"DATE_FORMAT"}}
-    <a href="{{ article.author_profile_url }}">{{ article.author_display_name }}</a></p>
-  {% elif article.author_display_name %}
-  <p class="article-meta">{{ article.opengraph.date_published|date:"DATE_FORMAT"}} {{ article.author_display_name }}</p>
+  <h1 class="article-title">{% firstof article.headline article.title article.schema.headline %}</h1>
+  {% if article.author %}
+  <p class="article-meta">{{ article.date_published|date:"DATE_FORMAT"}}
+    <a href="{{ article.author.url }}">{{ article.author.name }}</a></p>
   {% else %}
-  <p class="article-meta">{{ article.opengraph.date_published|date:"DATE_FORMAT"}}</p>
+  <p class="article-meta">{{ article.date_published|date:"DATE_FORMAT"}}</p>
   {% endif %}
   {{ article.body|safe }}
 </article>