add image size to prevent layout shift

src/parser.nim

@@ -219,7 +219,14 @@ proc parseTweet(js: JsonNode): Tweet =
     let name = jsCard{"name"}.getStr
     if "poll" in name:
       if "image" in name:
-        result.photos.add jsCard{"binding_values", "image_large"}.getImageVal
+        let image = jsCard{"binding_values", "image_large"}
+        let (width, height) = image.getImageDimensions
+        let photo = Photo(
+          url: image.getImageVal,
+          width: width,
+          height: height
+        )
+        result.photos.add photo
 
       result.poll = some parsePoll(jsCard)
     elif name == "amplify":
@@ -231,7 +238,13 @@ proc parseTweet(js: JsonNode): Tweet =
     for m in jsMedia:
       case m{"type"}.getStr
       of "photo":
-        result.photos.add m{"media_url_https"}.getImageStr
+        let dimensions = m{"sizes"}{"small"}
+        let photo = Photo(
+          url: m{"media_url_https"}.getImageStr,
+          width: dimensions{"w"}.getInt,
+          height: dimensions{"h"}.getInt
+        )
+        result.photos.add photo
       of "video":
         result.video = some(parseVideo(m))
         with user, m{"additional_media_info", "source_user"}:
@@ -407,7 +420,7 @@ proc parsePhotoRail*(js: JsonNode): PhotoRail =
   for tweet in js:
     let
       t = parseTweet(tweet)
-      url = if t.photos.len > 0: t.photos[0]
+      url = if t.photos.len > 0: t.photos[0].url
             elif t.video.isSome: get(t.video).thumb
             elif t.gif.isSome: get(t.gif).thumb
             elif t.card.isSome: get(t.card).image

src/parserutils.nim

@@ -89,6 +89,10 @@ proc getImageStr*(js: JsonNode): string =
 template getImageVal*(js: JsonNode): string =
   js{"image_value", "url"}.getImageStr
 
+template getImageDimensions*(js: JsonNode): (int, int) =
+  let values = js{"image_values"}
+  (values{"width"}.getInt, values{"height"}.getInt)
+
 proc getCardUrl*(js: JsonNode; kind: CardKind): string =
   result = js{"website_url"}.getStrVal
   if kind == promoVideoConvo:

src/routes/status.nim

@@ -42,7 +42,7 @@ proc createStatusRouter*(cfg: Config) =
         desc = conv.tweet.text
 
       var
-        images = conv.tweet.photos
+        images = conv.tweet.photos.map(p => p.url)
         video = ""
 
       if conv.tweet.video.isSome():

src/sass/tweet/media.scss

@@ -66,6 +66,7 @@
         max-height: 379.5px;
         flex-basis: 300px;
         flex-grow: 1;
+        height: auto;
     }
 }
 

src/types.nim

@@ -104,6 +104,11 @@ type
     near*: string
     sep*: string
 
+  Photo* = object
+    url*: string
+    width*: int
+    height*: int
+
   Gif* = object
     url*: string
     thumb*: string
@@ -185,7 +190,7 @@ type
     poll*: Option[Poll]
     gif*: Option[Gif]
     video*: Option[Video]
-    photos*: seq[string]
+    photos*: seq[Photo]
 
   Result*[T] = object
     content*: seq[T]

src/views/renderutils.nim

@@ -80,9 +80,9 @@ proc genDate*(pref, state: string): VNode =
     input(name=pref, `type`="date", value=state)
     icon "calendar"
 
-proc genImg*(url: string; class=""): VNode =
+proc genImg*(url: string; class=""; width=""; height=""): VNode =
   buildHtml():
-    img(src=getPicUrl(url), class=class, alt="")
+    img(src=getPicUrl(url), class=class, width=width, height=height, alt="")
 
 proc getTabClass*(query: Query; tab: QueryKind): string =
   result = "tab-item"

src/views/rss.nimf

@@ -39,7 +39,7 @@ Twitter feed for: ${desc}. Generated by ${cfg.hostname}
 #end if
 #if tweet.photos.len > 0:
 #  for photo in tweet.photos:
-<img src="${urlPrefix}${getPicUrl(photo)}" style="max-width:250px;" />
+<img src="${urlPrefix}${getPicUrl(photo.url)}" width=${photo.width} height=${photo.height} style="max-width:250px;" />
 #  end for
 #elif tweet.video.isSome:
 <img src="${urlPrefix}${getPicUrl(get(tweet.video).thumb)}" style="max-width:250px;" />

src/views/tweet.nim

@@ -59,11 +59,11 @@ proc renderAlbum(tweet: Tweet): VNode =
         for photo in photos:
           tdiv(class="attachment image"):
             let
-              named = "name=" in photo
-              orig = photo
-              small = if named: photo else: photo & "?name=small"
+              orig = photo.url
+              named = "name=" in orig
+              small = if named: orig else: orig & "?name=small"
             a(href=getOrigPicUrl(orig), class="still-image", target="_blank"):
-              genImg(small)
+              genImg(small, "", $photo.width, $photo.height)
 
 proc isPlaybackEnabled(prefs: Prefs; playbackType: VideoType): bool =
   case playbackType