Home page grid elements

The home page of the micro website has been designed to fit a grid where many content blocks can be arranged in a variety of ways, shown or hid based on project's needs.

Grid blocks arrangement

To change the arrangement of the grid blocks please do the following:

• open the index.html file in the root folder of the micro website
• if you want to remove a block, delete the include tag you want to hide, example: {% include license.html %}
  • note that if there is only one include tag inside a div then you should delete the entire div, please don't leave divs empty, like for instance DON'T DO

<div class="row">
</div>

• if you want to move a block, cut the include tag you want to move and paste it to a different order in the same div or to a different or new div
  • note that all divs must have the row class, as in <div class="row">
  • also note that you can add the no-border class if you want the div to NOT show the bottom border, as in <div class="row no-border">

IMPORTANT INFO The rows of the grid are implemented in such a way so that the content will always try to fit the maximum width, so we suggest:

• to maintain a good visual layout please always allow two (and max two) include tags in each div (with the exception of the {% include tutorials.html %}, {% include news.html %}, {% include topics.html %} that will need to be the only tag in a div)
• if you want to remove a whole line of the grid please delete the entire div you want to hide, for instance if you want to remove the first row please delete all of the following:

<div class="row">
  {% include slick_slider.html %}
  {% include release_notes.html %}
</div>

Available grid blocks are

• {% include slick_slider.html %}, an image slider
• {% include video.html %}, a video embed
• {% include release_notes.html %}, a text block to highlight current project release features
• {% include tutorials.html %}, a block of columns with pics and text that link to tutorials
• {% include news.html %}, a block featuring the pic, title, subtitle and link to the latest three blog posts
• {% include contribute.html %}, a text block with instructions on how to contribute to the project
• {% include license.html %}, a text block with info about the open source license
• {% include credits.html %}, a text block with info about the maintainers of the project and how to reach them

Add or edit content of the blocks

All of the content of the blocks can be found in the lang.yml file, inside the /_data/ folder, inside the respective language folders, /en/ /it/ etc...

For details about how to edit or add the content please refer to the following page: How to translate text that is not page or post content

IMPORTANT: all the content of the blocks can be translated to another language, please don't forget to translate it if you are supporting more laguages

Add/Change slider pictures

Since the slider pictures will very probably not change depending on the site language, they can't be found in the lang.yml file

If you want to add or change the slider pictures please do the following:

• open the slick_slider.html file inside the /_includes/ folder in the root folder of the website
• change the image URL inside the image tag <img src="https://farm5.staticflickr.com/4211/34767438573_c6c73445d7_z_d.jpg">
• or duplicate the image tag if you want to add a new one

Notes:

• add as many pictures as you wish to the slider, just be aware that max 12/13 indicator dots will be shown below the slider
• it is not mandatory but preferable to always include the image slider in a div with another include
• you could always link to internal or external images, for instance either of these would work

    <img src="https://farm5.staticflickr.com/4217/35189199200_654c462308_z_d.jpg">
    <img src="{{ site.baseurl }}/assets/images/usertest_procedura.jpg">
    <img src="http://opencarecc.github.io/MicroWebsiteTemplate/assets/images/usertest_procedura.jpg">

Add/Change video

A video might be dubbed in different languages so you would be able to change its URL in the lang.yml file

To change its URL please to the following:

• open the lang.yml in the language folder of your interest
• find the # dictionary keys for video.html include file string and edit the URL accordingly

video:
  title: "video english title"
  url: "https://www.youtube.com/embed/bARoyq8Tnto"

Please note that if you are showing the same video for all languages you need to copy the URL in all of the lang.yml files

Add/Change tutorials pictures and links

You can edit or add the tutorials pictures and links directly in the lang.yml files:

• please find the # dictionary keys for tutorials.html include file string and edit the following to your wishes
• please keep the indentation structure of the following code snippet intact to support the division in columns, (where any of the data structures following to a - sign represents the content of one column)

tutorials:
  tutorial_column:
    - title: "Tutorial 1"
      description: "This is a brief description of Tutorial 1"
      link: "http://www.google.com"
      img_url: "https://opencarecc.github.io/MicroWebsiteTemplate/assets/adesivo.jpg"
    - title: "Tutorial 2"
      description: "This is a brief description of Tutorial 2"
      link: "http://www.google.com"
      img_url: "https://opencarecc.github.io/MicroWebsiteTemplate/assets/adesivo.jpg"
    - title: "Tutorial 3"
      description: "This is a brief description of Tutorial 3"
      link: "http://www.google.com"
      img_url: "https://opencarecc.github.io/MicroWebsiteTemplate/assets/adesivo.jpg"