Proof Society Workshop and Winter School 2021

Readme

Editorial Theme

The Editorial Theme is for Grav CMS. Editorial is a GravCMS port of the Editorial theme from HTML5Up.net. The theme from HTML5Up.net is free for personal and commercial use under the CCA 3.0 license.

Installation

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 editorial

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

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 editorial. You can find these files on GitHub or via GetGrav.org.

Post Installation

Enable the Editorial theme, either via the Admin plugin at admin/themes or in the system.yaml file under pages.theme.

pages:
  theme: editorial

Do not directly edit the editorial.yaml file found in the theme folder. Copy the editorial.yaml file to user/config/themes and edit the new file there.

Theme Features

  • Theme Slogan (optional) - Used to add additional text to the site name at the top of the page.
  • Contact Information - Complete the form and the contact information will display in the sidebar.
  • Social Icons (optional) - Add the full URL to a social platform, and an icon/link will automatically display on the top of the page.
  • Blog (optional) - Blog and Item templates.
  • Features modular page
  • Banner modular page like original theme.
  • Contact Form modular page.
  • Contact Form non-modular page.
  • Recent Posts modular page - Show the latest posts in a modular page, eg. Home. (can be changed from twig template)
  • Gallery template (with Glightbox JS)
  • Custom SimpleSearch twig templates.
  • Functionality to searchbox in sidebar
  • Production mode for CSS styles
  • Custom logo and Custom logo mobile in theme config
  • Added support for Taxonomylist, Related pages, Random article. Feeds and Archives plugins

Featured Pages

The latest pages tagged with the selected tag in the theme settings and the chosen number (up to a maximum of 5), will be automatically displayed in a mini-list in the sidebar with teaser images and summaries. The current page, if it appears, will not be displayed on that list.

featured image example

Blog Pages

  • Add a blog page if you need it in your web.

  • Item template is ready to work the Reading Time plugin.

  • Breadcumbs plugin activated by default in posts.

  • Added blog.html.twig and item.html.twig files.

  • Added option to filter by author taxonomy. It is necessary to configure the author taxonomy, in the site configuration, so that the authors of the blog pages appear in them and you can use the filters by author that the theme has.

    Reordered assets

  • All assets (css, js, sass, etc) have been reordered into assets folder.

    Update Styles

  • All styles have been updated to latest version of the original Editorial Theme by HTML5Up.

    Default Options

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

production-mode:              # In production mode, only minified CSS is used. When disabled, nested CSS are enabled
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
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
custom_logo_width:            # Set custom width for custom logo
themeSlogan:                  # Custom text for slogan
blog-page: '/blog'            # The route to the blog listing page, useful for a blog style layout
featured:                     # Enable/Disable featured posts in left sidebar
featured_tag:                 # Select category name for featured posts (configured in taxonomies)
featured_number:              # The number of featured posts will be displayed on the left sidebar
contact_section:              # Set copyright text, contact text, contact email and other contact information
social_enabled:               # Enable/Disable social icons in footer
custommenus.enabled:          # Enable/Disable custom menus in top menu

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

NOTE: Do not modify the user/themes/editorial/editorial.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/editorial/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 Editorial theme options.

Gallery 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.

Demo page

http://editorial.juanvillen.es/

Future plans

  • Add support for date translations in blog (with translate-date and twig-extensions plugins)

Credits

  • Thanks to Jeremy Gonyea, who ported the first Editorial theme for Grav.
  • This theme wouldn't be here without HTML5Up.net. Many thanks to AJ for creating the theme initially on that site.
  • Demo images came from Unsplash
Back to Top