Tempus ullamcorper
Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam,...
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. If you enjoy this theme, please consider sponsoring:
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
.
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.
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.
The featured 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.
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
sidebar_open: # Option to display the main page with the sidebar open or closed.
google_fonts_local: # Option to load Google Fonts from the theme or from Google servers.
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 updatesCustom Logos
To add a custom logo, you should put the logo 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. |
To view details of Editorial theme shortcodes visit this link: Editorial theme shortcodes You can view some examples of shortcodes in the demo page.
Editorial 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.
https://editorial.pmdesign.dev/
You can read extra documentation of Editorial Theme at https://pmoreno-rodriguez.github.io/#/./gravthemes/editorial/index. This is Spanish document site for Editorial Theme