Gallery++ not parsing/rendering inside <div>

When I'm using a plugin called gallery++, the plugin is not rendered inside <div>:

<div class="row">
[gallery]
image1
image2
[/gallery]
</div>

It only works outside <div>, but I need to use it inside the <div> container.
Is this a plugin specific or is there a simple way to resolve my issue?

I'm new to web designing;
Any help would be greatly appreciated!

I was suggested to correct the question to show exactly how I formatted the tag:

  <div class="row">
      <h2>photos</h2>
      <hr class="line2">
      [gallery]
      ![image-name](image.jpg "comment")
      ![image-name](image.jpg "comment")
      ![image-name](image.jpg "comment")
      [/gallery]
  </div>

@gravclr, According the specs of Markdown:

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.

Span-level HTML tags — e.g. <span>, <cite>, or <del> — can be used anywhere in a Markdown paragraph, list item, or header. If you want, you can even use HTML tags instead of Markdown formatting; e.g. if you’d prefer to use HTML <a> or <img> tags instead of Markdown’s link or image syntax, go right ahead.

Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.

Based on my limited understanding, it seems like I need to resort to using html?
Namely <a> and <img>
Or is there a way I can get the tag to work?

@gravclr,

• Have you tried your own suggestion?
• Have you tried to use a \<span> instead of a \<div>

So, I've tried few things but I didn't get it to work:

• Tried using <span> - Although chances are I didn't do it correctly
• /forum/content-markdown/how-to-use-div-tag-correctly-t4489 - I think you commented on that topic as well

I want to be a bit more thorough in what I'm trying to accomplish

The idea:

The code:

<div class="col-lg-7 col-md-7 col-sm-7">
    <div class="row">
        content 1
    </div>
    <div class="row">
        [gallery++ shortcode]
    </div>
</div>

<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-4 col-md-4 col-sm-4">
    <div class="row">
        Content 2
    </div>
</div>

I wanted to make sure the "content 2" length does not interfere "gallery++" area - hence my attempt to fit the "gallery++" under "content 1" using <div>

Reminder: I'm very new to self-hosting/programming :)

@pamtbaau:
NB, looking at your page layout:

• Do more pages need such layouts that needs <div>s?
• What are those different contents?

Good questions. For me from the beginning this sounds like it should be solved in the theme with a separate template. Adding HTML to the content should be the last resort

@pamtbaau:

• Tried using <span> - Although chances are I didn’t do it correctly

How did you try it and what was the result?

Don't laugh:

  <div class="row">
    <span>
      [gallery]
      ![image-name](image.jpg "comment")
      ![image-name](image.jpg "comment")
      ![image-name](image.jpg "comment")
      [/gallery]
    </span>
  </div>

@pamtbaau:

• Set pages:markdown:extra: true in /user/config/system.yaml
• Add gallery++ as follows to your page:

Tried, didn't work

@pamtbaau:

• Do more pages need such layouts that needs <div>s?
• What are those different contents?

@Karmalakas:
Good questions. For me from the beginning this sounds like it should be solved in the theme with a separate template. Adding HTML to the content should be the last resort

Yes, other layouts will follow the similar compartments.
The contents 1/2 will differ based on the page.
Now, after these searches and reading what you guys said, I came to the conculusion that my original approach isn't the ideal method.
I will spend some time learning twig and try to create/modify a template and see where it gets me.
Chances are I'll have more questions.
Thank you for helping me to understand 🙂

@gravclr,

Don’t laugh:

I won't, but did you even try to replace all <divs>s and css display: block?

Tried, didn’t work

"Didn't work" is meaningless information...
Again, how did you try it? Please show the relevant snippet of markdown and the page settings in user/config/system.yaml.

Reminder: I’m very new to self-hosting/programming 🙂

If you are not satisfied what Grav and one of the themes provide you out of the box, you will have a hard time if you don't have minimal knowledge on Markdown, HTML, css/scss, Twig...

@pamtbaau:
I won’t, but did you even try to replace all <divs>s and css display: block?

I did not; I didn't know I was supposed replace all of them.
However,

@pamtbaau:
“Didn’t work” is meaningless information…
Again, how did you try it? Please show the relevant snippet of markdown and the page settings in user/config/system.yaml.

This was a good point as it helped me to see my problem.
Whilst trying to take a screenshot, I learned that the problem was with indentation.
Removing indentation parsed the gallery++ within <div markdown="1">

Didn't Work:
  <div markdown="1">
      [gallery]
      ![image-name](image.jpg "comment")
      ![image-name](image.jpg "comment")
      ![image-name](image.jpg "comment")
      [/gallery]
  </div>

Worked
  <div markdown="1">
  [gallery]
  ![image-name](image.jpg "comment")
  ![image-name](image.jpg "comment")
  ![image-name](image.jpg "comment")
  [/gallery]
  </div>

A side question, I can't seem to shift+tab indent on Grav - is there a shortcut to this?

@pamtbaau:
If you are not satisfied what Grav and one of the themes provide you out of the box, you will have a hard time if you don’t have minimal knowledge on Markdown, HTML, css/scss, Twig…

True and I'm learning - we all have to start somewhere!
For now I'm glad I've found a solution - thank you.

@gravclr,

This was a good point as it helped me to see my problem.

That was exactly the problem I was expecting considering the Markdown snippet you shared earlier. Indentation in Markdown has a meaning...
Without sharing code snippets, we cannot see what you have been doing and hence cannot see what is going wrong.

A side question, I can’t seem to shift+tab indent on Grav - is there a shortcut to this?

Please do not ask extra unrelated questions in the same topic. The topic is about Gallery++ and that has been answered.

Having said that, tab and shift+tab work as expected using the Markdown editor in the Markdown field in the Content tab in Grav Admin.

@pamtbaau:
That was exactly the problem I was expecting considering the Markdown snippet you shared earlier. Indentation in Markdown has a meaning…
Without sharing code snippets, we cannot see what you have been doing and hence cannot see what is going wrong.

Indeed, thank you again for taking time to address all of my issues.

@pamtbaau:
Having said that, tab and shift+tab work as expected using the Markdown editor in the Markdown field in the Content tab in Grav Admin.

I will make a new topic for this as shift+tab never worked from my end.