Add class per page via Admin Panel

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?

Use page.header.class. That should work.

Aha! Thanks Flavio!

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?

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

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

Thanks! It works :)

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 :)

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 %}