Paged vs count changes my layout

Hi!

Right off the bat I want to say I am pretty much a newbie when it comes anything code. I am learning HTML and CSS, and I had just figured out Custom Content Shortcodes when I saw L&L was probably the better choice to learn. And I am loving it!

Anyways, building a loop I noticed how my loop only produces a single column of items if I use paged= instead of count=.

The only difference between the two is <Loop type=post paged=2> and <Loop type=post count=2>
(I wanted to upload images here, but I am not allowed because new account, but I hope you understand)

The full loop looks like this:
Screenshot 2021-11-06 at 21.21.30

I can’t figure out why that is? What changes in this case, that makes my CSS treat it so differently?

All the best,
Mikkel

1 Like

Hello! Thank you for the kind words, I’m glad to hear you’re liking L&L. Its goal is to be easy to learn, so if anything is unclear, we’d love to improve it. Please feel free to post any questions.

The Loop tag usually doesn’t create any wrapping HTML element, it just repeats its inner content/template. So with the count attribute, you’d get a result like:

<div class="container">
  <div class="inner-part">..</div>
  <div class="inner-part">..</div>
</div>

However, with the paged attribute, the Loop tag needs to wrap its items for the pagination script. It will look like this:

<div class="container">
  <div class="tangible-paginator-target">
    <div class="inner-part">..</div>
    <div class="inner-part">..</div>
  </div>
</div>

(You can confirm this by selecting the resulting HTML on the frontend, and right-click to “Inspect” in the browser’s developer console.)

That additional element is the reason why the CSS styling behavior changes. I’ve made a note to include this info in the documentation.

So I suppose the solution is to adjust the CSS if you need pagination.

1 Like

Hi Eliot,

Thanks for getting back to me so quickly! I got it working by targeting “tangible-paginator-target”. Didn’t think to inspect for new divs. Slowly inching forward.

Anyways, for newcomers like me - or at least personally - specific examples / videos are great for having those aha-moments, that makes it all click. Of course this is not something that you should be worrying about, I think, since that will probably be made by the community with time. Just my 2 cents of what makes things clear for noobs!

I think the documentation is great, and I made a lot of progress just with that alone. Great job. Thanks for your efforts.

All the best,
Mikkel

1 Like

Hi Mikkel, I appreciate the feedback!

Some other users have also suggested that more examples would help. We have plans to prepare tutorials and videos too. So we’re working on improving things. Please let us know if you have any questions or suggestions.

I hope you find the template language useful and maybe even fun! :slight_smile:

2 Likes