pmoreno-rodriguez / grav-theme-future2021

Future Imperfect theme by HTML5UP ported from scratch to Grav. Version 2021

Future Theme for Grav CMS

Future Imperfect theme by HTML5UP ported from scratch to Grav. Version 2021

Future Imperfect by HTML5UP, features a clean, minimalistic design, styling for all basic page elements and HTML5/CSS3 code designed for quick and easy customization.

If you enjoy this theme, please consider sponsoring:

Features

Redesigned from scratch (version 2021)

• HTML5 and CSS3
• Fully Responsive
• Microdata for blogs
• ARIA accessibility conformance
• Various templates for presenting your content
• Full dropdown menu integrated in menu bar and sidebar.
• Styling for all basic page elements
• Styling for various modules
• Cross browser compatible
• Sharing buttons for Facebook, Twitter, Whatsapp and Telegram.
• Top content pages in sidebar
• Fully responsive with full-page mobile navigation
• SCSS based CSS source files for easy customization
• Blueprints for Footer, Slogan and Social icons.
• Full Portfolio template with Glightbox library
• Ready to work with Archives, Breadcrumbs, Editable with Contenttools, Feed, Langswitcher, Maintenance, Reading time, Related pages, Twig extensions, Simplesearch and Taxonomylist.

Supported Page Templates

• Default view template default.md
• Error view template error.md
• Blog view template blog.md
• Blog item view template item.md
• Portfolio view template
• Form view template form.md
• Modular view templates: modular.md
  • Features Modular view template features.md
  • Banner Modular view template banner.md
  • Contact Modular view template contact.md
• Owlcarousel template
• Recent posts partial template
• Related posts partial template

Installation

Installing the Future 2021 theme can be done in one of two ways. Our GPM (Grav Package Manager) installation method enables you to quickly and easily install the theme with a simple terminal command, while the manual method enables you to do so via a zip file.

GPM Installation (Preferred)

The simplest way to install this theme is via the Grav Package Manager (GPM) through your system's Terminal (also called the command line). From the root of your Grav install type:

bin/gpm install future2021

This will install the Future2021 theme into your /user/themes directory within Grav. Its files can be found under /your/site/grav/user/themes/future2021.

Manual Installation

To install this theme, just download the zip version of this repository and unzip it under /your/site/grav/user/themes. Then, rename the folder to future2021. You can find these files either on GitHub or via GetGrav.org.

You should now have all the theme files under

/your/site/grav/user/themes/future2021

Default Options

Future2021 comes with a few default options that can be set site-wide. These options are:

production-mode: true         # In production mode, only minified CSS is used. When disabled, nested CSS are enabled
sidebar:                      # Enable/Disable sidebar in non-editable pages such as simplesearch results, offline, etc.
google_fonts_local:           # Option to load Google Fonts from the theme or from Google servers.
favicon:                      # Choosse your own favicon
custom_logo:                  # A custom logo rather than the default (see below)  
custom_logo_mobile:           # A custom logo to use for mobile navigation
type_logo_header:             # Choose how the logo is displayed in header. Options: Image, Text or Both
slogan:                       # Custom text for slogan
menu_langswitcher:            # Enable/Disable langswitcher icon in menu (langswitcher plugin needed)
menu_search:                  # Enable/Disable search icon in menu (simplesearch plugin needed)
menu_login:                   # Enable/Disable login icon in menu
blog-page: '/blog'            # The route to the blog listing page, useful for a blog style layout
miniposts:                    # Enable/Disable miniposts in left sidebar
miniposts_category:           # Select category name for miniposts (configured in taxonomies)
miniposts_number:             # The number of mini posts will be displayed on the left sidebar
recent_posts_enabled:         # Enable/Disable recent posts in left sidebar
recent_posts_number:          # The number of recent posts will be displayed on the left sidebar
footer.title:                 # Footer block title in left sidebar
footer.description:           # Footer block description in left sidebar
footer.copyright_text:        # Footer block copyright text in left sidebar
footer.button_text:           # Footer block button text in left sidebar
footer.button_url:            # Footer block button url in left sidebar
enable_social:                # Enable/Disable social icons in footer
social_style:                 # Select the style for Fontawesome icons
custommenus.enabled:          # Enable/Disable custom menus in top menu

To make modifications, you can copy the user/themes/future2021/future2021.yaml file to user/config/themes/ folder and modify, or you can use the admin plugin.

NOTE: Do not modify the user/themes/future2021/future2021.yaml file directly or your changes will be lost with any updates

Custom Logos

To add a custom logo, you should put the log into the user/themes/future2021/images/logo folder. Standard image formats are support (.png,.jpg, .gif, .svg, etc.). Then reference the logo via the YAML like so:

custom_logo:
    - name: 'my-custom-logo.png'
custom_logo_mobile:
    - name: 'my-custom-mobile-logo.png'    

Alternatively, you can you use the drag-n-drop "Custom Logo" field in the Future2021 theme options.

Portfolio Options

Option	Type	Default	Description
openEffect	string	zoom	Name of the effect on lightbox open. (zoom, fade, none)
closeEffect	string	zoom	Name of the effect on lightbox close. (zoom, fade, none)
slideEffect	string	slide	Name of the effect on slide change. (slide, fade, zoom, none)
moreText	string	See more	More text for descriptions on mobile devices.
moreLength	number	60	Number of characters to display on the description before adding the moreText link (only for mobiles), if 0 it will display the entire description.
closeButton	boolean	true	Show or hide the close button.
touchNavigation	boolean	true	Enable or disable the touch navigation (swipe).
touchFollowAxis	boolean	true	Image follow axis when dragging on mobile.
keyboardNavigation	boolean	true	Enable or disable the keyboard navigation.
closeOnOutsideClick	boolean	true	Close the lightbox when clicking outside the active slide.
startAt	number	0	Start lightbox at defined index.
width	number	900px	Default width for inline elements and iframes, you can define a specific size on each slide. You can use any unit for example 90% or 100vw for full width
height	number	506px	Default height for inline elements and iframes, you can define a specific size on each slide.You can use any unit for example 90% or 100vh For inline elements you can set the height to auto.
descPosition	string	bottom	Global position for slides description, you can define a specific position on each slide (bottom, top, left, right).
loop	boolean	false	Loop slides on end.
zoomable	boolean	true	Enable or disable zoomable images you can also use data-zoomable="false" on individual nodes.
draggable	boolean	true	Enable or disable mouse drag to go prev and next slide (only images and inline content), you can also use data-draggable="false" on individual nodes.
dragToleranceX	number	40	Used with draggable. Number of pixels the user has to drag to go to prev or next slide.
dragToleranceY	number	65	Used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag).
dragAutoSnap	boolean	false	If true the slide will automatically change to prev/next or close if dragToleranceX or dragToleranceY is reached, otherwise it will wait till the mouse is released.
preload	boolean	true	Enable or disable preloading.

Downloads template

Future2021 theme includes a simple template to manage downloads of files uploaded to a page. These files are automatically found and processed by Grav using page.media.all and displayed in a table with four columns: name, size, modification date and download button.

Demo page

https://future2021.pmdesign.dev

Documentation

You can read extra documentation of Future2021 Theme at https://pmoreno-rodriguez.github.io/#/./gravthemes/future2021/index. This is Spanish document site for Future2021 Theme

Future plans

• Create a Flex Directory for authors and avatars.

grav-theme-future2021's Issues

Can't disable social icons completely

This happens on 1.0.1 and 1.0.2 as well.
Setup: Grav v1.7.37.1 with Admin v1.10.36 in a Docker container.
Go to Themes -> Future 2021 configuration page.
Under social icons, when deleting all social icons, all of them (Twitter, FB, Instagram) will reappear.
Leaving just one is the least worse case if you not plan to use any social icons.

Logo in image format to be implemented in the header

Hi Pedro,

One nice nice-to-have improvement for the Future2021 template would be for users to be able to add a custom .jpg/.png version of a logo in the header of the website. See below where exactly I am referring to:

The idea is that logo image maintains the same clickable properties as the text currently does.

Thanks a lot

Donation BuyMeACoffee

Hey,

thanks for adding the donation button. I tried using that service, however there seem to be a issue with the payment and I always get an error.

For 1 time only, could you share your paypal.me link with me, so I can donate using paypal?

Faulty heading formatting

Hi, great theme.

H1 (#) is rendered smaller than H2 (##). I found that in main.css there is no size given for h1. Adding a style definition for h1 = 1.3em there doesn't change anything. I also changed it in main.css.min without success.

Commenting out the uppercase style for Hx is working.

Tested on actual Firefox and Chrome on Debian 12.

Your theme 'Editorial' behaves as expected as well as 8 other themes I tested.

Best
Nikolaus

Issues with login

When logged in and still on the login status site, it's not possible to open the menu. This is because

{% block menu %}
  {% include 'partials/sidebar_right.html.twig' %}
{% endblock %}

is missing in partials/login-status.html.twig.

On the other hand when you log out and goto the login site again, there is a message saying that you were successfully logged out.

Suggestion: add a crossmark to close the side menu

When you click on the burger menu at the top right, the button (the icon with the 3 slices) disappears, hidden by the menu that appears sliding from the right. To close the menu you have to move the cursor and click on the page.

From an ergonomic point of view, I think it would be more comfortable if the icon of the burger menu became a crossmark, to allow closing the menu in a more intuitive way and without having to move the cursor. To illustrate the idea: https://codepen.io/erikterwan/pen/EVzeRP

Unfortunately I don't have the necessary skills to modify the code and suggest a solution.

Bug with new "Show Image" functionality in default.html.twig

Hi,

in default.md it references "Show Images" as show_pageimage but in default .html.twig it's querying "show_image" in if-clause. When that is changed to show_pageimage it properly hides the primary image. Without that fix the image is always shown.

grav-theme-future2021/templates/default.html.twig

Line 28 in 51ef5e2

{% if show_image and image %}

Improve Portfolio customization

Hi Pedro,
would it be possible to add more options to the portfolio, for example I don't want and don't need OWL, but I would like to add combos of blocks to customize columns, and lines below I share the link of an example of the layout I'm putting together, but I wanted to use the future2021 template.

Blocks I'd like to create:
Minicases (like miniposts)
Portfolio Cases
    Layout in 3, 4 and 6 columns
    Blox with title, background image and pilltags
Portfolio Case
    Title
    pilltags
    Client Name (link and icon)
    Period (text input)
    Case link (if have link show)
    My role on case (textearea block)
    
    Modular block
        Add section (after add 1, could be added more and than create new lines)
            Title
            Description
            Background image
            Add sub section (after add 1, could be added more and than create a new columns)
                Title
                Description
                Cover image
                Add List options (if added more than 1, create a UL list on layout)

My based idea is here.

Demo site

Not a big deal. But, the demo site link in the admin panel of grav should probably be changed or redirected?
Feel free to close this ticket anytime you feel like it.
Have a wonderful day :)

Breadcrumb links underlining too long

When breadcrumbs are active, their links are underlined until the separator and not only the text, see

How to properly delete the right toolbar ?

Hello,

I'm trying to remove the menu on the right especially the login form from the template.

I didn't figure it out how to do this properly without deeply changing the core / theme.

The option menu_login: false doesn't work.

Do you have a proper solution ?

Thanks.

Snippet from :

user/config/themes/future2021.yaml

Social Icons not visible

The Social Icons are not visible while being in html code (see picture) but with a size of 0. (Both in Sidebar mode as well as in normal footer). I also tried to add the social icon in the header to cross-check but there one out of the two sizes is 0 as well.
This is on a fresh Grav installation without any plugins or changes to the template.

Width issue

Hello!

I am building a rework of my blog with your theme. Everything is great so far, but I have one issue.

On my macbookpro I have a article which is behaving like this:

while all other posts look like

I have no idea how to debug this, but I am sure its the content width (since its the biggest post, with loads of codeblocks, long sentences etc.).

Maybe its because my "featured" posts doesnt have images?

This was on 1.0.5, I tested 1.0.6 with demo data (had the demo data on 1.0.5 too) and it doesnt happend there.

I am an absolute noob in anything css/template related.
Can you could help me?, your next beer is on me for sure! :)

Miniposts Template uses page object, instead of minipost object to parse date

See here:

https://github.com/pmoreno-rodriguez/grav-theme-future2021/blob/develop/templates/partials/miniposts.html.twig#L35-L39

{% if config.plugins["translate-date"].enabled %}
            <time class="published" itemprop="datePublished" datetime="{{ page.date|td(null, "Y-m-d") }}">{{ page.date|td(null, "M j, Y") }}</time>
          {% elseif config.plugins["twig-extensions"].enabled %}
            <time class="published" itemprop="datePublished" datetime="{{ page.date|localizeddate('medium', 'none', lang) }}">{{ page.date|localizeddate('medium', 'none', lang) }}</time>
          {% else %}
            <time class="published" itemprop="datePublished" datetime="{{ page.date|date("Y-m-d") }}">{{ page.date|date("M j, Y") }}</time>
          {% endif %}

instead of page should simply use p from

{% for p in page.evaluate({'@taxonomy.category':miniposts_category}).order('header.order', 'asc').slice(0,miniposts_number) %}

https://github.com/pmoreno-rodriguez/grav-theme-future2021/blob/develop/templates/partials/miniposts.html.twig#L11

Missing |raw Twig filter in simplesearch_item.html.twig

In order to render images in search results, I had to modify in simplesearch_item.html.twig

{% if banner %}
    <div class="search-image">
        <a href="{{ page.url }}">{{ banner }}</a>
    </div>

into

{% if banner %}
    <div class="search-image">
        <a href="{{ page.url }}">{{ banner|raw }}</a>
    </div>

Brilliant theme

Hi

I really like your theme and I'm using it here - https://soundscapes.woollypigs.com/

Made a few edits to fit my needs.

Though for the life of me I can't figure out how to get post into the Featured/minipost on the left handside on the front page.

Any hints is much appreciated, thanks.

SMC

Suggestion: serve google fonts locally

Would it be possible to add an option to use locally hosted google fonts? As you did for another theme grav-theme-editorial: Serve google fonts locally #19
To make future2021 GDPR compliant and satisfy users who want to preserve their privacy.
Many thanks to you !

Sticky menu for blog posts

Is a sticky menu planned? ie. left for long blog posts
Like the mini-post sidemenu, but stickied, and with information from the post, like "table of contents"

Demo content request

Hello out there,
I hope this finds you in good health.
I don't really get behind the structure yet. Is it possible that you can share your demo content and your requirements? It doesn't matter that it's in Spanish.
Best regards from Berlin

Issues with breadcrumbs and pagination in blog

          Thank you so much - I'll try using SVG format unril new version (also it would be nice if the images scaled to the same height - just a suggestion for future improvement) :)

However, on my website, the pagination on the blog doesn't show even when I have more than five articles. The first few articles don't show up (breadcrumbs also do not show). :/

Originally posted by @Misha-N in #31 (comment)

Installation results in an error

Tried to install theme via bin/gpm install future2021

Got the following error
/home/robertso/moko-papa.nz/grav/user/themes/future2021/templates/partials/taxonomylist.html.twig

{% set taxlist = children_only is defined ? taxonomylist.getChildPagesTags() : taxonomylist.get() %}

{% if taxlist %}

• {% for tax,value in taxlist[taxonomy]|sort %} {% set active = uri.param(taxonomy) == tax? 'active' : '' %} {{ tax }} {% endfor %}

{% endif %}

Arguments

"The sort filter only works with arrays or "Traversable", got "NULL"."

I have not had a lot of time to look into it - tried commenting out the template, but no luck. Might be able to look on a better machine later.

Remove the menu 'hamburger' from the top bar

I have looked everywhere in the settings and cannot find anyway to completely remove the menu from displaying. I am not using and it shows as empty, but I want to completely remove it. Is this possible?

HTML/CSS bugs

Hello I found some bugs in HTML/CSS in new version.
In Blog page - share options are displayed as list and missing:
border-left: solid 1px rgba(160, 160, 160, 0.3);
display: inline-block;
font-size: larger;
font-weight: 400;
margin: 0 0 0 1em;
padding: 0 0 0 1em;
text-transform: uppercase;

also I was also not able to hide "image featured" in feature page block - it display one big image every time.

suggestion

hello

not an issue, but suggestion

could you maybe make main container to have option to be set narrower?
like to have option for us to choose width of it. or you know just have some size modifiers

*image is for illustrative purposes

sort filter causes error when taxonomy is empty

The sort filter only works with arrays or "Traversable", got "NULL

No Sidebar with demo files.

I am not sure why I dont have the left sidebar at all. It all seems off without it.
I just installed the theme over grav theme installer, than deployed _demo/pages into pages and _demo/config into config.

I am new to grav but checked it several times and checked with other themes but I cant get this one to work.

Cannot show any entry inside the "Featured" section

Hello, maybe this is a dumb question but I cannot manage to show anything inside the left sidebar "Featured" section.
I've read the docs and couldn't end up with anything useful.
The Theme settings tips are a little misleading to me.
Can you please specify how to get that feature working?
Thanks and congratulations for the awesome job in developing this gorgeous theme.