[scrobbles] Add screenshots to templates

PROJECT.org

@@ -88,7 +88,7 @@ fetching and simple saving.
 *** Metadata sources
 **** Scraper
 
-* Backlog [1/21] :vrobbler:project:personal:
+* Backlog [2/22] :vrobbler:project:personal:
 ** TODO [#C] Create small utility to clean up tracks scrobbled with wonky playback times :bug:music:scrobbles:
 :PROPERTIES:
 :ID:       702462cf-d54b-48c6-8a7c-78b8de751deb
@@ -590,6 +590,10 @@ We should rename `email_scrobble_board_game` to reflect the fact that it's just
 a helper method to create board game scrobbles given a json blob. It's
 independent of the email flow it was originally creatdd for
 
+** DONE [#B] Display videogame screenshots on scrobble detail if they exist :videogames:templates:
+:PROPERTIES:
+:ID:       0406d082-20f6-0d12-76e2-f281c4801468
+:END:
 ** DONE [#B] Add autotagging to webpages based on domain, title :webpages:metadata:
 :PROPERTIES:
 :ID:       f658435b-f7a0-42e6-b9f6-226678a77a55

vrobbler/apps/scrobbles/models.py

@@ -798,6 +798,12 @@ class Scrobble(TimeStampedModel):
         format="JPEG",
         options={"quality": 75},
     )
+    screenshot_large = ImageSpecField(
+        source="screenshot",
+        processors=[ResizeToFit(800, 800)],
+        format="JPEG",
+        options={"quality": 85},
+    )
     long_play_seconds = models.BigIntegerField(**BNULL)
     long_play_complete = models.BooleanField(**BNULL)
     long_play_last_scrobble = models.ForeignKey(

vrobbler/templates/scrobbles/scrobble_detail.html

@@ -185,6 +185,12 @@
 </div>
 {% endif %}
 
+{% if object.screenshot %}
+<div class="mb-3">
+    <img src="{{ object.screenshot_large.url }}" class="img-fluid rounded" style="max-height: 600px;" alt="Screenshot" />
+</div>
+{% endif %}
+
 <p>
     Tags: 
     {% if object.tags.all %}

vrobbler/templates/scrobbles/scrobble_share.html

@@ -117,6 +117,12 @@
 </div>
 {% endif %}
 
+{% if object.screenshot %}
+<div class="mb-3">
+    <img src="{{ object.screenshot_large.url }}" class="img-fluid rounded" style="max-height: 600px;" alt="Screenshot" />
+</div>
+{% endif %}
+
 <p>
     Tags: 
     {% if object.tags.all %}