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.

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