@@ -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:`

` that takes care of the fade out gradient over it. + +.. code:: html + :class: m-inverted + :hl_lines: 2 3 4 + +

+ +

+ +.. note-info:: + + Real-world example of a page with cover image can be seen on the + `Magnum Engine website `_. + `Breadcrumb navigation`_ ------------------------ diff --git a/doc/pelican/theme.rst b/doc/pelican/theme.rst index b6768e3e..a29079b6 100644 --- 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 `_. + `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 737119c2..6a8f33d2 100644 --- 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 %} +

+{% endif %} +{% if page.header %}

@@ -64,6 +68,7 @@

{% endif %} +{% endif %}

{% if page.landing %}

diff --git a/pelican-theme/test/page_cover/page.html b/pelican-theme/test/page_cover/page.html new file mode 100644 index 00000000..2ac9c286 --- /dev/null +++ b/pelican-theme/test/page_cover/page.html @@ -0,0 +1,63 @@ + + + + + A page | A Pelican Blog + + + + + + + + + + + + + + + + +

+ +This is visible on the top and doesn't break the layout. + +

A page

+ +

Page text.

+ +

+ +This is visible on the bottom. + +

+ + diff --git a/pelican-theme/test/page_cover/page.rst b/pelican-theme/test/page_cover/page.rst new file mode 100644 index 00000000..7de7350a --- /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 index 00000000..d4469e38 --- /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 3f0fe0bf..91afb322 100644 --- 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)