Navigation Menu

Skip to content

Commit

Permalink
Merge pull request #3087 from getnikola/bootblog4-featured-posts
Browse files Browse the repository at this point in the history 
Bootblog4 featured posts and sidebar
  • Loading branch information
@Kwpolska
Kwpolska committed May 13, 2018
2 parents 9e63e14 + 5525d73 commit 616bd2d
Show file tree
Hide file tree
Showing 12 changed files with 343 additions and 85 deletions.
10 changes: 10 additions & 0 deletions CHANGES.txt
View file
Expand Up @@ -3,15 +3,25 @@ Changes since v8 Beta 1

.. to be merged into one "new in v8.0.0" entry later
Important compatibility changes not mentioned previously
--------------------------------------------------------

* You need ``<a class="reference">`` (instead of ``image-reference``)
to activate the lightbox now

Features
--------

* Support featured posts in bootblog4 (Issue #2964)
* Add ``THEME_CONFIG`` setting that themes can use in any way they
like
* Use youtube-nocookie.com for better privacy in ``youtube`` reST
directive and improve the appearance of the player

Bugfixes
--------

* Improve appearance of ``bootblog4`` on mobile (Issue #3069)
* Make ``smartjoin`` more flexible (Issue #3080)
* Make post-list and post_list synonymous (Issue #3083)
* Support ``CATEGORY_DESTPATH_NAMES`` with pages following destpath
Expand Down
78 changes: 69 additions & 9 deletions docs/manual.rst
View file
Expand Up @@ -369,7 +369,7 @@ pretty_url
previewimage
Designate a preview or other representative image path relative to BASE_URL
for use with Open Graph for posts. Adds the image when sharing on social
media and many other uses.
media, feeds, and many other uses.

.. code:: restructuredtext
Expand All @@ -378,7 +378,8 @@ previewimage
The image can be of any size and dimension (services will crop and adapt)
but should less than 1 MB and be larger than 300x300 (ideally 600x600).

Note that the default themes do not display this image.
This image is displayed by ``bootblog4`` for featured posts (see `Featured
Posts`_ for details).

template
Change the template used to render this page/post specific page. That
Expand Down Expand Up @@ -833,6 +834,62 @@ If you set the ``status`` metadata field of a post to ``private``, it will not b
in indexes and feeds. It *will* be compiled, and if you deploy it it *will* be made
available, so it will not generate 404s for people who had linked to it.

Featured Posts
~~~~~~~~~~~~~~

Some themes, ``bootblog4`` in particular, support featured posts. To mark a
post as featured, simply set the ``status`` meta field to ``featured``. All
featured posts are available in index templates in a ``featured``
list, but only if this is the main blog index.

For bootblog4, you can display up to three posts as featured: one can be shown
in a large gray box (jumbotron), and two more can appear in small white
cards. In order to enable this feature, you need to add ``THEME_CONFIG`` to
your configuration, and set it up properly:

.. code:: python
THEME_CONFIG = {
DEFAULT_LANG: {
# Show the latest featured post in a large box, with the previewimage as its background.
'featured_large': True,
# Show the first (remaining) two featured posts in small boxes.
'featured_small': True,
# Show featured posts on mobile.
'featured_on_mobile': True,
# Show image in `featured_large` on mobile.
# `featured_small` displays them only on desktop.
'featured_large_image_on_mobile': False,
# Strip HTML from featured post text.
'featured_strip_html': True,
# Contents of the sidebar, If empty, the sidebar is not displayed.
'sidebar': ''
}
}
You can pick betweeen (up to) 1, 2, or 3 featured posts. You can mix
``featured_large`` and ``featured_small``, rest assured that Nikola will always
display the latest posts no matter what setup you choose. If only one posts
qualifies for the small cards, one card taking up all the width will appear.

Both featured box formats display an image to the right. You can set it by changing the ``previewimage`` meta value to the full path to the image (eg. ``.. previewimage: /images/featured1.png``). This works best with images in portrait orientation.

Note that, due to space constraints, only the large box may show the image on
mobile, below the text (this behavior can be disbled). Small boxes never
display images on mobile. In particular: ``xs`` and ``sm`` display only the
large image, and only if configured; ``md`` displays only the large image,
``lg`` displays all three images.

The boxes display only the teaser. We recommend keeping it short so
you don’t get an ugly scrollbar.

Finally, here’s an example (you’ll need to imagine a scrollbar in the right box
yourself):

.. thumbnail:: https://getnikola.com/images/bootblog4-featured2x.png
:align: center
:alt: An example of how featured posts look in bootblog4.

Queuing Posts
~~~~~~~~~~~~~

Expand Down Expand Up @@ -1249,8 +1306,8 @@ thumbnail
{{% raw %}}{{% thumbnail "/images/foo.png" %}}{{% /thumbnail %}}{{% /raw %}}
{{% raw %}}{{% thumbnail "/images/foo.png" alt="Foo Image" align="center" %}}{{% /thumbnail %}}{{% /raw %}}
{{% raw %}}{{% thumbnail "/images/foo.png" imgclass="image-grayscale" figclass="figure-shadow" %}}<p>Image caption</p>{{% /thumbnail %}}{{% /raw %}}
{{% raw %}}{{% thumbnail "/images/foo.png" alt="Foo Image" title="Insert title-text joke here" align="right" %}}<p class="caption">Foo Image (right-aligned) caption</p>{{% /thumbnail %}}{{% /raw %}}
{{% raw %}}{{% thumbnail "/images/foo.png" imgclass="image-grayscale" figclass="figure-shadow" %}}&lt;p&gt;Image caption&lt;/p&gt;{{% /thumbnail %}}{{% /raw %}}
{{% raw %}}{{% thumbnail "/images/foo.png" alt="Foo Image" title="Insert title-text joke here" align="right" %}}&lt;p class="caption"&gt;Foo Image (right-aligned) caption&lt;/p&gt;{{% /thumbnail %}}{{% /raw %}}
The following keyword arguments are supported:

Expand Down Expand Up @@ -1834,7 +1891,7 @@ If you click on images on a gallery, or on images with links in post, you will
see a bigger image, thanks to the excellent `baguetteBox
<https://feimosi.github.io/baguetteBox.js/>`_. If don’t want this behavior, add an
``.islink`` class to your link. (The behavior is caused by ``<a
class="image-reference">`` if you need to use it outside of galleries and reST
class="reference">`` if you need to use it outside of galleries and reST
thumbnails.)

The gallery pages are generated using the ``gallery.tmpl`` template, and you can
Expand Down Expand Up @@ -2540,19 +2597,22 @@ To include an image placed in the ``images`` folder (or other folders defined in
.. code:: restructuredtext
.. thumbnail:: /images/tesla.jpg
:alt: Nikola Tesla
The small thumbnail will be placed in the page, and it will be linked to the bigger
version of the image when clicked, using
`baguetteBox <https://feimosi.github.io/baguetteBox.js/>`_ by default. All options supported by
the reST `image <http://docutils.sourceforge.net/docs/ref/rst/directives.html#image>`_
directive are supported (except ``target``). If a body element is provided, the
thumbnail will mimic the behavior of the
`figure <http://docutils.sourceforge.net/docs/ref/rst/directives.html#figure>`_
directive are supported (except ``target``). Providing ``alt`` is recommended,
as this is the image caption. If a body element is provided, the thumbnail will
mimic the behavior of the `figure
<http://docutils.sourceforge.net/docs/ref/rst/directives.html#figure>`_
directive instead:

.. code:: restructuredtext
.. thumbnail:: /images/tesla.jpg
:alt: Nikola Tesla
Nikola Tesla, the man that invented the 20th century.
Expand All @@ -2561,7 +2621,7 @@ least this basic HTML:

.. code:: html

<a class="image-reference" href="images/tesla.jpg"><img src="images/tesla.thumbnail.jpg"></a>
<a class="reference" href="images/tesla.jpg" alt="Nikola Tesla"><img src="images/tesla.thumbnail.jpg"></a>

Chart
~~~~~
Expand Down
2 changes: 2 additions & 0 deletions docs/template-variables.rst
View file
Expand Up @@ -100,6 +100,7 @@ Name Type Descript
``colorize_str`` function ``utils.colorize_str`` function
``template_hooks`` dict<str, TemplateHookRegistry> Template hooks registered by plugins
``theme_color`` str ``THEME_COLOR`` setting
``theme_config`` dict ``THEME_CONFIG`` setting
``timezone`` tzinfo Timezone object (represents the configured timezone)
``translations`` dict<str, str> ``TRANSLATIONS`` setting
``twitter_card`` dict ``TWITTER_CARD`` setting, defaults to an empty dictionary
Expand Down Expand Up @@ -179,6 +180,7 @@ Name Type Description
``prevfeedlink`` str Link to previous page as an Atom feed
``nextfeedlink`` str Link to next page as an Atom feed
``prev_next_links_reversed`` bool Whether or not previous and next links should be reversed (``INDEXES_STATIC``)
``is_frontmost_index`` bool Whether or not this is the front-most index (page 0)
============================== ============== ===============================================================================

Variables available in taxonomies
Expand Down
20 changes: 20 additions & 0 deletions nikola/conf.py.in
View file
Expand Up @@ -92,6 +92,26 @@ THEME = ${THEME}
# Must be a HEX value.
THEME_COLOR = '#5670d4'

# Theme configuration. Fully theme-dependent. (translatable)
# Examples below are for bootblog4.
THEME_CONFIG = {
DEFAULT_LANG: {
# Show the latest featured post in a large box, with the previewimage as its background.
'featured_large': False,
# Show the first (remaining) two featured posts in small boxes.
'featured_small': False,
# Show featured posts on mobile.
'featured_on_mobile': True,
# Show image in `featured_large` on mobile.
# `featured_small` displays them only on desktop.
'featured_large_image_on_mobile': True,
# Strip HTML from featured post text.
'featured_strip_html': False,
# Contents of the sidebar, If empty, the sidebar is not displayed.
'sidebar': ''
}
}

# POSTS and PAGES contains (wildcard, destination, template) tuples.
# (translatable)
#
Expand Down
2 changes: 1 addition & 1 deletion nikola/data/themes/base/assets/js/fancydates.js
View file
Expand Up @@ -3,7 +3,7 @@ function fancydates(fanciness, date_format) {
return;
}

dates = $('time.published.dt-published');
dates = document.getElementsByClassName('dt-published');

i = 0;
l = dates.length;
Expand Down
69 changes: 69 additions & 0 deletions nikola/data/themes/bootblog4/assets/css/bootblog.css
View file
Expand Up @@ -65,6 +65,11 @@ h1, h2, h3, h4, h5, h6 {
flex: 0 0 auto;
}

.h-150 { height: 150px; }
@media (min-width: 768px) {
.h-md-150 { height: 150px; }
}

.h-250 { height: 250px; }
@media (min-width: 768px) {
.h-md-250 { height: 250px; }
Expand Down Expand Up @@ -146,7 +151,71 @@ article .metadata {
}
}

/* Various fixes that make this theme look better for Nikola's needs */
.navbar-brand {
padding: 0;
white-space: initial;
}

.bootblog4-featured-large-image {
height: 100%;
border-top-right-radius: .25rem!important;
border-bottom-right-radius: .25rem!important;
}

.bootblog4-featured-jumbotron-row {
margin-left: 0;
margin-right: 0;
}

.bootblog4-right-nav {
text-align: right;
}

.bootblog4-featured-text {
overflow: auto;
}

/* extend the mobile appearance to `sm`, because otherwise weird things happen */
@media (min-width: 576px) {
.nbb-navbar-toggler {
display: block;
}
}

@media (max-width: 767px) {
.bootblog4-right-nav {
margin-top: 1rem;
}

.bootblog4-search-form-holder {
position: absolute;
top: 2.75rem;
}

.bootblog4-search-form-holder input.form-control {
width: 6rem;
}

.bootblog4-brand {
text-align: left;
}
}

@media (min-width: 768px) {
.nbb-navbar-toggler {
display: none;
}

.flex-collapse {
display: flex !important;
}

.bootblog4-search-form-holder {
display: block !important;
}

.bootblog4-brand {
text-align: center;
}
}
40 changes: 25 additions & 15 deletions nikola/data/themes/bootblog4/templates/base.tmpl
View file
Expand Up @@ -15,13 +15,15 @@ ${template_hooks['extra_head']()}
<div class="container">
<header class="blog-header py-3">
<div class="row nbb-header align-items-center">
<div class="col-md-3 col-xs-2" style="padding: 0; width: auto;">
<button class="navbar-toggler navbar-light bg-light nbb-navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false" aria-label="Toggle navigation">
<div class="col-md-3 col-xs-2 col-sm-2" style="width: auto;">
<button class="navbar-toggler navbar-light bg-light nbb-navbar-toggler" type="button" data-toggle="collapse" data-target=".bs-nav-collapsible" aria-controls="bs-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
${search_form}
<div class="collapse bs-nav-collapsible bootblog4-search-form-holder">
${search_form}
</div>
</div>
<div class="col-md-6 col-xs-10 text-center" style="width: auto;">
<div class="col-md-6 col-xs-10 col-sm-10 bootblog4-brand" style="width: auto;">
<a class="navbar-brand blog-header-logo text-dark" href="${abs_link(_link("root", None, lang))}">
%if logo_url:
<img src="${logo_url}" alt="${blog_title|h}" id="logo" class="d-inline-block align-top">
Expand All @@ -32,33 +34,41 @@ ${template_hooks['extra_head']()}
% endif
</a>
</div>
<div class="col-md-3 d-flex justify-content-end align-items-center">
<%block name="belowtitle">
%if len(translations) > 1:
${base.html_translations()}
%endif
</%block>
<div class="d-none d-md-inline"><%block name="sourcelink"></%block></div>
${template_hooks['menu_alt']()}
</div>
</div>
<div class="col-md-3 justify-content-end align-items-center bs-nav-collapsible collapse flex-collapse bootblog4-right-nav">
<%block name="belowtitle">
%if len(translations) > 1:
${base.html_translations()}
%endif
</%block>
<%block name="sourcelink"></%block>
${template_hooks['menu_alt']()}
</div>
</div>
</header>

<nav class="navbar navbar-expand-md navbar-light bg-white static-top">
<div class="collapse navbar-collapse" id="bs-navbar">
<div class="collapse navbar-collapse bs-nav-collapsible" id="bs-navbar">
<ul class="navbar-nav nav-fill d-flex w-100">
${base.html_navigation_links()}
${template_hooks['menu']()}
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<%block name="before_content"></%block>
</div>

<div class="container" id="content" role="main">
<div class="body-content">
% if theme_config.get('sidebar'):
<div class="row"><div class="col-md-8 blog-main">
% endif
<!--Body content-->
${template_hooks['page_header']()}
<%block name="content"></%block>
<!--End of body content-->
% if theme_config.get('sidebar'):
</div><aside class="col-md-4 blog-sidebar">${theme_config.get('sidebar')}</aside></div>
% endif

<footer id="footer">
${content_footer}
Expand Down

0 comments on commit 616bd2d

Please sign in to comment.