My plan is to use grid for layout and I want blocks of paragraphs wrapped together, i.e. below. But, I don’t know the language well enough to program, even if this is possible.
Altering the single template to change high-level layout is easy enough, but specifying wrap of consecutive/multiple objects that are rendered in {{ .Content }} is not. I understand capability to replace all objects via replaceRE, but not groups:
default {{ .Content }} render (as far as I know):
<p></p>
<p></p>
<p></p>
<figure></figure>
<p></p>
<p></p>
<p></p>
desired:
<div>
<p></p>
<p></p>
<p></p>
</div>
<figure></figure>
<div>
<p></p>
<p></p>
<p></p>
</div>
Cheers.
The terminology is a bit vague. A grid is usually defined in CSS to arrange items in … well, a grid.
There’s no “default Content render as” – if your content contains paragraphs (i.e. lines of text separated by an empty line), they are rendered as p elements. What happens with images is detailed elsewhere – IIRC inline images are rendered as img images, whereas images on their own lines (surrounded by empty lines) are rendered as figure.
What you described as “desired” makes little sense in HTML – div as well as p are block elements. Including some p elements in a div might be necessary in certain situations, but it’s not clear if yours is one of those.
As such, that is without corresponding CSS, including paragraphs in a div doesn’t do anything for the layout – you won’t see any difference to a version without the divs.
In your example, it is not clear at all when you’d like to have four ps inside a div and when you’d want three of them. Showing what you want in terms of content instead of HTML might help.
My definition was intentionally vague, as I have control over the content and CSS of the figure object in my example. I understand that, as indicated without class/CSS, the divs in my example produce no change since all are block-level objects. My assumption has been that if I can place the divs, I can add classes that format.
Ultimately I want to use grid-gap (in grid spec) to control spacing in the single template, and let paragraph objects space themselves (via CSS). Hence the wrapper, which segregates the internal paragraph spacing from the grid gap spacing.
So, the objective is to create divs wrapping paragraph sets of any number, as long as they are consecutive paragraph objects, such as my example. I’m not sure details of CSS are any more helpful than my description and I’m attempting to keep this as simple as possible without that complication, but I can detail if it’s useful.
Thanks.
You can format the p also, so why the divs?
grid-gap is a CSS property, and a paragraph doesn’t space itself unless you tell it so with a CSS rule. So, grid-gap and margin-top/margin-bottom will have to be in the CSS to do what you want.
p+p might be the selector you’re looking for, as it matches all paragraphs with a direct sibling that’s a paragraph. Something like
p+p { margin-top: 1rem;} /* applies the margin to the second p in a row */
might do the trick. If not, there’s has and not and a lot of other CSS beasts to solve the problem.
But I still don’t know what this problem is – have inter-paragraph spacing different from … well, what? Where does the “grid” come into play?
And it’s not a Hugo question at all, but an HTML/CSS one. Better take this to places where those are on-topic.
If I can programmatically wrap paragraph (or other) objects, then through applied classes I can select where those wrapped groups lay in the grid. For instance, wrapped groups of different sizes can be moved to different areas, if that is called for in the layout.
In some respect my idea is a housekeeping issue, but ultimately it allows granular (i.e. group) control over placement in the layout. My CSS is atomic, so I do not use p+p type selectors, and they do not help in the cases I seek (e.g. my example and above).
To provide more insight, imagine grid is used for layout of a post via {{ .Content }} render in the single (or any, really) template. Display: grid, grid-template-columns, and grid-gap (etc.) can be used on the parent object of {{ .Content }} thereby giving the same space to all grid child objects. Individual objects can be spaced independently via its shortcode, etc.
By default all paragraph objects, for example, are rendered equally as child objects within {{ .Content }}, so their groups cannot be moved or spaced differently in the layout via class application.
If groups of paragraph (or other) objects can be identified programmatically, then in theory they could be counted and differentiated. I just don’t know whether this is possible in the rendering process. Clearly there is some capability (since replaceRE identifies via regex search), but I don’t understand how to look ahead, so to speak, in the search process.