Using pdoResources to output Bootstrap column grids in a configurable way

Support
1

Summary

I want to take the number of columns I’m defining and generate the right number of columns via the 12 column bootstrap grid. Say I have a 3 column grid, so normally I’d take 12/3=4 so the cass name for each column would be col-sm-4 .

Now obviously what I have below won’t work, it outputs .25 when [[+columns]] = 3.

I feel like this will be super easy, I’m just not seeing the solution here.

<div class="col-sm-[[+columns:divide=`12`]] p-3"  data-aos="fade-up" data-aos-delay="[[+idx:mpy=`100`]]">
    <div class="card ">
      <img class="card-img-top lazy" data-src="[[+tv.core-resource-image:pthumb=`&h=500&w=500&zc=T`]]" src="[[+tv.core-resource-image:pthumb=`&h=50&w=50&zc=T`]]" alt="Card image cap">
      <div class="card-body">
          <h5 class="card-title">[[+pagetitle]]</h5>
        <p class="card-text">[[+introtext:empty=`[[+content:striptags:ellipsis=`250`]]`]]</p>
        <a href="/[[~[[+id]]]]" class="stretched-link"></a>
        <p>Modulus: [[+idx:mod=`[[+columns]]`]]</p>
      </div>
    </div>
</div>
[[+idx:mod=`[[+columns]]`:is=`0`:then=`
</div>
<div class="row">
`]]
2

It seems like you need the reciprocal of what you’re doing. 12 / [[+columns]] rather than [[+columns]] / 12 I’m not sure there’s an output filter that will do this, which means you need a snippet.

3

Yeah, I knew that :slight_smile: It’s the how. I’m thinking of setting my own placeholder in the chunk / contentblock setting. just ?grid=12 , then do [[+grid:div=[[+columns]]]]

4

Why not just use a snippet? Like [[getGridClass? &cols=[[+columns]] or something? Output filters can get expensive.

5

Hmm, not a bad idea there, this is what I came for, I was stuck in a mindset.

1 Like
6

Glad I could help. :slight_smile:

7

Just for arguments sake… I like using a placeholder that’s guaranteed to have a value, like id, setting that to a value, and then using it for whatever.

[[+id:notempty=`12`:div=`[[+columns]]`]]

For this particular use case you’d probably want to throw in a floor() or round() call to round that to the an integer (e.g. 12/5=2.4 => use 2 columns), but I don’t think there’s a filter for that.

Alternatively… throw some flexbox in the mix to make it automatically size up the columns equally.

8

Mark, it’s funny you mention that. I started this task as a flexbox project, but it’s all magic to me. I was using Bootstrap 4 flex layouts, really what i’m after is the simple block grid that Foundation has. I had a BS 3 implementation, but I’m revisiting it.

Ultimately I want to list a pdoResources and say “Make this unknown number of items in a 2 up grid, 3 up grid, 4 up, etc.”

9

The way I understand it, with Foundation you can just have the columns take up the space available i.e. you don’t have to actually define the number of columns. Or am I misunderstanding what you’re trying to do? It’s a pity Foundation seems to be struggling to keep going though - to me it’s the perfect partner for Modx.

10

I used this implementation for BS 3 https://github.com/JohnnyTheTank/bootstrap-block-grid .

You actually define the grid size per breakpoint and then yes, it takes up available space within those.

I did have a solution working with flexbox where it did as you described… actually… maybe I just need to do a hybrid of that and what I was trying to do with columns, because flexbox doesn’t need column width defined.