Allow images as well as icons in features

[mrichar1]

At present you can set an icon for a feature (using font-awesome) by setting:

feature:
  - header: Test
  - text: Testing 123
  - icon: box

Would it be possible to add image/thumbnail support as well?

I've looked at the twig for features and I think it would be pretty simple, changing it to something like:

{% if feature.icon %}
  <div class="feature-icon">
    <i class="fa fa-fw {{ feature.icon }}"></i>
{% elseif feature.image %}
  <div class="feature-image">
    <img src="{{ feature.image }}" />
{% endif %}

https://github.com/getgrav/grav-theme-quark/blob/develop/templates/modular/features.html.twig#L13

The only bit I'm not sure about is the styling - the icon is styled as text, but I'm not sure the best way in grav to ensure the images are scaled/sized appropriately.

[nickehrlich]

Adding a +1 to this request.

[mikeleord]

Adding a +1

[marionbouder]

I have a solution to add an image, I imagine is simple to accordind the icon and image. I will test from the modifications below. @mrichar1 have you found a suitable solution ?

1. I modify the features.html.twig file and replace :

   <div class="feature-icon">
   <i class="fa fa-fw {{ feature.icon }}"></i>
   {% if feature.header %}
   <h6>{{ feature.header }}</h6>
   {% endif %}
   </div>

   by

   {% if feature.image %}
   <div class="feature-image">
   <img src="{{ page.media[feature.image].url }}" alt="">
   {% if feature.header %}
   <h4>{{ feature.header }}</h4>
   {% endif %}
   </div>
   {% endif %}

2. I modify the features.yaml file (blueprints) and replace (at the end of the file) :

   fields:
   .icon:
     type: iconpicker
     label: Icon

   by

   fields:
   .image:
     type: filepicker
     label: Image
     preview_images: true

3. I customize my CSS

I hope this can help you ;)

An example of my tests

[marionbouder]

I tested the icons on the images and it works very well.

1. My feature.html.twig file

{% set grid_size = theme_var('grid-size') %}
{% set columns = page.header.class == 'small' ? 'col-3 col-md-4 col-sm-6' : 'col-4 col-md-6 col-sm-12'  %}
<section class="section modular-features {{ page.header.class}}">
        <section class="container {{ grid_size }}">
            <div class="frame-box">

                {{ content|raw }}

                <div class="columns">
                {% for feature in page.header.features %}
                   <div class="column {{ columns }}">

                      {% if feature.image %}
                        <div class="feature-image">
                          <img src="{{ page.media[feature.image].url }}" alt="">

                          <div class="feature-icon">
                             <i class="fa fa-fw {{ feature.icon }}"></i>
                             {% if feature.header %}
                                <h4>{{ feature.header }}</h4>
                             {% endif %}
                          </div>

                        </div>
                      {% endif %}

                      <div class="feature-content">
                        {% if feature.text %}
                        {{ feature.text }}
                        {% endif %}
                      </div>

                    </div>
                {% endfor %}
                </div>
            </div>
        </section>
</section>

2. My features.yaml file, just change the end

fields:
                .icon:
                  type: iconpicker
                  label: Icon
                .image:
                  type: filepicker
                  label: Image
                  preview_images: true
                .header:
                  type: text
                  label: Header
                .text:
                  type: text
                  label: Description

The result of my test