Blur explicit photos option

pkg/config/enum.go

@@ -65,7 +65,7 @@ var (
 		"hide_age",
 
 		// Site prefs
-		// "dm_privacy",
+		// "dm_privacy", "blur_explicit",
 	}
 
 	// Choices for the Contact Us subject

pkg/controller/account/settings.go

@@ -122,11 +122,15 @@ func Settings() http.HandlerFunc {
 			case "preferences":
 				hashtag = "#prefs"
 				var (
-					explicit = r.PostFormValue("explicit") == "true"
+					explicit     = r.PostFormValue("explicit") == "true"
+					blurExplicit = r.PostFormValue("blur_explicit")
 				)
 
 				user.Explicit = explicit
 
+				// Set profile field prefs.
+				user.SetProfileField("blur_explicit", blurExplicit)
+
 				if err := user.Save(); err != nil {
 					session.FlashError(w, r, "Failed to save user to database: %s", err)
 				}

pkg/templates/template_funcs.go

@@ -62,6 +62,9 @@ func TemplateFuncs(r *http.Request) template.FuncMap {
 		"QueryPlus":    QueryPlus(r),
 		"SimplePager":  SimplePager(r),
 		"HasSuffix":    strings.HasSuffix,
+
+		// Test if a photo should be blurred ({{BlurExplicit .Photo}})
+		"BlurExplicit": BlurExplicit(r),
 	}
 }
 
@@ -81,6 +84,22 @@ func InputCSRF(r *http.Request) func() template.HTML {
 	}
 }
 
+// BlurExplicit returns true if the current user has the blur_explicit setting on and the given Photo is Explicit.
+func BlurExplicit(r *http.Request) func(*models.Photo) bool {
+	return func(photo *models.Photo) bool {
+		if !photo.Explicit {
+			return false
+		}
+
+		currentUser, err := session.CurrentUser(r)
+		if err != nil {
+			return false
+		}
+
+		return currentUser.GetProfileField("blur_explicit") == "true"
+	}
+}
+
 // SincePrettyCoarse formats a time.Duration in plain English. Intended for "joined 2 months ago" type
 // strings - returns the coarsest level of granularity.
 func SincePrettyCoarse() func(time.Time) template.HTML {

web/static/css/theme.css

@@ -92,6 +92,11 @@ abbr {
     display: none;
 }
 
+/* Blurred explicit photo */
+.blurred-explicit {
+    filter: blur(14px);
+}
+
 /* Bulma hack: smaller tag size inside of tab buttons. The default tag height
    is set to 2em which makes the boxed tabs too tall and the bottom line doesn't
    draw correctly. Seen on e.g. Profile Pages for the tag # of photos. */

web/static/js/bulma.js

@@ -126,5 +126,12 @@ document.addEventListener('DOMContentLoaded', () => {
         }
       }
     });
-  })
+  });
+
+  // Reveal all blurred images on click.
+  (document.querySelectorAll(".blurred-explicit") || []).forEach(node => {
+    node.addEventListener("click", e => {
+        node.classList.remove("blurred-explicit");
+    });
+  });
 });

web/templates/account/settings.html

@@ -38,7 +38,7 @@
                             <a href="/settings#prefs" class="nonshy-tab-button">
                                 <strong><i class="fa fa-square-check mr-1"></i> Website Preferences</strong>
                                 <p class="help">
-                                    Explicit content filter. <i class="fa fa-fire"></i>
+                                    Explicit content filter <i class="fa fa-fire"></i>; photo blur.
                                 </p>
                             </a>
                         </li>
@@ -333,6 +333,18 @@
                                 include erections or sexually charged content. These may appear on the Site
                                 Gallery as well as user profile pages.
                             </p>
+
+                            <label class="checkbox">
+                                <input type="checkbox"
+                                    name="blur_explicit"
+                                    value="true"
+                                    {{if eq (.CurrentUser.GetProfileField "blur_explicit") "true"}}checked{{end}}>
+                                Blur explicit photos by default
+                            </label>
+                            <p class="help">
+                                Explicit photos on Gallery pages will be blurred by default until clicked. Photos
+                                on explicit Forum threads will also be blurred until clicked.
+                            </p>
                         </div>
 
                         <div class="field">

web/templates/forum/thread.html

@@ -219,8 +219,8 @@
                                 <source src="{{PhotoURL .Filename}}" type="video/mp4">
                             </video>
                             {{else}}
-                            <div class="image mt-4">
+                            <div class="mt-4 is-clipped">
-                                <img src="{{PhotoURL .Filename}}">
+                                <img src="{{PhotoURL .Filename}}"{{if and (or $Root.Forum.Explicit $Root.Thread.Explicit) (eq ($Root.CurrentUser.GetProfileField "blur_explicit") "true")}} class="blurred-explicit"{{end}}>
                             </div>
                             {{end}}
                         {{end}}

web/templates/photo/gallery.html

@@ -400,14 +400,14 @@
                         {{end}}
                     </header>
 
-                    <div class="card-image has-text-centered">
+                    <div class="card-image has-text-centered is-clipped">
                         <!-- GIF video? -->
                         {{if HasSuffix .Filename ".mp4"}}
                         <video autoplay loop controls>
                             <source src="{{PhotoURL .Filename}}" type="video/mp4">
                         </video>
                         {{else}}
-                        <img src="{{PhotoURL .Filename}}">
+                        <img src="{{PhotoURL .Filename}}"{{if BlurExplicit .}} class="blurred-explicit"{{end}}>
                         {{end}}
                     </div>
 
@@ -506,7 +506,7 @@
                             </header>
                             {{end}}
 
-                            <div class="card-image has-text-centered">
+                            <div class="card-image has-text-centered is-clipped">
                                 <!-- GIF video? -->
                                 {{if HasSuffix .Filename ".mp4"}}
                                 <video autoplay loop controls>
@@ -516,7 +516,7 @@
                                 <a href="{{PhotoURL .Filename}}" target="_blank"
                                     class="js-modal-trigger" data-target="detail-modal"
                                     onclick="setModalImage(this.href)">
-                                    <img src="{{PhotoURL .Filename}}">
+                                    <img src="{{PhotoURL .Filename}}"{{if BlurExplicit .}} class="blurred-explicit"{{end}}>
                                 </a>
                                 {{end}}
                             </div>

web/templates/photo/permalink.html

@@ -68,14 +68,14 @@
                 </div>
             </header>
 
-            <div class="card-image has-text-centered">
+            <div class="card-image has-text-centered is-clipped">
                 <!-- GIF video? -->
                 {{if HasSuffix .Photo.Filename ".mp4"}}
                 <video autoplay loop controls>
                     <source src="{{PhotoURL .Photo.Filename}}" type="video/mp4">
                 </video>
                 {{else}}
-                <img src="{{PhotoURL .Photo.Filename}}">
+                <img src="{{PhotoURL .Photo.Filename}}"{{if BlurExplicit .Photo}} class="blurred-explicit"{{end}}>
                 {{end}}
             </div>