Support for page cover images.

Like landing pages, but trading some of the flexibility for easier use.

diff --git a/css/m-components.css b/css/m-components.css
index c02226ef57d329b892eb59ac2aeca784d3419759..e042a8de2bcfefac38b90f017a9dec55bfd6eb39 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -438,7 +438,7 @@ article section > h4 a, article section > h5 a, article section > h6 a {
 }
 
 /* Landing page, jumbo article */
-#m-landing-image, article#m-jumbo > header #m-jumbo-image {
+#m-landing-image, #m-cover-image, article#m-jumbo > header #m-jumbo-image {
   background-size: cover;
   background-color: var(--cover-image-background-color);
   background-position: center center;
@@ -449,6 +449,10 @@ article section > h4 a, article section > h5 a, article section > h6 a {
 #m-landing-image {
   color: #ffffff;
 }
+#m-cover-image {
+  height: 30rem;
+  margin-bottom: -26rem;
+}
 #m-landing-cover {
   padding-bottom: 10rem;
   margin-bottom: -6rem;
@@ -461,7 +465,7 @@ article#m-jumbo > header #m-jumbo-image {
   height: 60vh;
   margin-bottom: 1rem;
 }
-#m-landing-cover, article#m-jumbo > header #m-jumbo-cover {
+#m-landing-cover, #m-cover-image > div, article#m-jumbo > header #m-jumbo-cover {
   background: linear-gradient(transparent 0%, transparent 50%, var(--background-color) 100%);
   width: 100%;
   height: 100%;

diff --git a/doc/css/page-layout.rst b/doc/css/page-layout.rst
index 3cb4b866d2bc478715f6791c77058b1bbb12c066..271318329b0a574942458c7f2ab2a12e776b54a8 100644 (file)
--- a/doc/css/page-layout.rst
+++ b/doc/css/page-layout.rst
@@ -352,7 +352,7 @@ the fold", *not* the cover image.
 .. code:: html
 
     <main><article>
-      <div id="m-landing-image" style="background-image: url('ship.jpg');">
+      <div id="m-landing-image" style="background-image: url('landing.jpg');">
         <div id="m-landing-cover">
           <div class="m-container">
             <!-- content displayed over the cover image -->
@@ -379,6 +379,35 @@ similarly with the hamburger menu on small screen sizes.
 
     You can see landing page in action `on the main page <{filename}/index.rst>`_.
 
+`Pages with cover image`_
+-------------------------
+
+If you just want slide a cover image under content of your page and don't need
+to have control over what content is over the image and what under, simply put
+the following markup in front of your page content --- an outer
+:css:`#m-cover-image` element with background image and an inner empty
+:html:`<div>` that takes care of the fade out gradient over it.
+
+.. code:: html
+    :class: m-inverted
+    :hl_lines: 2 3 4
+
+    <main>
+      <div id="m-cover-image" style="background-image: url('cover.jpg');">
+        <div></div>
+      </div>
+      <article>
+        <div class="m-container">
+          <!-- the whole content of your page goes here -->
+        </div>
+      </article>
+    </main>
+
+.. note-info::
+
+    Real-world example of a page with cover image can be seen on the
+    `Magnum Engine website <http://magnum.graphics/features/>`_.
+
 `Breadcrumb navigation`_
 ------------------------
 

diff --git a/doc/pelican/theme.rst b/doc/pelican/theme.rst
index b6768e3e7a784de20353e982f3893ffdedf01b34..a29079b63cc795979842b6fcf0ea141d182df53b 100644 (file)
--- a/doc/pelican/theme.rst
+++ b/doc/pelican/theme.rst
@@ -425,6 +425,20 @@ destination and URL.
 
     You can see the landing page in action on the `main project page <{filename}/index.rst>`_.
 
+`Pages with cover image`_
+-------------------------
+
+Besides full-blown landing pages that give you control over the whole layout,
+you can add cover images to regular pages by just specifying the :rst:`:cover:`
+field but omitting the :rst:`:landing:` field. See corresponding section
+`in the CSS page layout docs <{filename}/css/page-layout.rst#pages-with-cover-image>`_
+for details about how the cover image affects page layout.
+
+.. note-info::
+
+    Real-world example of a page with cover image can be seen on the
+    `Magnum Engine website <http://magnum.graphics/features/extensions/>`_.
+
 `Page header and footer`_
 -------------------------
 
@@ -466,7 +480,7 @@ above:
 
     The :rst:`:header:` field is not supported on `landing pages`_. In case
     both :rst:`:landing:` and :rst:`:header:` is present, :rst:`:header:` is
-    ignored.
+    ignored. However, it works as expected if just :rst:`:cover:` is present.
 
 `(Social) meta tags for pages`_
 -------------------------------

diff --git a/pelican-theme/templates/page.html b/pelican-theme/templates/page.html
index 737119c2f5bf90a01ee4e82aa78df35e4cf0a952..6a8f33d2a1eb4a12411d0d7b18ad013c5ca8aa47 100644 (file)
--- a/pelican-theme/templates/page.html
+++ b/pelican-theme/templates/page.html
@@ -53,7 +53,11 @@
 {% endblock %}
 
 {% block main %}
-{% if not page.landing and page.header %}
+{% if not page.landing %}
+{% if page.cover %}
+<div id="m-cover-image" style="background-image: url('{{ page.cover|expand_link(page)|e }}');"><div></div></div>
+{% endif %}
+{% if page.header %}
 <div class="m-container m-container-inflatable">
   <div class="m-row">
     <div class="m-col-l-10 m-push-l-1 m-nopadb">
@@ -64,6 +68,7 @@
   </div>
 </div>
 {% endif %}
+{% endif %}
 <article>
   {% if page.landing %}
   <div id="m-landing-image"{% if page.cover %} style="background-image: url('{{ page.cover|expand_link(page)|e }}');"{% endif %}>

diff --git a/pelican-theme/test/page_cover/page.html b/pelican-theme/test/page_cover/page.html
new file mode 100644 (file)
index 0000000..2ac9c28
--- /dev/null
+++ b/pelican-theme/test/page_cover/page.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+<head>
+  <meta charset="UTF-8" />
+  <title>A page | A Pelican Blog</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i" />
+  <link rel="stylesheet" href="static/m-dark.css" />
+  <link rel="canonical" href="page.html" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta property="og:site_name" content="A Pelican Blog" />
+  <meta property="og:title" content="A page" />
+  <meta name="twitter:title" content="A page" />
+  <meta property="og:url" content="page.html" />
+  <meta property="og:description" content="Page text." />
+  <meta name="twitter:description" content="Page text." />
+  <meta property="og:image" content="./ship.jpg" />
+  <meta name="twitter:image" content="./ship.jpg" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta property="og:type" content="page" />
+</head>
+<body>
+<header><nav id="navigation" class="m-navbar-cover">
+  <div class="m-container">
+    <div class="m-row">
+      <a href="./" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">A Pelican Blog</a>
+    </div>
+  </div>
+</nav></header>
+<main>
+<div id="m-cover-image" style="background-image: url('./ship.jpg');"><div></div></div>
+<div class="m-container m-container-inflatable">
+  <div class="m-row">
+    <div class="m-col-l-10 m-push-l-1 m-nopadb">
+<!-- header -->
+This is visible on the top and doesn't break the layout.
+<!-- /header -->
+    </div>
+  </div>
+</div>
+<article>
+  <div class="m-container m-container-inflatable">
+    <div class="m-row">
+      <div class="m-col-l-10 m-push-l-1">
+        <h1>A page</h1>
+<!-- content -->
+<p>Page text.</p>
+<!-- /content -->
+      </div>
+    </div>
+  </div>
+</article>
+<div class="m-container m-container-inflatable">
+  <div class="m-row">
+    <div class="m-col-l-10 m-push-l-1 m-nopadt">
+<!-- footer -->
+This is visible on the bottom.
+<!-- /footer -->
+    </div>
+  </div>
+</div>
+</main>
+</body>
+</html>

diff --git a/pelican-theme/test/page_cover/page.rst b/pelican-theme/test/page_cover/page.rst
new file mode 100644 (file)
index 0000000..7de7350
--- /dev/null
+++ b/pelican-theme/test/page_cover/page.rst
@@ -0,0 +1,8 @@
+A page
+######
+
+:cover: {filename}/ship.jpg
+:header: This is visible on the top and doesn't break the layout.
+:footer: This is visible on the bottom.
+
+Page text.

diff --git a/pelican-theme/test/page_cover/ship.jpg b/pelican-theme/test/page_cover/ship.jpg
new file mode 120000 (symlink)
index 0000000..d4469e3
--- /dev/null
+++ b/pelican-theme/test/page_cover/ship.jpg
@@ -0,0 +1 @@
+../../../doc/static/ship.jpg
\ No newline at end of file

diff --git a/pelican-theme/test/test_page.py b/pelican-theme/test/test_page.py
index 3f0fe0bf1ecb175ceebea8f9bcde321854b6533a..91afb3224a2017371435f6df201abbac3b73b57f 100644 (file)
--- a/pelican-theme/test/test_page.py
+++ b/pelican-theme/test/test_page.py
@@ -111,6 +111,20 @@ class Landing(PageTestCase):
         self.assertEqual(*self.actual_expected_contents('page.html'))
         self.assertEqual(*self.actual_expected_contents('hide-navbar-brand.html'))
 
+class Cover(PageTestCase):
+    def __init__(self, *args, **kwargs):
+        super().__init__(__file__, 'cover', *args, **kwargs)
+
+    def test(self):
+        self.run_pelican({
+            'STATIC_PATHS': ['ship.jpg'],
+            # Verify that the image is propagated to social meta tags
+            'M_DISABLE_SOCIAL_META_TAGS': False,
+        })
+
+        # Header and footer should be shown and should not break the layout
+        self.assertEqual(*self.actual_expected_contents('page.html'))
+
 class TitleSitenameAlias(PageTestCase):
     def __init__(self, *args, **kwargs):
         super().__init__(__file__, 'title_sitename_alias', *args, **kwargs)