Text-align : right

Kirby 3 Solved ✅
1

Hi there,
I’m sorry if I’m asking a stupid question but : is there any simple way to allow users to align their text right from the admin panel ?

Thanks !

2

What exactly do you want to achieve? Align text within the Panel? Or have a setting to be able to align text in the frontend?

3

Being able to align text right in front-end indeed.
The best would to be able to select a text from the panel and click on an ‘justify-right’ button.
(Sorry I don’t have a dev formation, I’m trying my best here ^^)

4

That is not possible out of the box, since you can only add classes to special elements (headings, images etc.) using Markdown extra, not to paragraph elements.

Possible solutions:

1 Like
5

I use this in my themes all the time.
I create a toggle field in pangel to select “title alignment”.
Then in templates check this field value before rendering the title.
If field value is 'center' I add a utility class .text-align-center to the <h1> tag.
This only works for page title where alignment is ornamental, but not for body text where it’s better to respect document writing direction rtl or ltr.
You can use a select field, or toggle field, for that depending on your need.

I think this is all you need:

6

That depends on the text type.

But a toggle field will always apply to the complete text in the text field, not to parts of text. That’s why I suggested the builder field, because it allows you to build your document from text snippets to which you can assign a class (if you don’t need different building blocks, the structure field will do as well).

Example structure field:

fields:
  buildingBlocks:
    label: Article text
    type: structure
    fields:
      text:
        label: Paragraph
        type: textarea
      alignment:
        label: Alignment
        type: radio
        options:
          - left
          - right
          - center
7

Hi Texnixe,

Thanks for the advices.
I’m exploring the buildingBlocks solution :

  • I downloaded the editor plug-in ;
  • I wrote down that piece of code in my default blueprint ;
  • Typed the texts I desired in the table displayed in my panel ;
  • Added the code <?= $page->text()->blocks() ?> so that it prints my text in front-end ;
  • Unfortunately, the alignment specs are ignored. Everything is aligned left by default.

Is there a class I have to define somewhere ? Did I get something wrong ?

Thanks for help :slight_smile:

8

Not quite sure what exactly you have done. Could you post your blueprint, please?

9 
title: Simple Page
preset: page

icon: 📝

status:
  draft: true
  unlisted:
    label: Hidden Page
    text: The page is not listed in the main menu
  listed:
    label: Menu Page
    text: The page is listed in the main menu

pages:
  template: default

fields:
  buildingBlocks:
    label: Textes
    type: structure
    fields:
      text:
        label: Paragraph
        type: textarea
      alignment:
        label: Alignment
        type: radio
        options:
          - left
          - right
          - center
  text:
    type: textarea
    size: huge
10

Ok, so you are using a structure field like I suggested, but are trying to render it using the blocks() method from the Editor field, which doesn’t make sense.

You render the contents of a structure field like this:

<?php

$items = $page->buildingBlocks()->toStructure();
foreach ($items as $item) : ?>
<div class="<?= $item->alignment() ?>">
  <?= $item->text()->kt() ?>
</div>
<?php endforeach ?>
11

Ok I understand my mistake.
So I tried to render it using buildingBlocks like you’re suggesting.
The text prints but the alignment is ignored.
Check the screen capture :

09
Capture d’écran 2019-10-29 à 11.06.09.png1909×963 426 KB

I tried rendering outside of the “main” class, but it’s still the same result (without the “main” class styles).

12

What do you mean with the alignment is ignored? Does the class not show up in the source code?

Have you added styles for the classes in your stylesheet?

13

Ok got it !
Sorry, I didn’t catch the fact that I was creating classes with that method.
All good now !

Thanks :slight_smile:

14

Hi all! With the advent of Kirby 4 is this still the way to go for text alignments? I’m using layout to create content, but it would be nice that the text-alignment options can be placed in the contextual menu - the one with bold, italic, link, underline, strikethough.

With layout settings you can apply alignment on the whole row, but not separate on the columns.