Merge pull request 'Add placeholder to broken images' (#126) from nevfy/selfprivacy.org:set-img-size into master

Reviewed-on: https://git.selfprivacy.org/SelfPrivacy/selfprivacy.org/pulls/126
Reviewed-by: Inex Code <inex.code@selfprivacy.org>

assets/scss/_styles_project.scss

@@ -73,10 +73,23 @@
 
 .sp-service-icon {
   margin-top: -4rem;
+  min-height: 6rem;
+  min-width: 4rem;
   max-width: 12rem;
   max-height: 8rem;
   margin-left: 2rem;
   width: max-content;
+  & > .error {
+    min-height: 6rem;
+    min-width: 6rem;
+  }
+}
+
+.sp-feature-img {
+  min-height: 20rem;
+  min-width: 20rem;
+  max-width: 40rem;
+  max-height: 40rem;
 }
 
 .sp-service-card {
@@ -91,8 +104,9 @@
 }
 
 .sp-supported-by-img {
-  max-width: 15rem;
+  pointer-events: none;
   margin: 1rem;
+  width: 10rem;
 }
 
 .sp-supported-by-list {
@@ -161,4 +175,20 @@ a, a.btn-link {
 .container-fluid {
   padding-left: 0 !important;
   padding-right: 0 !important;
+}
+
+.error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 2rem;
+  padding: 1rem;
+  background-color: transparent;
+  border: lightgray solid .25rem;
+  border-radius: .5rem;
+  & > i {
+    color: lightgray;
+  }
 }

content/en/_index.html

@@ -10,7 +10,7 @@ linkTitle = "SelfPrivacy"
 			<div class="container rounded">
 				<div id="screenshotsCarouselControls" class="carousel slide" data-bs-ride="carousel">
 				  <div class="carousel-inner rounded">
-					<div class="carousel-item">
+					<div class="carousel-item active">
 					  <img class="d-block w-100" src="/images/screenshots/1-en.png" alt="First slide">
 					</div>
 					<div class="carousel-item">
@@ -32,15 +32,15 @@ linkTitle = "SelfPrivacy"
 						<img class="d-block w-100" src="/images/screenshots/7-en.png" alt="Seventh slide">
 					</div>
 				  </div>
-				  <ol class="carousel-indicators">
-					<li data-bs-target="#screenshotsCarouselControls" data-slide-to="0" class="active"></li>
-					<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="1"></li>
-					<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="2"></li>
-					<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="3"></li>
-					<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="4"></li>
-					<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="5"></li>
-					<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="6"></li>
-				  </ol>
+				  <div class="carousel-indicators">
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="0" class="active" aria-current="true"></button>
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="1"></button>
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="2"></button>
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="3"></button>
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="4"></button>
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="5"></button>
+					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="6"></button>
+				  </div>
 				  <button class="carousel-control-prev" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="prev">
 					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
 					<span class="visually-hidden">Previous</span>
@@ -192,10 +192,20 @@ linkTitle = "SelfPrivacy"
 <div class="container-fluid">
 	<div class="sp-supported-by-list">
 		<a href="https://nlnet.nl/project/SelfPrivacy/" target="_blank" rel="noopener noreferrer">
-			<img class="sp-supported-by-img" src="/images/logos/nlnet.svg" alt="NLnet foundation">
+			<object role="img" aria-label="NLnet foundation" class="d-flex justify-content-center align-items-center sp-supported-by-img" type="image/svg+xml" data="/images/logos/nlnet.svg">
+                <div class="error">
+					<i class="fa-solid fa-triangle-exclamation"></i>
+					NLnet foundation
+				</div>
+            </object>
 		</a>
 		<a href="https://privacyaccelerator.org" target="_blank" rel="noopener noreferrer">
-			<img class="sp-supported-by-img" src="/images/logos/PrivacyAcceleratorLogo.svg" alt="Privacy Accelerator">
+			<object role="img" aria-label="Privacy Accelerator" class="d-flex justify-content-center align-items-center sp-supported-by-img" type="image/svg+xml" data="/images/logos/PrivacyAcceleratorLogo.svg">
+                <div class="error">
+					<i class="fa-solid fa-triangle-exclamation"></i>
+					Privacy Accelerator
+				</div>
+            </object>
 		</a>
     </div>
 </div>

layouts/shortcodes/landing-feature.html

@@ -4,7 +4,7 @@
 {{ $side := .Get 3 }}
 {{ if eq $side "right" }}
 <div class="d-flex flex-column flex-lg-row flex-xl-row justify-content-center align-items-center sp-feature sp-feature{{ $bg }} my-auto">
-        <div class="flex-none col-xl-4 col-lg-6 col-md-8 col-xs-12 px-5">
+        <div class="col-xl-4 col-lg-6 col-md-8 col-xs-12 px-5">
             {{ if $title }}
                 <h2 class="sp-feature-title">{{ $title }}</h2>
             {{ end }}
@@ -12,14 +12,22 @@
         </div>
         {{ if $illustration }}
         <div class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
-            <img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}">
+            <object role="img" class="my-auto d-flex justify-content-center align-items-center card-img-top" type="image/svg+xml" data="{{ $illustration.RelPermalink }}">
+                <div class="error sp-feature-img">
+                    <i class="fa-solid fa-triangle-exclamation"></i>
+                </div>
+            </object>
         </div>
         {{ end }}
     {{ else }}
 <div class="d-flex flex-column-reverse flex-lg-row flex-xl-row justify-content-center align-items-center sp-feature sp-feature{{ $bg }}">
         {{ if $illustration }}
         <div class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
-            <img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}">
+            <object role="img" class="col-lg-4 col-md-6 col-sm-8 col-xs-12 my-auto d-flex justify-content-center align-items-center card-img-top" type="image/svg+xml" data="{{ $illustration.RelPermalink }}">
+                <div class="error sp-feature-img">
+                    <i class="fa-solid fa-triangle-exclamation"></i>
+                </div>
+            </object>
         </div>
         {{ end }}
         <div class="col-xl-4 col-lg-6 col-md-8 col-xs-12 px-5">

layouts/shortcodes/landing-service.html

@@ -1,7 +1,11 @@
 {{ $illustration := .Get 0 }}
 {{ $title := .Get 1 }}
 <div class="card sp-service-card h-100">
-    <img class="card-img-top rounded-img sp-service-icon" src="{{ $illustration }}" alt="">
+    <object class="d-flex justify-content-center align-items-center card-img-top sp-service-icon" type="image/svg+xml" data="{{ $illustration }}">
+        <div class="error">
+            <i class="fa-solid fa-triangle-exclamation"></i>
+        </div>
+    </object>
     <div class="card-body">
         <h4 class="card-title">{{ $title }}</h4>
         {{ .Inner }}

static/images/logos/nlnet.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <!-- Created using Karbon14, part of koffice: http://www.koffice.org/karbon -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="449px" height="168px">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="449px" height="170px" viewBox="0 0 449 168">
   <defs>
   </defs>
   <g id="Layer">