Inserting two line breaks in Markdown

Support Content & Markdown
1

After an hour of searching I still can’t figure out how to put two carriage returns ie line breaks ie blank lines ie

between two bits of content. Kind of blows my mind this is out of reach. Am I daft? Everything suggested just breaks the page.

Cheers.
.: pl

2

Hi, inside markdown it is always possible to insert html tags, so you could put how many
you need

3

Hmm. I tried using HTML but it breaks the page with a 500 - failed to read message.

issue-line-break
issue-line-break.png1371×729 60.3 KB

4

That’s unusual, what theme are you using? For what you describe I use the <br> tag within Markdown.

5

Hey Paul,

The theme is Boxify.

https://demo.getgrav.org/boxify-skeleton/

I tried that and it returns a 500 error :confused:

.: pl

6

The file I’m editing is:

public_html/user/pages/01.home/_featureslist/featureslist.md

I attached a screenshot of the default contents of the above file.

I also attached the edited file after simply copy and pasting three more features.

No matter what I try, whether it’s adding a < BR > (minus spaces so it doesn’t render) which breaks the page with an error or carriage returns, blank linkes, three dashes, nothing inserts more space between the first set of three features and the second three.

7

default
default.png831×870 18.5 KB

8

edited-to-show-six-features
edited-to-show-six-features.png831×870 30 KB

9

OH! Well, I do not think you could do that via frontmatter (I was assuming you meant in Markdown, but now that I see the theme I know otherwise🙂).

One possible alternative is to add the <br> tags in the Features template twig file, as shown here:

<section class="features-list" id="features">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            {% for item in page.header.featureslist %}
                <div class="col-md-4 feature-{{ loop.index }} wp2 {% if item.delay %}delay-{{ item.delay }}s{% endif %}">
                    <div class="feature-icon">
                        <i class="fa fa-{{ item.icon }}"></i>
                    </div>
                    <div class="feature-content">
                        <h1>{{ item.title }}</h1>
                        <p>{{ item.content }}</p>
                        <a href="{{ item.link }}" class="read-more-btn">{{ item.text }} <i class="fa fa-chevron-circle-right"></i></a>
                        <br><br>
                  </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

This would produce this:

2017-12-20_14-25-27
2017-12-20_14-25-27.jpg1233×467 129 KB

Note: to keep this change when the theme is updated you need to configure an inherited theme (quite easy), as described here: https://learn.getgrav.org/themes/customization#theme-inheritance

10

Without touching the twig template, if you want to put only one line break, then again, you can do it in the markdown.

I say this only for other situations, in this case the result is not nice because of the obvious failure to move the icons … :smile:

screen1
screen1.png1217×559 79 KB

screen2
screen2.png1075×618 85.8 KB

1 Like
11

Thanks for this awesome suggestion Paul. Followed the instructions for creating an inherited theme, made the edit to the twig file you suggested, and added another edit to the queries.css file to manage bottom padding for each feature and it all looks fab.

Many Thanks,
.: pl

1 Like
12

Iusvar,

Both of these suggestions are great. I had no idea I needed to put the markup in the variable. Makes perfect sense now. Thanks for helping me think outside the box.

Happy Holidays :slight_smile:
.: pl

13

That is a really great tip @iusvar, I did not know you could do that!

14

Happy to have been useful.

Happy holidays to both!

1 Like