Category: grav

Grav – Multi Language ”; Previous Next Multi-Language is defined as the use of different languages in your website. We will learn different procedures that will help you use multi–languages in your Grav site. Multi – Languages Basics Basically Grav needs a .md file for the representation of any page. When you enable the multi-language support, it will look for a file like default.en.md or default.fr.md.. Language Configuration You must first set up some basic language configuration in your user/config/system.yaml file. file. Language: Supported: – en – Fr By doing this, you have enabled multi–language support in Grav. In the above code, en means English language and fr means French. This means your site will support these two languages. Here the default language is en (English). If you write Fr (French) first, then that becomes your default language. Multiple Language Pages If your default language is set as English, then Grav will look for default.en.md file. If that file is not found, then Grav looks for another language you have set. If both the languages are not found, then it looks for the default.md file. Example default.en.md file — title: Home — # Grav is Running! ## You have installed **Grav** successfully The above code will generate the following output − For French as default language, the default.fr.md file will be − — titre: Accueil — # Grav est en marche! ## Vous avez installé ** ** Grav succès The above code will generate the following output − Active Language via URL If you want to update a URL to your website with a language code, then follow these steps − Example If you want your site to be in English, then type the below line in your browser − http://www.mysite.com/en If you want your site to be in French, then type the below line in your browser − http://www.mysite.com/fr Active Language via Browser Grav has the ability to get the http_accept_language value and compare them to present supported language. If you want this to function, then enable your user/system.yaml file in the language section as − language : http_accept_language : true Language-Based Homepage To have a language based home page, you must enable the following code in your site.yaml file − home: aliases: en: /homepage fr: /page-d-accueil In this way, Grav will find out which language to use from the active languages. The following code will force Grav to redirect you to your default language route. And the include_route option forces to add the language code in your url like http://www.mysite.com/en/home languages: home_redirect: include_lang: true include_route: false Language-Based Twig Templates If your file is default.en.md, then Grav will look for a twig file as default.html.twig. When you need a language–specific twig file, then you must upload it at the root level of the language folder. If your present theme is in templates/default.html.twig you must create a templates/en/ folder and place your English-specific folder in it as: templates/en/default.html.twig Language Switcher Language switcher plugin is available at Grav Package Manager (GPM). Translations via Twig Use twig filter and t() function. Both function similarly. If you have another twig file, then it lets you to translate from an array. Plugin and Theme Language Translations Provide your translations in plugins and themes by creating a languages.yaml file in the root of your theme or plugin (/user/plugins/error/languages.yaml) and must contain all the supported languages. Translation Overrides If you want to override translation, then you must put the value pair in the language file in your the user/languages/ folder. Advanced Environment – Based Language Handling It is possible to route users to the correct version of your site according to URL. If your site url is http://english.yoursite.com, an alias for your standard http://www.yoursite.com, then you can create a configuration as /user/english.yoursite.com/config/system.yaml.. languages: supported: – fr – en It uses inverted language order. In the above code, fr is the default language. If you change the order by keeping en at the top and fr at the bottom, then en becomes the default language. Language Alias Routes It is very difficult to switch between different language versions of the same page, you can use the Page.rawRoute() method on your page object. It gets the same raw route for different language translations of a single page. Put the language code in the front to get a proper route. If you are on page in French with a custom route of − /ma-page-francaise-personnalisee English page has the custom route of − /my-custom-french-page You get the raw page of the French page and that might be − /blog/custom/my-page Then just add the language you want which will be your new URL. /en/blog/custom/my-page Translations Support Grav provides simple mechanism for providing translations in Twig via PHP to be used in themes and plugins. It is enabled by default and uses en language if no specific language is defined. To enable or disable, go to system.yaml file and make the changes. languages: translations: true You can provide translations in many ways and different places. The first place is system/languages folder. Files must be created in en.yaml, fr.yaml, etc. format. Each yaml file must consist an array or nested arrays of key pairs. SITE_NAME: My Blog Site HEADER: MAIN_TEXT: Welcome to my new blog site SUB_TEXT: Check back daily for the latest news Session Based Active Language You can activate session-based storage of the active language. To enable you must have session : enables : true in system.yaml and enable language setting. languages: session_store_active: true Language Switcher Install a language switching plugin from GPM. Setup with language specific domains Have Environment based language handling configuration to assign default languages. Add this option to your system.yaml; it must be set to true. pages.redirect_default_route: true Add the following to your .htaccess file and pick the language slugs and domain names according to your requirements. # http://www.cheat-sheets.org/saved-copy/mod_rewrite_cheat_sheet.pdf # http://www.workingwith.me.uk/articles/scripting/mod_rewrite # handle top level e.g. http://Grav-site.com/de RewriteRule ^en/?$ “http://Grav-site.com” [R = 301, L] RewriteRule ^de/?$ “http://Grav-site.de” [R = 301, L] # handle

Grav – Themes Basics ”; Previous Next Themes control the looks of your Grav site. Themes in Grav are built with the powerful Twig Templating engine. Content Pages and Twig Templates The pages that you create, references a specific template file by name or by setting the template header variable for the page. Using the page name is advised for simpler maintenance. After installing Grav Base package, you will find the defauld.md file in user/pages/01.home folder. The name of the file, i.e., default tells Grav that this page should be rendered with the twig template default.html.twig placed inside the themes/<mytheme>/templates folder. For example, if you have a file called contact.md, it will be rendered with twig template as themes/<mytheme>/templates/contact.html.twig. Theme Organization In the following sections, we will discuss about theme organization, i.e., its definition, configuration and more. Definition and Configuration The information about the theme will be defined in user/themes/antimatter/blueprints.yaml file and form definitions to be used in Administration panel are provided optionally. You will see the following content in user/themes/antimatter/blueprints.yaml file for Antimatter theme. name: Antimatter version: 1.6.0 description: “Antimatter is the default theme included with **Grav**” icon: empire author: name: Team Grav email: [email protected] url: http://getgrav.org homepage: https://github.com/getgrav/grav-theme-antimatter demo: http://demo.getgrav.org/blog-skeleton keywords: antimatter, theme, core, modern, fast, responsive, html5, css3 bugs: https://github.com/getgrav/grav-theme-antimatter/issues license: MIT form: validation: loose fields: dropdown.enabled: type: toggle label: Dropdown in navbar highlight: 1 default: 1 options: 1: Enabled 0: Disabled validate: type: bool In order to use theme configuration options, you need to provide the default settings in a file called user/themes/<mytheme>/<mytheme>.yaml. Example enable: true Theme and Plugins Events The ability of theme to interact with Grav via the plugins architecture is another powerful feature of Grav. To achieve this, simply create user/themes/<mytheme>/<mytheme>.php (for example, antimatter.php for default Antimatter theme) file and use the following format. <?php namespace GravTheme; use GravCommonTheme; class MyTheme extends Theme { public static function getSubscribedEvents() { return [ ”onThemeInitialized” => [”onThemeInitialized”, 0] ]; } public function onThemeInitialized() { if ($this->isAdmin()) { $this->active = false; return; } $this->enable([ ”onTwigSiteVariables” => [”onTwigSiteVariables”, 0] ]); } public function onTwigSiteVariables() { $this->grav[”assets”] ->addCss(”plugin://css/mytheme-core.css”) ->addCss(”plugin://css/mytheme-custom.css”); $this->grav[”assets”] ->add(”jquery”, 101) ->addJs(”theme://js/jquery.myscript.min.js”); } } Templates The structure of Grav theme has no set rules except that there must be associated twig templates in templates/ folder for each and every page types content. Due to this tight coupling between page content and twig template, it”s good to create general themes based on the Skeleton packages available in downloads page. Suppose you want to support modular template in your theme, you have to create modular/ folder and store twig templates files inside it. If you want to support forms, then you should create form/ folder and store form templates in it. Blueprints To define forms for options and configuration for every single template files blueprints/ folder is used. These will not be editable via the Administrator Panel and it is optionally used. The theme is fully functional without blueprints folder. SCSS/LESS/CSS If you want to develop site with SASS or LESS, then you have to create sub-folders in user/themes/<mytheme>/scss/, or less/ if you want LESS along with a css/ folder. For automatically generated files which are compiled from SASS or LESS, the css-compiled/ folder is used. In Antimatter theme, scss variant of SASS is used. Follow these steps to install SASS in your machine. At the root of the theme, type the command given below to execute scss shell script. $ ./scss.sh Type the following command to directly run it. $ scss –sourcemap –watch scss:css-compiled The css-compiled/ will contain all the compiled scss files and css file will be generated inside your theme. Other Folders It is recommended to create separate images/, fonts/ and js/ folders in your user/themes/<mytheme>/ folder for any images, fonts and JavaScript files used in your theme. Theme Example The overall folder structure of the Antimatter theme that we discussed so far is shown below. Print Page Previous Next Advertisements ”;

Grav – Modular Pages ”; Previous Next Modular pages are difficult to understand at first but once you get to know about it, it would be very easy to work with. It enables to create a single page from its child pages. It has the ability to build complex one page layouts from modular content pages. Modular pages are set as non-routable because they cannot be reached directly through an URL. They are identified by _ (underscore) before the folder name. It is a collection of pages that are displayed one above each to get a single page. For example, user/pages/home/_header.. Folder Structure In case of one-page skeleton, you can find this page in the 01.home folder. In this, you get a single modular .md file that tells which pages must be included and the order of the pages to display. modular.html.twig can be found in your present theme folder. In the image below, you can see a folder structure that has been created for modular pages. Every sub-folder must contain a .md file that describes a markdown file. Firstly, you must create sub folders in /users/pages/01.home folder. Next, each folder must contain a .md file and a modular.md file. When you create the sub folder, the image and file both must be in the same folder. How to Create Modular Page To create modular pages, you must follow the given steps. Step 1 − Create a few pages in /user/pages/01.home/. folder. In the image below, you can see we have created two folders along with a modular.md file. Step 2 − To create a modular page, you must create a file in each folder and name it as text.md. Step 3 − Next, add your code in text.md file, save it and run the same. Example Save all the four pages as .md file. Here we have created 4 pages and named as text.md, text1.md, text2.md and text3.md. — title: Bio-diversity — ## Bio-diversity Biodiversity refers to the variety of life. It is seen in the number of species in an [ecosystem](https://simple.wikipedia.org/wiki/Ecosystem) or on the entire [Earth] (https://simple.wikipedia.org/wiki/Earth). Biodiversity gets used as a measure of the health of biological systems, and to see if there is a danger that too many species become[extinct](https://simple.wikipedia.org/wiki/Extinct). Now, create 4 pages, add them to the templatesmodular folder as shown below. Next, go to home page and refresh, you can see the changes. In the new navigation bar, you can see the four file links. Print Page Previous Next Advertisements ”;

Grav – Page Linking ”; Previous Next In this chapter, we will understand how to link pages in Grav. You can link one page to another in a simple way and even remote pages can be linked with page linking. Grav has many responsive linking options. If you have used HTML to link the files before, then it”s very easy to understand page linking in Grav. Given below is a basic example of a Grav site”s Pages directory. We will use the following directory as an example as shown in the image. Given below are a few common components of Grav link. [Linked Content](../path/slug/page) [] − Specifies to write the text or alternate content that is linked. In HTML, we use <a href=””> and </a> to place the content. () − URL is placed in this bracket, which is directly placed after the square bracket. ../ − Indicates a move up by one directory. There are 4 types of links used in the content as listed below − Slug Relative Directory Relative Absolute Remote Slug Relative Internal links are not limited to some names within your file/directory structure. The Slugs can be pulled from both header and fallback directory name, which later helps you to create links easily as there is no need of remembering any specific filename but can remember a relevant slug. The Grav”s templating engine uses names of file to know which template to apply. [link](../dog) The above code fetches you the following result − In the above example, you must move up a directory and load the default page that is located in the pages/01.home/02.nature/item.md directory from pages/01.home/02.dog/item.md. The file, item.md does not have assigned slug, so Grav uses the directory name. Next, you find a similar example, linking from pages/01.home/01.dog/item.md to pages/02.black/01.fish/item.md, but when it loads the item.md file, a slug will be assigned to the file of 01.fish. [link](../../black/fish) The above code gives you the following result − You will now see that the default slug folder name will be replaced with black slug in the header of item.md. Directory Relative Destinations set relative is used to link the current page which can be an image file or any other file as required. The location of the file is as important as that of the destination. If the file is moved while changing the path, the link can be broken. As long as a file remains consistent you can switch easily between a local development server and a live server with different domain name. Links should work without any issues. You will point the link of your file directly by name, instead of its directory or slug. You can create a link from pages/01.home/01.dog/item.md to pages/02.black/01.fish/item.md use the command as shown below. [link](../../02.black/01.fish/item.md) The above code gives you the following result − Both the folders are moved up, as shown by ../../, and then at the bottom two folders, pointing directly to item.md file. Absolute Links It is similar to relative links, based in your /user/pages/ directory in Grav. Further, this can be done with two methods. Slug Relative style Directory Relative style Slug Relative Style You can do it similarly as the slug relative type. It uses the directory name in the path. It eliminates the errors of order and changes later by breaking the link. It changes the number of the folder name at the start that leads in breaking of link. Given below is an example of absolute link, the link opens with /. It specifies that absolute link is made in pages/01.home/01.dog/item.md in the Slug style. [link](/home/nature) The above code gives you the following result − Directory relative style is more consistent when it is used with services like GitHub. They don”t have the benefit of Grav”s flexibility. Below you can see an example of an absolute link made to pages/01.home/01.dog/item.md using Directory Relative style. [link](/01.home/01.dog) Remote Remote links allow you to link directly to any file or document through its URL. There is no need to include your own site”s content. The following example shows you how to link to TutorialsPoint page. [link](http://www.tutorialspoint.com) The above code gives you the following result − You can link directly to any URL, including secured HTTPS links. Print Page Previous Next Advertisements ”;

Grav – Asset Manager ”; Previous Next In this chapter let”s study about Asset Manager. Asset Manager was introduced in Grav 0.9.0 to unify the interface for adding and managing assets like JavaScript and CSS. Adding these assets from themes and plugins will provide advanced capabilities such as ordering and Asset Pipeline. The Asset Pipeline is used to minify and compress the assets so that it reduces the requirements of the browser and also reduces the size of assets. Asset Manager is a class and available to use in Grav through plugin event hooks. You can also use Asset Manager class directly in themes by using Twig calls. Configuration Asset Manager consists of a set of configuration options. The system.yaml file contains the default values; you can override these values in your user/config/system.yaml file. assets: # Configuration for Assets Manager (JS, CSS) css_pipeline: false # The CSS pipeline is the unification of multiple CSS resources into one file css_minify: true # Minify the CSS during pipelining css_rewrite: true # Rewrite any CSS relative URLs during pipelining js_pipeline: false # The JS pipeline is the unification of multiple JS resources into one file js_minify: true # Minify the JS during pipelining Assets in Themes Antimatter theme comes as default theme when you install Grav. It shows an example of how to add CSS files in your base.html.twig file which resides in this theme. {% block stylesheets %} {% do assets.addCss(”theme://css/pure-0.5.0/grids-min.css”, 103) %} {% do assets.addCss(”theme://css-compiled/nucleus.css”,102) %} {% do assets.addCss(”theme://css-compiled/template.css”,101) %} {% do assets.addCss(”theme://css/custom.css”,100) %} {% do assets.addCss(”theme://css/font-awesome.min.css”,100) %} {% do assets.addCss(”theme://css/slidebars.min.css”) %} {% if browser.getBrowser == ”msie” and browser.getVersion == 10 %} {% do assets.addCss(”theme://css/nucleus-ie10.css”) %} {% endif %} {% if browser.getBrowser == ”msie” and browser.getVersion >= 8 and browser.getVersion <= 9 %} {% do assets.addCss(”theme://css/nucleus-ie9.css”) %} {% do assets.addJs(”theme://js/html5shiv-printshiv.min.js”) %} {% endif %} {% endblock %} {{ assets.css() }} The above code is explained briefly below. The region defined in the block twig tag can be replaced or appended to in templates that extend the one and you can see the number of do assets.addCss() calls inside this block. The {% do %} tag allows you to handle variables without any output which is built into Twig itself. The CSS assets can be added to Asset Manager by using addCss() method. You can set priority of the stylesheets by passing a numerical value as second parameter. The call to the addCss() method renders out the HTML tags from CSS assets. The JavaScript assets are used in the same way as the CSS assets. The JavaScript assets within the block twig tags as shown below. {% block javascripts %} {% do assets.addJs(”jquery”,101) %} {% do assets.addJs(”theme://js/modernizr.custom.71422.js”,100) %} {% do assets.addJs(”theme://js/antimatter.js”) %} {% do assets.addJs(”theme://js/slidebars.min.js”) %} {% do assets.addInineJs(”alert(”This is inline!”)”) %} {% endblock %} {{ assets.js() }} Adding Assets Following table lists the different types of add methods − Sr.No. Method & Description 1 add(asset, [options]) Based on the file extension, the add method matches the asset. It is a proper method for calling one of the direct methods for CSS or JS. You can make use of options to set priority. Whether an asset should be included in combination/minify pipeline or not is controlled by the pipeline attribute. 2 addCss(asset, [options]) By using this method, you can add assets to the CSS assets. Based on the priority set in the second parameter, the asset is ordered in the list. If no priority is set, then by default 10 is set. Whether an asset should be included in combination/minify pipeline or not is controlled by the pipeline attribute. 3 addDirCss(directory) By using this method, you can add an entity directory consisting of the CSS assets which will be arranged in alphabetical order. 4 addInlineCss(css, [options]) You can provide a string of CSS inside inline style tag by using this method. 5 addJs(asset, [options]) By using this method, you can add assets to the JS assets. If priority is not set, then it sets the default priority to 10. The pipeline attribute determines whether an asset should be included in the combination/minify pipeline or not. 6 addInlineJs(javascript, [options]) This method allows you to add a string of JS inside the inline script tag. 7 addDirJs(directory) By using this method, you can add an entity directory consisting of the JS assets, which will be arranged in alphabetical order. 8 registerCollection(name, array) This method allows you to register an array consisting of CSS or JS assets with a name so that it can be used later by using the add() method. If you are using multiple themes or plugins, then this method is very useful. Options There are many options to pass the array of assets which are explained as shown below − For CSS priority − It takes an integer value and the default value will be 100. pipeline − When an asset is not included in pipeline, it sets to false value. And the default value is set to true. For JS priority − Takes integer value and default value will be 100. pipeline − When an asset is not included in pipeline, false is set. And the default value is set to true. loading − This option supports 3 values such as empty, async and defer. group − It consists of a string that specifies unique name for a group. And the default value is set to true. Example {% do assets.addJs(”theme://js/example.js”, {”priority”:101, ”pipeline”:true, ”loading”:”async”, ”group”:”top”}) %} Rendering Assets The current state of the CSS and JS assets can be rendered by using the following − css() Based on all the CSS assets which have been added to Asset Manager, the css() method renders a list consisting of HTML CSS link tags. Based on the pipeline attribute, the list can contain minified file and individual/combined asset. js() Based on all the JS assets which have been to Asset Manager, the js() method renders a list consisting of the HTML JS link tags. Based on the pipeline attribute,

Grav – Media ”; Previous Next Media files contain different types of display content such as images, videos, and many other files. Grav finds and processes these files automatically to be used by any page. By using the built in functionality of the page, you can access metadata and modify the media dynamically. Smart-caching is used by Grav that creates in-cache generated media when necessary. This way all can use the cached version instead of generating media again and again. Supported Media Files Following are the media file types that are supported by Grav − Image − jpg, jpeg, png Animated Image − gif vectorized Image − svg Video − mp4, mov, m4v, swf Data/information − txt, doc, pdf, html, zip, gz Display Modes Following are a few types of display modes in Grav − Source − It is the visual display of the image, video or a file. text − Textual presentation of media files. thumbnail − Thumbnail image for the media file. Locating Thumbnails You can locate the thumbnails using three locations − In the same folder where your media files exists − [media-name].[media-extension].thumb.[thumb-extension]; here, media-name and media-extension are name and extension of the actual media file and thumb-extension is extension that is supported by the image media type. User Folder − user/images/media/thumb-[media-extension].png; here, media-extension is extension of the actual media file. System folder − system/images/media/thumb-[media-extension].png; here, media-extension is the extension of the actual media file. Lightboxes and Links Grav gives an output of an anchor tag that contains some of the elements for the lightbox plugin to read. If you want to use a lightbox library which is not included in your plugins, then you can use the following attributes to create your own plugin. rel − Indicates the lightbox link. The value is lightbox. href − It is a URL to the media object. data-width − Set the width of the lightbox chosen by the user. data-height − Set the height of the lightbox chosen by the user. data-srcset − srcset string is used in case of image media. Actions Builder pattern in Grav is used to handle media, to perform multiple actions. There are some kinds of actions which are supported for all medium while there are some that are available only for specific medium. General There are 6 types of general actions that are available for the media types. Each action is explained below. Sr.No. Action & Description 1 url() url() gives back raw url path to media. 2 html([title][, alt][, classes] The output will have a valid html Tag for media. 3 display(mode) It is used to switch between different display modes. When you switch to display mode, all the actions will be reset. 4 link() Actions applied before link will apply to the target of the link. 5 lightbox([width, height]) Lightbox is similar to link action but has a little difference that it creates a link with some extra attributes. 6 Thumbnail Select in between page and default for any type of media file and this can be done manually. Actions on Images The following table lists out a few actions that are applied on images. Sr.No. Action & Description 1 resize(width, height, [background]) Changes the width and height of the image by resizing. 2 forceResize(width, height) Stretches the image as required irrespect of original ratio. 3 cropResize(width, height) Resizes the image to smaller or larger size according to its width and height. 4 crop(x, y, width, height) Crops the image as described by width and height from the x and y location. 5 cropZoom(width, height) Helps zoom and crop the images as per the request. 6 quality(value) Sets value for the image quality between 0 and 100. 7 negate() Colours get inverted in negation. 8 brightness(value) With a value of -255 to +255, brightness filter is added to the image. 9 contrast(value) The value from -100 to +100 is used to apply the contrast filter to the image. 10 grayscale() he grayscale filter is used to process the image. 11 emboss() The embossing filter is also used to process the image. 12 smooth(value) The smoothing filter is applied to the images by setting the value from -10 to +10. 13 sharp() The sharpening filter is added on the image. 14 edge() The edge finding filter is added on the image. 15 colorize(red, green, blue) Colorizes the image by adjusting red, green and blue colours. 16 sepia() The sepia filter is added to give a vintage look. Animation and Vectorizing images and videos Animated and vectorized actions are done on images and videos. Following is the action that takes place on images and videos. Sr.No. Action & Description 1 resize(width, height) The resize action will set width, height, data-width and data-height attributes. Combinations Grav has image manipulation functionality that makes it easy to work with images.  The above code will generate an output as shown below − Responsive images Following table lists out a few types of responsive images. Sr.No. Action & Description 1 Higher density displays Add a suffix to the filename and u can add higher density image to the page. 2 Sizes with media queries Add a suffix to the filename and u can add higher density image to the page. Metafiles image1.jpg, archive.zip or any other reference has the ability to set variables or can be overridden by a metafile. These files then take the format of <filename>.meta.yaml. For example, if you have an image as image2.jpg, then your metafile can be created as image2.jpg.meta.yaml. The content must be in yaml syntax. You can add any files or metadata you like using this method. Print Page Previous Next Advertisements ”;

Grav – Installation ”; Previous Next In this chapter, we will understand the installation of Grav. We will discuss the software requirements for Grav and also how to download it. Software Requirements for Grav Let us now understand the software requirements for Grav. Web Server WAMP (Windows) LAMP (Linux) XAMP (Multi-platform) MAMP (Macintosh) Nginx Microsoft IIS Operating System − Cross-platform Browser Support − IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera PHP Compatibility − PHP 5.4 or higher Text Editors Sublime Text (Mac / Windows/ Linux) Atom (Mac / Windows) Notepad ++ (Windows) Bluefish (Mac / Windows/ Linux) Download Grav Click on this link https://getgrav.org/downloads and follow the steps as shown in the screenshot given below to download Grav. Unzip the downloaded Grav file into your web server. Setup Wizard Installation of Grav is a very simple process. Follow the steps given below for Grav setup. Download the zip file and extract it to your web server or local host. Rename the folder from its current name that you want to use to refer to your site. Open your browser and navigate to localhost/<your_folder_name>, you will be redirected to a screen which shows you have installed Grav successfully as in the following screenshot. Grav comes with a sample page that helps you get started. In the above screenshot, you can see the home link which has displayed a sample page. Print Page Previous Next Advertisements ”;

Grav – Image Linking ”; Previous Next In this chapter, we will understand image linking in Grav. Grav allows you to link images from one page to another and even to remote pages. If you have linked the files using HTML, that would be very easy to understand image linking in Grav. Using this structure, we will see how to display media files in the page using different types of links. Every folder under this structure contains images and there is a special directory under /02.green/img01 which acts as a page but contains only media files. Let”s look into some of the common elements of Grav markdown-based image tag.  ! − It indicates an image tag when you place it at the beginning of markdown link tag. [] − It specifies optional alt-text for the image. () − It is placed directly after the square bracket which contains file path. ../ − It indicates a move up a directory. Grav uses five types of image links as listed below − Slug Relative Directory Relative Absolute Remote Media Actions on Images Slug Relative It sets relative image links to the current page and links another file in the same directory. While using relative links, the location of the source file is as important as that of the destination. If you change the path in the file while moving, then the link can be broken. The advantage of using this image linking structure is that you can switch between local development server and a live server with a different domain name, as long as the file structure stays constant. Example  Here ../ indicates that your link moves up one folder and then down one folder and img.jpg is the destination. When you use the above path, you will receive the following output − Grav supports slugs in the header of the page”s primary markdown file and this slug takes the place of the folder name for the given page. If 01.sky folder has a slug set through its .md file, i.e., /pages/01.blue/01.sky/text.md, then the header of the file would be as − — title: Sky slug: test-slug taxonomy: category: blog — In the above code, we have set the slug test-slug which is an optional. Once you set the slug, you can then link to the media file which will have Slug Relative or Absolute URL set for the link. Directory Relative In this type of link, you can set directory relative image links to the current page. Instead of using the URL slugs, you can reference through the full path with their folder names in directory relative image links. Example  When you use the above path, it will display the output as shown below − Absolute Absolute links are same as relative links but the only difference is that they are relative to the root of the site and present in the /user/pages/ directory. You can use absolute links in two different ways − You can use Slug Relative style that includes slug or directory names in the path and commonly used in absolute linking. You can use Absolute Link which opens the link with a/.  When you use the above path, you will receive the following output − Remote Remote image links allow displaying any media file directly through its URL. These links do not include your own site”s content. The following example shows how to display image using remote URL −  When you click on the link as shown in the image below, it will display the image from the given URL. Media Actions on Images Images associated with pages enable us to use the advantage of Grav”s media actions. You can display some media files like images, videos and other files when creating content in Grav. Example You can load an image by using the format given below −  When you use the above path, you will receive an output as shown below − Print Page Previous Next Advertisements ”;

Grav Tutorial PDF Version Quick Guide Resources Job Search Discussion Grav is a flat-file based content management system which doesn”t use database to store the content instead it uses text file (.txt) or markdown (.md) file to store the content. The flat-file part specifically refers to the readable text and it handles the content in an easy way which can be simple for a developer. Audience This tutorial has been prepared for anyone who has a basic knowledge of Markdown and has an urge to develop websites. After completing this tutorial, you will find yourself at a moderate level of expertise in developing websites using Grav. Prerequisites Before you start proceeding with this tutorial, we assume that you are already aware about the basics of Markdown. If you are not well aware of these concepts, then we will suggest you to go through our short tutorials on Markdown. Print Page Previous Next Advertisements ”;