Modify class name based on markdown data (or similar way to conditionally modify background)

support
1

Repository: GitHub - kevinblumenfeld/SugarTime at staging
Specific file: SugarTime/list.html at staging · kevinblumenfeld/SugarTime · GitHub

Hi,

I would like to modify the background color based on when:

  • PRODUCE is FRUIT
  • PRODUCE is VEGETABLE

For example:

image
image1415×630 32.7 KB

I am ranging over .Pages (code block below) and I believe the background color is set at this div <div class="site-project-item-content">.

<section class="site-project" id="project" style="padding-top: 180px;">
    <div class="container">
        <div class="row">
            {{ range $p := .Pages }}
            <div class="col-lg-6 col-md-10 mx-auto">
                <div class="site-project-item">
                    <div class="site-project-item-content">
                        <h3>{{ .Type }}</h3>
                        <span>{{ delimit .Params.category ", " }}</span>
                        <a href="{{ .Permalink }}" class="read-more">book now</a>
                    </div>
                    <div class="site-project-item-thumb">
                        {{ with .Site.Data.pricelist }}
                        <ul class="leaders">
                            {{ range index . $p.Title }}
                            <li>
                                <span>{{ .service }}</span>
                                <span>{{ .price }}</span>
                            </li>
                            {{ end }}
                        </ul>
                        {{ end }}
                    </div>
                </div>
            </div>
            {{ end }}
        </div>
</section>

Is this possible (or something similar to accomplish the same thing) with Hugo?

Thank you for your time,

Kevin

2

This seems to be doing the trick (below code block). However, how would I add another string to my .md files so I can use a string as opposed to a collection (using in)?

I tried using description as I read here: Page Variables | Hugo but that does not seem to work

<div class="col-lg-6 col-md-10 mx-auto">
<div class="site-project-item">
    {{ if in .Params.category "VEGETABLE"}}
    <div class="site-project-item-content">
        <h3>{{ .Type }}</h3>
        <span>{{ delimit .Params.category ", " }}</span>
        <a href="{{ .Permalink }}" class="read-more">book now</a>
    </div>
    {{end}}
    {{ if in .Params.category "FRUIT"}}
    <div class="site-project-item-content" style="background-color:#add6d2;">
        <h3>{{ .Type }}</h3>
        <span>{{ delimit .Params.category ", " }}</span>
        <a href="{{ .Permalink }}" class="read-more">book now</a>
    </div>
    {{end}}