Make HTML template for post-lists

[aleksati]

This is just an idea I experimented with locally and I think it looks quite good. Since the title get highlighted when you hover over it, there is no need for an extra "Read More". Maybe we can try this and see what people thin, @stefanofasciani?

It should just be a very quick fix in the home.html file, and to all the category pages if we want to remove the "Read More" label.

[stefanofasciani]

To remove the "Read More" the following

    <a href="{{ post.url | relative_url }}">
      Read more
    </a>

har to be removed from home.html, but also from all individual pages including post lists such as music-cognition.md, portal.md, projects.md, alltopics.md, machine-learning.md ....

I think the Read more looks good and it is quite a standard in blogs. It does not look good when the "excerpt" is too short (and this happens quite often).

[aleksati]

Yeah, I can see now.. What about having the title above date, author and category? Any thoughts @stefanofasciani ? This would just involve moving the

<h3 align="left"> <a class="post-link" href="{{ post.url | relative_url }}"> {{ post.title | escape }} </a>

section above the tags in home.html and in all the category markdown files you mentioned.

[stefanofasciani]

yes it is just a matter of moving things around. But it has to be done consistently in many pages (there should be a smarter way to do that, such as including a single file).

Stefano

On Fri, Jul 10, 2020 at 12:32 PM Aleksander Tidemann < notifications@github.com> wrote:

Yeah, I can see now.. What about having the title above date, author and category? Any thoughts @stefanofasciani https://github.com/stefanofasciani ? This would just involve moving the

{{ post.title | escape }} section above the tags in home.html and all the category markdown files you mentioned. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub , or unsubscribe .

[aleksati]

Yes, probably best to make a HTML template for this, and include that template in every file where it's needed. I will rename this issue to deal with that specific issue.

[aleksati]

For reference; the template will specifically deal with how posts are displayed on the main page and in category pages. So only these sections:

[aleksati]

The issue with making one template is that a template like this must reference different site.category names depending on which markdown file its included in. So for instance, when adding this HTML template in "digital-audio.md" it must understand that it should look for posts in site.category.digital-audio.

Maybe there is a way to make the included HTML template read its parent markdown filename? That might be the easiest workaround.

[stefanofasciani]

I tried to modify the code to read the "category" to be displayed from a local variable specified in the file.md but it did not work. However, that should not be a problem. If you take portal.md (for example) the code between lines 15 and 35 (included) is identical to all other topic pages. Therefore we can think to have portal.md as it follow:

---
layout: page
title: Portal
permalink: /portal/
---

The blog posts of this section relate to the courses [**MCT4021 Physical-Virtual Communication and Music 1**](https://www.uio.no/studier/emner/hf/imv/MCT4021), [**MCT4021 Physical-Virtual Communication and Music 2**](https://www.ntnu.edu/studies/courses/MCT4022), and [**MCT4021 Physical-Virtual Communication and Music 3**](https://www.uio.no/studier/emner/hf/imv/MCT4023) . The aim of this course is to learn to operate and maintain the Portal, the audio-visual communication platform connecting the two campuses in Trondheim and Oslo. The Portal constitutes a laboratory for network based collaboration and communication. The courses also aims knowledge transfer and at exploring explore the Portal, to improve and further develop communication technologies for the Portal for musical communication.

<br />

{%- if site.posts.size > 0 -%}
  <!-- <h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2> -->
  <ul class="post-list">

## HERE INCLUDE SOMETHING TO IMPORT THE REST OF THE LIQUID CODE

  </ul>
  {%- endif -%}

And then in a separate file, the code to be imported, which is the following

    <li>
      {%- if post.image -%}
      <img src="{{ post.image | prepend: site.baseurl }}" alt="{{ post.title }}" title="{{ post.title }}">
      {%- endif -%}
      {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
      <span class="post-meta">{{ post.date | date: date_format }}</span>
      <span class="post-meta">• {{ post.author }}</span>
      <h3 align="left">
        <a class="post-link" href="{{ post.url | relative_url }}">
          {{ post.title | escape }}
        </a>
      </h3>
      {%- if site.show_excerpts -%}
        {{ post.excerpt }}
      {%- endif -%}
      <h4>
      <a href="{{ post.url | relative_url }}">
        Read more
      </a>
      </h4>
    </li>

[stefanofasciani]

added file _includes/list-body.html, which is included in all pages including list of posts using the code {%- include list-body.html -%}