Add class per page via Admin Panel

Archive
1

Hey everyone,
I’m new to Grav and just ran into something. On the blog-index page I need to give every blogpost a different look. At the moment I have 5 different looks. What I hoped to do is to add a variable class to the frontmatter of the blogposts’ pages and that I could use this like this:

<div class="blog-item {{ page.class }}">
  <a href="{{ page.url }}">
    {{ page.media.images|first.cropZoom(640,430).html }}
    <h4>
      {{ page.title }}
    </h4>
    {{ page.vorm }}
  </a>
</div>

Also, I hoped that adding a class variable to the frontmatter, would cause an input field in the Admin panel, so that my client can change the classes per page.

I did not manage to make this work. Is there another way to make this work?

2

Use page.header.class. That should work.

3

Aha! Thanks Flavio!

4

Yep, it worked! Another question about this issue; how can I make sure the class is editable from the Admin Panel? I don’t see an input for this. Can I add it in someway to the Admin Panel, so that my client can edit the classes herself?

5

You can edit the blueprint themes/yourtheme/blueprints/item.yaml

See: https://learn.getgrav.org/forms/blueprints/example-page-blueprint

6

Thanks! It works :slight_smile:

Follow up question: I created a fully custom form in the Admin using the blueprints. Everything works really easy, but there is one thing I can’t get right. I have added a file upload to the form and now I try to call it in my template.

This is how I added the file upload in my blueprint:

fields:
  header.company_photo:
    type: file
    label: Photo
    destination: self@
    multiple: false
    filesize: 5
    accept:
      - 'image/*'

Now I try to call it in my template like this:
{{ page.header.company_photo.cropZoom(300, 397) }}

What am i doing wrong?

Thanks a lot by the way for all your help :slight_smile:

7

Use page.media. See: https://learn.getgrav.org/content/media

This should work:

{% for company_photo in page.header.company_photo %}
   {% set image = company_photo %}
   {{ page.media[image.name].cropResize(300, 397).html() }}
 {% endfor %}