Help Needed Converting CCS to L&L Template

I loved CCS and have been nothing but frustrated with trying to convert what I have already existing and functioning exactly as I wish to the L&L template. In brief, what I need to replicate is the creation of rows of featured images (linking to the post) in 6 columns and the ability to filter by category taxonomy and compare terms. Example:

[loop type=post orderby=date order=asc taxonomy=category term=2022,2023 
relation=and taxonomy_2=category term_2=book compare_2=and columns=6]
[field image-link width=90% image_class=center]<p>&nbsp;</p>
[/loop]

While I can get the featured images to display, I have no idea how to apply the columns feature that was available in CCS nor to size the images appropriately. I have searched through the documentation, but cannot find enough examples to assist me with creating a template that does more than make a mess of the page I embed it in. Your assistance would be greatly appreciated.

Hi Liana, welcome to the community!

If I understand correctly, you’ve already successfully managed to create a post loop that grabs all the featured images you need based on the particular taxonomy terms you want to show, but now you’re at a loss for how to display your content in columns and adjust the image size. Is that right?

If so, the nice thing about L&L is that it allows you to incorporate your L&L-specific dynamic tags with regular HTML and CSS. Changing the size of an image and displaying your content in columns is already something you can do with HTML and CSS, so there’s no need to learn any special L&L markup to do what you’re trying to do.

For the multi-column layout, you’d probably either want to use flexbox or CSS grid. Those aren’t L&L-specific so you’ll find plenty of resources online about how to work with that if you’re not already familiar. There are also generators available online (like this one for CSS grid and this one for flexbox) if you’d rather go that route. The CSS can be easily added to the Styles tab of your template or to your site’s global styles, whatever fits your workflow best.

For the image size, you could just use the standard HTML <img> tag with a width attribute, like <img src="{Field image_url}" width=90%>. That method probably gives you the most control, but you can also use the size attribute with an image field (like <Field image size=medium />) to specify the size of an image based on your registered media sizes. You could even use both of those methods together if you wanted to load a specific resolution of image into your img tag.

Hope that’s helpful!

Hi Benjamin,

I have successfully created what I need in Custom Content Shortcode and have been excessively frustrated in trying to convert it into the “new and improved” Loops & Logic.

Thanks for the information, but I have no idea how it is to be applied without an example. Using CCS I had no need to use flexbox or CSS grid. I have multiple changes on the site in CSS and I daresay I can figure out a grid, but would prefer something a little more straightforward. Are columns NOT a feature of Loops & Logic as they were in CCS?

Here’s what I don’t know: What needs to be in the template vs. what is applied to the page/post and how those things interact. Nothing in the documentation sheds enough light as it is very shy on providing examples beyond how to list 3 posts–which has no bearing on what I need to accomplish.

I would love to move away from a plugin which is no longer being updated, but am completely at sea as to how something relatively easy has been now made so much more complex with additional steps and the need for a guide dog to navigate the instructions.

I appreciate the information provided, but need it taken down to a Loops & Logic for Dummies level. The BEST I’ve done with Loops & Logic (and it is hideously ugly) is to show ALL featured images on a page/post, which is not helpful.

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 loop.tangible.one 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%>
  </Loop>
</div>

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.

Hi Benjamin,
Thanks for the very thorough response. I will give it another whirl and see whether I can get it functioning. I have looked at the documentation, but I think your statement of “once you know what you’re doing, those docs are great” says a lot. IF you know … then your reliance on the documentation isn’t as great and you don’t notice the lack of information to assist the novice. I will take a look at the beginner’s guide and the terminology and syntax. Thank you for posting those links.

The lack of examples provided to assist in converting CCS to L&L is probably the biggest problem. Especially when one thing is being touted as the new and improved version of the older one and they are structurally nothing alike. While not a novice to coding (in some languages), writing HTML, etc. I am a novice to L&L and my frustration escalated with the lack of a toe hold to find the information I needed. Everywhere in the documentation, to me, it seemed as if the information is only half there and not enough to be helpful for those who do not know this particular structure. Not everyone can know everything; however, I am usually pretty good at figuring things out and this has eluded me.

Yes, the article explaining the reason for the transition and the alleviation of limitations is nice, but lacks the HOW. That is all I was really looking for. Just telling me I have access to all of the features of HTML and CSS doesn’t explain how they interface with the L&L plugin or how to incorporate the use of the templates with the other code.

That was exactly the point I was facetiously making! Hahaha :laughing: I struggled when starting to learn L&L (I’m still a frontend noob myself) because the docs are currently more of a reference than a thorough hand-holding onboarding experience that new users like you and I would like. That’s why I started writing blog posts to help new users. Your issue with the lack of examples is one that’s been mentioned by other users and is definitely a massive priority that I hope to address in the very near future. I hope those two posts I linked above are useful starting points. I’ll eventually be incorporating the information from those posts into the official documentation once we transition to our new docs platform.

After you’ve given those a read, let me know if there are specific topics that are still unclear or that you’d like to learn more about. I’d love to prioritize making tutorials and explanations based on the needs of actual L&L users!

1 Like

HI Benjamin,

Thank you again for your assistance. It has taken a bit of trial and error to get to the correct solution. Instead of going with creating the columns as a style, I went with a grid.

.grid-container {
  display: grid;
  row-gap: 10px;
  grid-template-columns: auto auto auto auto auto auto;
  padding: 10px;
}

Then all I had to do was wrangle the categories/taxonomies. A brief on the results I needed to achieve … this is for a publisher’s website, so needed the book covers (featured image) to link to the post with the details about the book and we have current and upcoming in one section and other sections on the same page with other years going back into the past. Except, we didn’t want the romance division intertwining with the adventure/thriller/sci-fi offerings. I had been using the slugs for the categories (and the slugs were years) rather than the category IDs but went with the IDs for the below (and had to add a hyperlink statement otherwise the book covers displayed but didn’t go anywhere.)

<div class="grid-container">
  <Loop type=post orderby=date order=asc taxonomy=category terms=361,416,451 taxonomy_relation=and taxonomy_2=category terms_2=306 taxonomy_compare_2=not>
      <a href="{Field url}"><img class=center src="{Field image_url}" width=90%></a>      
  </Loop>
</div>

My only other question at the moment is whether it is possible to feed variables to the L&L template. As I explained above, I have several sections where the only information changing for the template is the terms. So my question is in the post itself is there a way to call one template with all the same parameters, but in the post itself specify which variables need to be passed to the template? To help illustrate the question, something like :

<div class="grid-container">
  <Loop type=post orderby=date order=asc taxonomy=category terms={Get local=my_variable} taxonomy_relation=and taxonomy_2=category terms_2=306 taxonomy_compare_2=not>
      <a href="{Field url}"><img class=center src="{Field image_url}" width=90%></a>      
  </Loop>
</div>

And in the post something like:

[template id=12345 my_variable=361,416,451]

That didn’t work, but I think I must be in the neighborhood.

As far as examples for the documentation, it would be helpful to have examples based on the terms. For instance, taxonomy_2 and so on, if there was an example showing the use of multiple taxonomies and not simply how to list whichever taxonomy is selected, that would be most helpful.

Again, thank you so much for your assistance.

I genuinely got so excited when reading your post yesterday evening. You’ve figured it out and you’re asking really thoughtful questions! I noticed yesterday after I published my reply that you had initially said the featured images should be hyperlinked. I considered making a follow-up post to mention that this would be done with the HTML <a> tag and {Field url} as the href value, but then I thought “nah, Liana will figure that out.” And you did! I guess that means the blog posts I’ve written were useful. Woohoo! I’ll be sure to prioritize writing more code examples and I’ll add those kinds of explanations to the docs in the near future. I’ll make a note to highlight those post loop taxonomy/term-related query parameters you mentioned.

About passing a variable from the [template] shortcode to the template itself, you’re totally right that you’re 99% of the way there. You’ve even correctly written it as a local variable (just like the <Template /> tag). The only issue with your markup is that you’ve omitted quotes in your terms={Get local=my_variable} parameter so the whitespace character is making L&L think that those are multiple parameters. So if you just add quotes, it should work:

terms="{Get local=my_variable}"
1 Like

Thanks so much, Benjamin. The quote marks worked a treat and I am now passing multiple variables where needed. Thanks again for all of your assistance and putting up with my frustration.

2 Likes