Help Needed Converting CCS to L&L Template

Sorry to hear you’ve been having a tough time with it! I didn’t realize that you were also having issues creating loops with L&L; from your post, I thought your only issue was with columns and image sizing. I also totally understand where you’re coming from when you say that the documentation “is very shy on providing examples beyond how to list 3 posts.” The project lead on this plugin has been brilliant when it comes to structuring reference material at in a really efficient way (once you know what you’re doing, those docs are great!) but you’re totally right that those docs leave beginners a bit in the dark when it comes to learning how to use L&L from scratch. The Tangible team is currently in the process of setting up a more user-friendly documentation site so I’ll be working on creating more tutorials and examples for beginners like you and me. I expect that over the next month or two, we’ll have much better docs that make it easier to learn all these things.

Here are a few answers to your questions/comments:

I’ve linked to some more detailed examples below, but I quickly whipped up this template that should allow you to achieve what I think you’re trying to achieve if my understanding of your CCS code is correct (I’ve never used CCS myself, it just looks similar enough to L&L that I’m going with my gut here):

<div class="col-6">
  <Loop type=post orderby=date order=asc taxonomy=category terms=2022,2023 taxonomy_relation=and taxonomy_2=category terms_2=book >
    <img class=center src="{Field image_url}" width=90%>

This might not make much sense until you’ve read through the posts linked below, but you can see just by skimming it that the formatting is almost identical to what you’ve written in your CCS example. The big difference is that while CCS accepted specific attributes hard coded into the plugin like width=90% and image_class=center, the markup I’ve written above just uses a standard HTML <img> tag so it accepts every attribute you’d expect to be able to add to that without needing to learn more L&L-specific markup. I’ve added two CSS classes (col-6 as well as center which I assume is a class you’re already using on your site) so for that col-6 class you’d probably just add your CSS in the Style tab depending on how you want to set up your six-columns layout and what other CSS you want to add to make it look good:

That’s correct, at least for now. There were a lot of convenient little shortcuts in CCS, but those features of CCS were also one of the things that limited its scalability. I think this post explains that pretty succinctly:

Custom Content Shortcode to Loops & Logic Transition – FAQs
In L&L, instead of needing to learn special shorthand for all the various HTML tag attributes you might need, you simply write the HTML output you want to see directly and drop in L&L variables as needed. This also means that while CCS needs to explicitly support each possible HTML feature you might want by implementing shortcodes and parameters for each one, Loops & Logic simply puts the entire power of HTML at your disposal out of the box.

So that’s not to say that there won’t ever be features like that convenient columns attribute in CCS (there are already lots of convenient shortcuts and more are released with each update), but with L&L, you’re not limited to just the features that the plugin developers have built, you have access to all the standard features of HTML and CSS alongside L&L’s dynamic tags. You’re welcome to go ahead and request that columns feature and maybe it’ll be added in a future update! In the short term though, while those shortcuts can be convenient, it also doesn’t necessarily make sense to reinvent the wheel when there are already well documented and well-established ways of doing these things in HTML/CSS.

Since you’re looking for some examples that explain the rationale and syntax behind L&L, you might find this beginner’s guide to be a much more accessible way of learning the L&L ropes. This post about terminology and syntax will probably also help you wrap your head around L&L. Let me know if things are still unclear after you’ve read through those, I’d love to improve those guides to make them easy to understand.