EduCenter theme questions

Hi all,
I have begun to use the EduCenter theme to make a website for my company.
Somebody has adapted the CSS to my needs, but I do have several unclarities with regards to the working of the theme. I’ll refer to the demo site of EduCenter.

  1. In the overview of trainings, the length of the title of the course is not fixed. (https://themes.gohugo.io/theme/educenter-hugo/course) So in some of my trainings the title is 1 line, in some 2 and in some even 3. I’ve applied the truncate method to limit it to 64 characters, which seems to work out to 2 lines. However, for trainings with a short 1-line title, the box of the training has less height than the others, so doesn’t look nice. Maybe append several &nbsp characters to the title and then truncate to 64?

  2. In a specific training page (https://themes.gohugo.io//theme/educenter-hugo/course/course-3/) there is at the bottom a list of related courses. How does it find these trainings? How can I influence that? Probably related to question 3.

  3. Categories: In EduCenter trainings can seem to have only 1 category: Programming, Photography, Mathematics in the demo. I would like to have multiple categories applied to a training. Is that possible and how?

  4. In the trainings overview page I would like to order the trainings. In fact I have 2 kinds of trainings: available trainings (trainings I can give) and planned trainings (a copy of an available training, planned on a certain date and location).
    At the moment, the trainings seem to be ordered alphabetically on the name. Planned trainings I would like to order according to start date, available trainings on commercial importance for me. Maybe easiest would be to order them on the .md filename. Planned trainings could then be named: 20201213_name.md, available trainings 01_name.md. Or maybe use a priority parameter, or any other suggestions are welkom.

  5. Is it possible not to show elements if there is no value? So for available training I don’t have location and date filled in. For maintenance reasons I think it is best to have 1 course page, but with the location and date labels and values not displayed for the available training. For the planned trainings, they are filled in, and can be displayed.

Many thanks!

Hello,

Your questions are a bit too broad and would require a lot of time to answer in detail. This is not how things work in this forum. Please have a look at the Requesting Help guidelines.

With that said I will point you to the relevant parts of the documentation that you will need to read:

  1. This is really a design question. You can fix the height of each box via CSS (that is outside the scope of support in this forum) or try what you propose and see what happens.
  1. See: Related Content configuration.
  1. See Taxonomies.
  1. See how one can Group Content in Hugo.
  1. Have a look at Hugo’s filtering content functions: where, intersect, union and also make sure that you have read the Introduction to Hugo templates first.

Also you can try asking the theme author directly at the theme’s repo for CSS & JS questions related to the theme as we do not offer support for these here.

Thanks.

1 Like

Hi,

thanks for pointing me in the right direction, I’ll read the docs on these items.
There are quite a lot documents and it’s not always clear what exactly the purpose is or which functionality I can use to achieve certain tasks.

Hi, I’ve investigated point 3 a bit further.
I can make it work perfectly for my projects overview:
{{ range (.Data.Pages.ByDate).Reverse }} <div class="col-lg-4 col-sm-6 mb-5"> {{ .Render "project" }} </div> {{ end }}

However, when I try to apply it to my courses, they always come out alphabetically on title:
{{ range .Data.Pages.ByDate }} {{ if eq .Params.course_type "planned trainings"}} <div class="col-lg-4 col-sm-6 mb-5"> {{ .Render "course" }} </div> {{ end }} {{ end }}

This would do the same as .ByDate?
{{ range (.Pages.ByParam "date") }} {{ if eq .Params.course_type "planned trainings"}} <div class="col-lg-4 col-sm-6 mb-5"> {{ .Render "course" }} </div> {{ end }} {{ end }}

Try .GroupByDate.

Also see: https://gohugo.io/templates/lists/#2-providing-the-alternate-direction

.Pages.ByParam "date" is not the same as .GroupByDate. When you are calling it as above, Hugo renders the Pages that contain the date parameter in the default order and not by date.

Also have a look at: https://gohugo.io/templates/lists/#order-content

And instead of .Data.Pages use the .Site.RegularPages or site.RegularPages variables. Note that in the latter site is a function, as noted here. Also see: https://gohugo.io/variables/site/#site-variables-list