Change default capitalization of project categories

[pedrohbraga]

Hi, the current mode of project categories case setting is set to capitalization, by default.

It is important for me to have control over the case of categories, i.e. biological species names must always be capitalized and in italic (e.g., Pseudacris triseriata); some acronyms may begin with a lowercase letter (e.g., eDNA), may be entirely in capital letters (e.g., SDM) or may be mixed (e.g., LeaDA).

To prevent the capitalization of category names, I attempted to add text-transform: none to the .portfolio-menu tag within custom.scss or _portfolio.scss(as seen below), but I had no success.

.portfolio-work {
    padding: 80px 0;

    .block {
        .portfolio-menu {
            text-align: center;
            text-transform: none !important;

            .btn-group {
                margin-bottom: 40px;

                label {
                    display: inline-block;
                    border: 1px solid $border-color;
                    padding: 8px 25px;
                    cursor: pointer;
                    font-size: 15px;
                    color: #333333;
                    outline: 0;
                    background: $light;
                    margin: 2px;
                    border-radius: 0;
                    @include transition (all, 0.3s, ease);
                }
            }
        }
    }
}

Nevertheless, if I set text-transform to lowercase or to uppercase it works well. It is not clear to me why none will not work. Moving text-transform: none between tags or adding !important to it will not achieve the result I am looking for.

Would you have any recommendations for this to work here?

[salim-b]

In the current version of the theme (master branch), the categories are displayed as-is, i.e. as defined in content front matter's categories key.

Note that you should ensure upper-/lowercase spelling consistency, otherwise the first spelling variant will be used when enumerating taxonomies internally.

Also note that you must re-start hugo server after changing spelling variants in content front matter's categories key in order for the changes to take effect.

[pedrohbraga]

Thank you for your response, @salim-b!

I confirm that the theme files of the master branch were up-to-date in our current version of the theme within our website repository.

The alternative that I resorted to making this work was to remove humanize from the btn btn-sm btn-primary label class within the layouts/project/list.html file, as seen below:

{{ define "main" }}

{{ partial "page-title.html" . }}

{{ $data := index site.Data site.Language.Lang }}

<!-- Portfolio Start -->
<section class="portfolio-work">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="block">
          <div class="portfolio-menu">
            <div class="btn-group btn-group-toggle justify-content-center" data-toggle="buttons">
              <label class="btn btn-sm btn-primary active">
                <input type="radio" name="shuffle-filter" value="all" checked="checked">{{ i18n "all" }}
              </label>
              {{ $categories := slice -}}
              {{ range .Data.Pages -}}
              {{ $categories = $categories | append .Params.Category -}}
              {{ end -}}
              {{ range ( $categories | uniq ) -}}
              <label class="btn btn-sm btn-primary">
                <input type="radio" name="shuffle-filter" value="{{ . | urlize }}">{{ . |  }}
              </label>
              {{- end }}
            </div>
          </div>
          <div class="row shuffle-wrapper">
            {{ range .Data.Pages -}}
            {{ $cats := .Params.category -}}
            {{ if not (reflect.IsSlice $cats) }}{{ $cats = slice ($cats) }}{{ end -}}
            {{ $cats = apply $cats "urlize" "." | jsonify -}}
            <div class="col-md-4 portfolio-item shuffle-item" data-groups="{{ $cats }}">
              {{ if isset .Params "image" -}}
              <img src="{{ .Params.image | relURL }}" alt="{{ .Title }}">
              {{- end }}
              <div class="portfolio-hover">
                <div class="portfolio-content">
                  {{ with .Params.image -}}
                  <a href="{{ . | relURL }}" class="portfolio-popup"><i class="icon ion-search"></i></a>
                  {{- end }}
                  <a class="h3" href="{{ .RelPermalink }}">{{ .Title }}</a>
                  <p>{{ .Params.description }}</p>
                </div>
              </div>
            </div>
            {{- end }}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{{ end }}

For reference, line 24 was originally: <input type="radio" name="shuffle-filter" value="{{ . | urlize }}">{{ . | humanize }}.

I have a very superficial knowledge in HUGO, but if I understood humanize well, this is unlikely to cause issues other than allowing me to preserve taxonomy names.

Here is the result of this change:

[salim-b]

Aah, sorry, my fault – I didn't realize that you were talking about project, not blog post categories. You're absolutely right. I've incorporated your change, see #181.