Dynamic data and Post Loops using the Tangible "Loops and Logic" syntax

LiveCanvas v4 allows you to easily query posts and display post loops using the Tangible / Loops and Logic syntax: a beautiful, simple and secure syntax to query and display all your dynamic data.

Loops and Logic, or just LNL, is an easy and intuitive templating language - just like Twig, Blade, or Smarty (for older guys) - but specific to WordPress. This language is a  simple and secure way to query your database and display all your dynamic data, eg stored in custom post types.

This gives you also access to conditionals and dynamic tags like <Loop>, <Field>, and <If>, almost directly in your HTML. You'll just need to wrap your "Loops and Logic" code with a <tangible> HTML tag.

Some basic elements you need to know about the Tangible / Loops and Logic language integration in LiveCanvas: 

  • In the HTML editor, just use <tangible> tag to wrap your  "Loops and Logic"  code and it will run. Directly in the HTML.
  • Want live preview while editing? Add the "live-refresh" class to your <tangible> element to enable live rendering while editing the page.
    So this would be the structure of a "tangible" code snippet, directly usable everywhere in the LiveCanvas HTML editors:

    <tangible class="live-refresh">
    .....loops and logic code here.....
    </tangible>


  • LC Integration Minor peculiarities, to know before diving in:
    • due to strict html parsing and editor behaviour of the LC editor, "command" tags are converted in lowercase but still  work. No need to worry.
    • Styling recommendation: when recalling fields, please prefer using explicit syntax: please prefer writing <field name=“title">  instead of   <field title>  
  • See the Practical Code examples  in the next section below and learn how to list blog posts or whatever post type, and easily display any kind of field and custom field.
  • There are some readymade Post Loops in the standard LiveCanvas library of readymade sections v4+
  • Read the L&L tags documentation
  • Visit the Tangible Community Forum
  • Use our Custom GPT for Tangible Elements
  • <tangible> works also in LC Dynamic Templates
    • We re-coded all default dynamic WP templates like single, archives, 404 into L&L syntax
    • …but full WooCommerce templates are still only shortcode-based

A note for long time users: The old "lc_get_posts" shortcode-based alternative is still  perfectly working if you still want to use it as an alternative. 

Shortcodes are still usable in case <tangible> may not be your cup of tea.

But. most of the times, you'll be amazed at the power and elegance of it's code.

Pratical Code Example: Simple Posts Loop

Code

<tangible class="live-refresh">
	<div id="archiveHomePosts" class="d-grid gap-3 mw-8 mx-auto">
		<loop type="post" count="5" orderby="date" order="desc">
			<div class="col-12 py-5 border-top">
				<div class="row align-items-center">
					<div class="col-lg mb-3 mb-lg-0">
						<if field="image">
							<img loading="lazy" src="{Field image_url size='thumbnail'}" srcset="{Field image_srcset}" sizes="{Field image_sizes}" class="img-fluid" alt="{Field image_alt}">

							<else>
								<img loading="lazy" src="https://placehold.co/150" class="img-fluid" alt="Placeholder">
							</else>
						</if>
					</div>
					<div class="col-lg-9 mb-3 mb-lg-0">
						<div class="mw-4">
							<span class="text-body text-opacity-75 mb-1 d-block">
								<field name="publish_date" date_format="F j, Y">
								</field>
							</span>
							<h3 class="fw-bold">
								<field name="title">
								</field>
							</h3>
						</div>
					</div>
					<div class="col-lg ms-lg-auto">
						<a class="d-inline-flex align-items-center fw-semibold icon-link icon-link-hover" href="{Field url}">
							<span>Read</span>
							<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="bi bi-arrow-right animate-bounce" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
								<path d="M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z"></path>
							</svg>
						</a>
					</div>
				</div>
			</div>
		</loop>
	</div>
</tangible>

Preview

Three Columns Posts Loop

Code

<tangible class="live-refresh">
	<div id="myPostsGrid" class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-xl-5">
		<loop type="post" count="6" orderby="date" order="desc">
			<div class="position-relative">
				<div class="row">
					<div class="col-12">
						<if field="image">

							<img loading="lazy" src="{Field image_url size='large'}" srcset="{Field image_srcset}" sizes="{Field image_sizes}" class="img-fluid mb-3 w-100 object-fit-cover rounded-3 shadow" style="aspect-ratio:4/3" alt="{Field image_alt}">

							<else>
								<img loading="lazy" src="https://placehold.co/300x200" class="img-fluid mb-3 w-100 object-fit-cover rounded-3 shadow" style="aspect-ratio:4/3" alt="Placeholder">
							</else>
						</if>
					</div>
					<div class="col-12">
						<a class="stretched-link text-decoration-none" href="{Field url}">
							<h3 class="fw-bold fs-4 ls-n1">
								<field name="title">
								</field>
							</h3>
						</a>
						<p class="text-body text-opacity-50">
							<field name="publish_date" date_format="F j, Y">
							</field>
						</p>


					</div>
				</div>
			</div>
		</loop>
	</div>
</tangible>

Preview