thumbnail improvements

public/style.css

@@ -38,7 +38,7 @@ summary {
   height: 52px;
   width: 70px;
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: contain;
   background-position: center;
 }
 .rank {
@@ -809,10 +809,14 @@ nav .host {
   font-size: 12px;
 }
 
-nav .spacer {
+nav div.spacer {
   height: 32px;
   position: relative;
 }
+nav span.spacer {
+  height: 20px;
+  display: inline-block;
+}
 nav .space a {
   z-index: 100;
 }

routes.go

@@ -25,6 +25,21 @@ import (
 	"golang.org/x/text/message"
 )
 
+var pictrs = regexp.MustCompile(`\/pictrs\/image\/([a-z0-9\-]+)\.([a-z]+)$`)
+var imgur = regexp.MustCompile(`^https:\/\/(i\.)?imgur.com\/([a-zA-Z0-9]{5,})(\.[a-zA-Z0-9]+)?`)
+
+var isImage = func(u string) bool {
+	p, err := url.Parse(u)
+	if err != nil || p.Path == "" {
+		return false
+	}
+	ext := filepath.Ext(p.Path)
+	if ext == ".jpeg" || ext == ".jpg" || ext == ".png" || ext == ".webp" || ext == ".gif" {
+		return true
+	}
+	return false
+}
+
 var funcMap = template.FuncMap{
 	"host": func(host string) string {
 		if l := os.Getenv("LEMMY_DOMAIN"); l != "" {
@@ -112,38 +127,61 @@ var funcMap = template.FuncMap{
 		}
 		return ""
 	},
-	"isImage": func(u string) bool {
+	"isImage": isImage,
-		p, err := url.Parse(u)
-		if err != nil || p.Path == "" {
-			return false
-		}
-		ext := filepath.Ext(p.Path)
-		if ext == ".jpeg" || ext == ".jpg" || ext == ".png" || ext == ".webp" || ext == ".gif" {
-			return true
-		}
-		return false
-	},
 	"isYoutube": func(u string) bool {
 		re := regexp.MustCompile(`^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube(-nocookie)?\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|live\/|v\/)?)([\w\-]+)(\S+)?$`)
 		return re.MatchString(u)
 	},
 	"thumbnail": func(p lemmy.Post) string {
+		if pictrs.MatchString(p.ThumbnailURL.String()) {
+			return p.ThumbnailURL.String() + "?format=jpg&thumbnail=64"
+		} else if pictrs.MatchString(p.URL.String()) {
+			return p.URL.String() + "?format=jpg&thumbnail=64"
+		}
+		if imgur.MatchString(p.URL.String()) {
+			return imgur.ReplaceAllString(p.URL.String(), "https://i.imgur.com/${2}s.jpg")
+		}
 		if p.ThumbnailURL.IsValid() {
-			return p.ThumbnailURL.String() + "?format=jpg&thumbnail=96"
+			return p.ThumbnailURL.String()
 		}
-		re := regexp.MustCompile(`\/pictrs\/image\/([a-z0-9\-]+)\.([a-z]+)$`)
+		if isImage(p.URL.String()) {
-		if re.MatchString(p.URL.String()) {
+			return "/_/static/photo.png"
-			return p.URL.String() + "?format=jpg&thumbnail=96"
-		}
-		re = regexp.MustCompile(`^https:\/\/(i\.)?imgur.com\/([a-zA-Z0-9]{5,})(\.[a-zA-Z0-9]+)?`)
-		if re.MatchString(p.URL.String()) {
-			return re.ReplaceAllString(p.URL.String(), "https://i.imgur.com/${2}s.jpg")
 		}
 		if p.URL.IsValid() {
 			return "/_/static/link.png"
 		}
 		return "/_/static/text.png"
 	},
+	"banner": func(site lemmy.Site) string {
+		bannerURL := ""
+		if site.Banner.IsValid() {
+			bannerURL = site.Banner.String()
+		} else if site.Icon.IsValid() {
+			bannerURL = site.Icon.String()
+		}
+		if pictrs.MatchString(bannerURL) {
+			return bannerURL + "?format=jpg&thumbnail=300"
+		}
+		return bannerURL
+	},
+	"cbanner": func(c lemmy.Community) string {
+		bannerURL := ""
+		if c.Banner.IsValid() {
+			bannerURL = c.Banner.String()
+		} else if c.Icon.IsValid() {
+			bannerURL = c.Icon.String()
+		}
+		if pictrs.MatchString(bannerURL) {
+			return bannerURL + "?format=jpg&thumbnail=300"
+		}
+		return bannerURL
+	},
+	"shrink": func(u string) string {
+		if pictrs.MatchString(u) {
+			return u + "?format=png&thumbnail=60"
+		}
+		return u
+	},
 	"humanize": humanize.Time,
 	"markdown": func(host string, body string) template.HTML {
 		var buf bytes.Buffer
@@ -452,7 +490,11 @@ func GetIcon(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 		w.Write([]byte("404 - Not Found"))
 		return
 	}
-	iresp, err := state.HTTPClient.Get(resp.SiteView.Site.Icon.String())
+	u := resp.SiteView.Site.Icon.String()
+	if pictrs.MatchString(u) {
+		u += "?format=jpg&thumbnail=60"
+	}
+	iresp, err := state.HTTPClient.Get(u)
 	if err != nil {
 		fmt.Println(err)
 		w.WriteHeader(http.StatusInternalServerError)

templates/login.html

@@ -24,10 +24,11 @@
       </div>
       <div class="spacer">
         <a href="/{{ .Host}}/">
-          <img class="icon" src="{{ if .Site }}{{ .Site.SiteView.Site.Icon.String }}{{else}}/{{ .Host}}/icon.jpg{{end}}">
+          <img class="icon" src="{{ if and .Site .Site.SiteView.Site.Icon.IsValid }}{{ shrink .Site.SiteView.Site.Icon.String }}{{else}}/{{ .Host}}/icon.jpg{{end}}">
         </a>
       </div>
-      <span class="title"><a class="title" href="/{{.Host}}">{{ host .Host}}</a> - sign up or login</span>
+      <a class="title" href="/{{.Host}}">{{ host .Host}}</a><span class="title"> - sign up or login</span>
+      <span class="spacer"></span>
     </nav>
 {{ if .Alert }}
     <div class="alert">

templates/nav.html

@@ -33,14 +33,15 @@
         |
         <form method="POST"><input type="submit" name="op" value="logout"></form>
 {{- else}}
-        <a href="/{{.Host}}/login">log in</a> or <a href="/{{.Host}}/login">sign up</a>| 
+        <a href="/{{.Host}}/login">log in</a> or <a href="/{{.Host}}/login">sign up</a>
+        | 
         <a id="opensettings" href="/{{.Host}}/settings">settings</a>
 {{- end}}
       </div>
       <div id="settingspopup"></div>
       <div class="spacer">
         <a href="/{{ .Host}}/">
-          <img class="icon" src="{{ if and .Site .Site.SiteView.Site.Icon.IsValid }}{{ .Site.SiteView.Site.Icon.String }}{{else}}/{{ .Host}}/icon.jpg{{end}}">
+          <img class="icon" src="{{ if and .Site .Site.SiteView.Site.Icon.IsValid }}{{ shrink .Site.SiteView.Site.Icon.String }}{{else}}/{{ .Host}}/icon.jpg{{end}}">
         </a>
       </div>
       {{- if .Community }}

templates/settings.html

@@ -43,7 +43,7 @@
       </div>
       <div class="spacer">
         <a href="/{{ .Host}}/">
-          <img class="icon" src="{{ if .Site }}{{ .Site.SiteView.Site.Icon.String }}{{else}}/{{ .Host}}/icon.jpg{{end}}">
+          <img class="icon" src="{{ if and .Site .Site.SiteView.Site.Icon.IsValid }}{{ shrink .Site.SiteView.Site.Icon.String }}{{else}}/{{ .Host}}/icon.jpg{{end}}">
         </a>
       </div>
       <span class="title"><a class="title" href="/{{.Host}}">{{host .Host}}</a> - settings</span>

templates/sidebar.html

@@ -62,10 +62,8 @@
 {{- end -}}
 
 {{- if and .Site (not .Community) (not .User) }}
-  {{- if .Site.SiteView.Site.Banner.IsValid }}
+  {{- if or .Site.SiteView.Site.Banner.IsValid .Site.SiteView.Site.Icon.IsValid }}
-      <div class="banner" style="background-image: url({{ .Site.SiteView.Site.Banner }})"></div>
+      <div class="banner" style="background-image: url({{ banner .Site.SiteView.Site }})"></div>
-  {{- else if .Site.SiteView.Site.Icon.IsValid }}
-      <div class="banner" style="background-image: url({{ .Site.SiteView.Site.Icon }})"></div>
   {{- end }}
       <h1>{{ .Site.SiteView.Site.Name }}</h1>
       {{ printer .Site.SiteView.Counts.Users }} readers <br>
@@ -84,10 +82,8 @@
 {{- end -}}
 
 {{- if .Community }}
-  {{- if .Community.CommunityView.Community.Banner.IsValid }}
+  {{- if or .Community.CommunityView.Community.Banner.IsValid .Community.CommunityView.Community.Icon.IsValid }}
-      <div class="banner" style="background-image: url({{ .Community.CommunityView.Community.Banner }})"></div>
+      <div class="banner" style="background-image: url({{ cbanner .Community.CommunityView.Community }})"></div>
-  {{- else if .Community.CommunityView.Community.Icon.IsValid }}
-      <div class="banner" style="background-image: url({{ .Community.CommunityView.Community.Icon }})"></div>
   {{- end }}
       <h1>{{ if ne .Community.CommunityView.Community.Title ""}}{{ .Community.CommunityView.Community.Title }}{{ else }}{{ .Community.CommunityView.Community.Name }}{{end}}</h1>
   {{- if .Session }}