Quarks "text.md" has useless "image_align:" page header/frontmatter


#1

…and this one finds its match in “text.html.twig” and works, at least that way, that it gives the class “align-left”/“align-right”, depending what you set in the frontmatter, to the img-tag. But this class does not work. It seems to be not defined anywhere. You get the class set to the img-tag, but no value for the class is found. That means that the feature with the frontmatter-switch for the image to be put to the right or left does not work, although it seems to be a good feature. Unfortunateley, this is my first try to use Grav, and it was one of the first things I tried to use, and now I can’t get it to work. I was curious how the classes “align-left/align-right” were set up, because the image in these modular pages does not react in any way to float. I will never get it to the left side. I am sure this can’t be a bug, I am doing something wrong, I am misunderstanding the underlying concept. You can find this in the Grav One Page Demo in the “_callout” part with the Jeep-Image for example. Can anyone explain to me what happens here.

Thank you very much in advance


#2

Hi Belmondo

I have had the same problem some weeks ago and I can’t believe that the one page demo is based on the current version of quark.
The code in “text.html.twig” creates html with two div sections. The first one with the image and the second one with the content.
If you look at the source code of the one page demo it is just the other way around (at least the interesting part of the html with the Jeep-Image).
Therefore it looks like a bug to me.
If I’m wrong and this is actually not a bug, I would be grateful for appropriate advice.

In the meantime I modified some files of the quark theme to get this working

text.html.twig:

{% set grid_size = theme_var('grid-size') %}
{% set image = page.media.images|first %}

<section id="modular-text" class="section {{ page.header.class}} bg-gray">
    <section class="container {{ grid_size }}">
        <div class="columns">
            {% if image %}
                {% if page.header.image_float %}
                <div class="column col-12 col-md-12">
                    {{ image.cropResize(300,300).html('','','align-float-'~page.header.image_align) }}
                    {{ content }}
                </div>
                {% else %}
                    {% if page.header.image_align is same as ('left') %}
                        <div class="column col-6 col-md-12">
                            {{ image.html('','','align-left') }}
                        </div>
                        <div class="column col-6 col-md-12">
                            {{ content }}
                        </div> 
                    {% else %}
                        <div class="column col-6 col-md-12">
                            {{ content }}
                        </div> 
                        <div class="column col-6 col-md-12">
                            {{ image.html('','','align-right') }}
                        </div>
                    {% endif %}
                {% endif %}
            {% else %}    
                <div class="column col-12 col-md-12">
                        {{ content }}
                </div> 
            {% endif %}
        </div>
    </section>
</section>

text.yaml:

title: Text
'@extends': default

form:
  fields:
    tabs:
      fields:
        content:
          fields:
            header.media_order:
              label: Page Media (first one will be displayed next to your content)
            header.image_align:
              type: select
              label: Image position
              classes: fancy
              default: left
              options:
                'left': 'Left'
                'right': 'Right'
            header.image_float:
              type: toggle
              toggleable: false
              label: Floating image
              options:
                1: Yes
                0: No
              validate:
                type: bool

At the end of _onepage.scss:

...
#modular-text {
  padding-top: 4rem;
  padding-bottom: 4rem;
  
  .align-float-left {
    float: left;
    margin-right: 2rem;
  } 

  .align-float-right {
    float: right;
    margin-left: 2rem;
  }

  .align-left {
    float: none;
  } 

  .align-right {
    float: none;
  }

  img{
    padding-top: 4rem;
    padding-bottom: 2rem;
  }
}

Additionally to “image-align” you can use “image-float:” with “true” or “false” in the page header/frontmatter.