Dynamic fragments and Post Loops via Tangible tags

From Version 4, LiveCanvas allows you to perform post queries and display post loops using the Tangible / Loops and Logic syntax. This basically allows you to use dynamic tags like Loop, Field, and If, almost directly in your HTML. You'll just need to wrap your code in a specific custom HTML tag.

Enjoy simple query and output control of your data.

Let's highlight  the most important bits of information you need to get started right now

  • In the HTML editor, just use <tangible> tag to wrap L&L code
  • Code Syntax is totally similar to L&L syntax BUT:
    • in order to comply with strict html parsing, commands are in lowercase
    • Use explicit syntax: please do not use  <field title> but prefer <field name=“title>
  • Add to your <tangible> element the "live-refresh" class to enable live rendering while editing the page
  • See the Practical Code examples  and learn to list blog articles or whatever post type
  • 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 not there yet

A note for v3 users

this makes the old lc_get_posts shortcode-based approach deprecated, but  still perfectly working if you still want to use it.

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