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

Support Themes & Styling
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.

3

Hi pmo,

I don’t see the difference in the “text.html.twig” in the “One Page Demo” and the current version of quark. They seem to use the same file. But obviously it’s possible to modify these twig-files to work another way. What I am interested in is this “image left/right switch” that the frontmatter value “image-align” should be. This is what the quark ReadMe says about it:

Text Modular Options

The text box provides a single option to control if any image found in the page folder should be left or right aligned:

image_align: right

This simply does not say anything about the way this should work. You can see, that the entry left/right seems to work, as it changes the class “align-left/align-right”. This class is put to the image tag then. But nothing happens with it. Maybe this is a feature that worked somewhere in the history of the quark theme or was taken over from the antimatter theme and doesn’t work now, I don’t know. It’s just the thing I was looking for at the moment anyway.
I do it in my custom.css like this now:

div#easy_content + .section#modular-text .columns {
flex-direction: row-reverse;
}

(with “div#easy_content” from the example of “One Page Demo”, any other page name for us) Any “float” floats the image left or right, what does not make any visible effect, because it is in it’s flexbox, which stays aligned to the right. You can change the output in the twig-files to give the image first, but than you have to use different templates just to align an image. I don’t want to change templates anyway, I would like to follow the idea of the easy left/right option to control any module of a modular page.
What you do in your example is building the switch new up from the ground. I hope this won’t be necessary, it should be there already.

The very best would be some “older” Grav-user can explain to us the sense of the image classes “align-left/align-right” generated from the yaml frontmatter “image_align” as contained in the Quark-README documentation.

Thanks for your help, best regards