Add cover images (#2137)

theme/assets/img/cover/README.md

@@ -0,0 +1,7 @@
+# Cover images
+
+The cover images in this folder were obtained from Unsplash.
+
+## License
+
+See the [Unsplash License](https://unsplash.com/license) for details.

theme/assets/stylesheets/extra.css

@@ -454,3 +454,31 @@ div[class="md-source__icon md-icon"], div[class="md-source__repository md-source
 path[d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25Z"] {
     d: path('M16.937 3.722a2.363 2.363 0 1 1 3.341 3.341L19.342 8 16 4.658l.937-.936ZM13.467 7 3 17.467V21h3.532L17 10.533 13.465 7h.001Z')
 }
+
+/* Cover images */
+.center-cropped {
+    width: 100%;
+    height: 200px;
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    position: relative;
+    text-align: center;
+    border-radius: 0.5em;
+}
+  
+/* Set the image to fill its parent and make transparent */
+.center-cropped img {
+    min-height: 100%;
+    min-width: 100%;
+    opacity: 0;
+}
+
+.center-cropped h1 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+}

theme/main.html

@@ -84,13 +84,31 @@
     <strong>Visit privacyguides.org for current advice.</strong>
     </a>
 {% else %}{% endif %}{% endblock %}
-{% block extrahead %}{% if page and page.meta and page.meta.schema %}
+{% block extrahead %}
+<meta name="robots" content="max-snippet:-1, max-image-preview:large">
+{% if page and page.meta and page.meta.schema %}
 <script type="application/ld+json">
 {{ page.meta.schema|tojson }}
 </script>
 {% endif %}{% endblock %}
 {% block content %}
-    {% include "partials/content.html" %}
+    {% if page and page.meta and page.meta.cover %}
+    <div class="center-cropped" style="background-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/en/assets/img/cover/{{ page.meta.cover }}');">
+        <h1>{{ page.title | d(config.site_name, true)}}</h1>
+        <img src="/en/assets/img/cover/{{ page.meta.cover }}" alt="{{ page.title | d(config.site_name, true)}} cover image" title="{{ page.title | d(config.site_name, true)}}">
+    </div>
+    {% endif %}
+    {% if "material/tags" in config.plugins %}
+    {% include "partials/tags.html" %}
+    {% endif %}
+    {% include "partials/actions.html" %}
+    {% if "\x3ch1" not in page.content and not page.meta.cover %}
+    <h1>{{ page.title | d(config.site_name, true)}}</h1>
+    {% endif %}
+    {{ page.content }}
+    {% include "partials/source-file.html" %}
+    {% include "partials/feedback.html" %}
+    {% include "partials/comments.html" %}
     {% if config.theme.language == "es" %}
     <div class="admonition info">
     <p>Está viendo la copia en español de Privacy Guides, traducidas por nuestro fantástico equipo lingüístico en <a href="https://crowdin.com/project/privacyguides">Crowdin</a>. Si nota un error o ve alguna sección sin traducir en esta página, ¡<a href="https://matrix.to/#/#pg-i18n:aragon.sh">considere ayudar</a>!</p>