ACF Blocks

LiveCanvas provides a wide collection of ready-made ACF blocks that let you pull structured field data directly into your layout using Tangible Loops & Logic.
Each block includes a fully functional code snippet you can paste into any section, partial, or template.

ACF blocks

Text Field

Displays the value of a standard ACF Text field.

Template

 <tangible class="live-refresh">

<!-- Replace "my_text_field" with your custom field name -->

<field acf_text="my_text_field"></field> </tangible>

---

Textarea

Outputs multiline content from an ACF Textarea field.

Template

 <tangible class="live-refresh">

<!-- Replace "my_textarea_field" with your textarea custom field name -->

<field acf_textarea="my_textarea_field"></field> </tangible>

---

Number

Displays numeric values from an ACF Number field.

Template

 <tangible class="live-refresh">

<!-- Replace "my_number_field" -->

<field acf_number="my_number_field"></field> </tangible>

---

Range

Uses an ACF range field to render a Bootstrap progress bar.

Template

 <tangible class="live-refresh">

<!-- Replace "my_range_field" -->

<set name="percentage"><field name="my_range_field"></field></set>

<div class="progress" role="progressbar" aria-valuenow="{Get percentage}" aria-valuemin="0" aria-valuemax="100" style="height:24px">
  <div class="progress-bar" style="width:{Get percentage}%">
    <get name="percentage"></get>%
  </div>
</div>
</tangible>

---

Email

Displays an email address with a mailto link.

Template

 <tangible class="live-refresh">

<!-- Replace "my_email_field" -->

<a href="mailto:{Field acf_email=my_email_field}">
  <field acf_email="my_email_field"></field>
</a>
</tangible>

---

URL

Outputs a clickable hyperlink using an ACF URL field.

Template

 <tangible class="live-refresh">

<!-- Replace "my_url_field" -->

<a href="{Field acf_url=my_url_field}" target="_blank">Link</a> </tangible>

---

Image (IMG tag)

Displays an image with proper responsive attributes.

Template

 <tangible class="live-refresh">

<!-- Replace "my_image_field" -->

<set img_field="">my_image_field</set>

<if field="{Get img_field}">
  <loop acf_image="{Get img_field}">
    <img class="img-fluid"
         src="{Field url size=large}"
         srcset="{Field srcset}"
         sizes="{Field sizes}"
         alt="{Field alt}">
  </loop>
</if>

</tangible>

---

Background Image (DIV)

Renders a background image using an ACF Image field.

Template

 <tangible class="live-refresh">

<!-- Replace "my_image_field" -->

<if field="my_image_field">
  <div class="rounded-3 shadow" style="background-image:url({Field acf_image=my_image_field field=url size=large}); min-height:300px;background-size:cover;"></div>
<else>
  <div class="bg-light rounded-3 shadow d-flex align-items-center justify-content-center" style="min-height:300px">Placeholder</div>
</else>
</if>
</tangible>

---

Displays a download button linked to an uploaded file.

Template

 <tangible class="live-refresh">

<!-- Replace "my_file_field" -->

<if field="my_file_field">
  <a class="btn btn-lg btn-primary" href="{Field acf_file=my_file_field field=url}" download>Download File</a>
</if>
</tangible>

---

WYSIWYG

Outputs formatted content from an ACF WYSIWYG editor.

Template

 <tangible class="live-refresh">

<!-- Replace "my_wysiwyg_field" -->

<field acf_wysiwyg="my_wysiwyg_field"></field> </tangible>

---

oEmbed (Responsive)

Displays a responsive embed from an ACF oEmbed field.

Template

 <tangible class="live-refresh">

<!-- Replace "my_oembed_field" -->

<div class="ratio ratio-16x9">
  <field acf_oembed="my_oembed_field"></field>
</div>
</tangible>

---

Outputs an ACF gallery as a responsive grid.

Template

 <tangible class="live-refresh">

<!-- Replace "my_gallery_field" -->

<div class="row g-4">
  <loop acf_gallery="my_gallery_field">
    <img src="{Field url size=medium}" alt="{Field alt}" class="img-fluid rounded col-sm-6 col-lg-3">
  </loop>
</div>
</tangible>

---

Perfect for GLightbox or similar lightbox plugins.

Template

 <tangible class="live-refresh">

<!-- Replace "my_gallery_field" -->

<div class="row g-4">
  <loop acf_gallery="my_gallery_field">
    <div class="col-sm-6 col-lg-3">
      <a class="glightbox" href="{Field url size=full}">
        <img src="{Field url size=medium}" alt="{Field alt}" class="img-fluid rounded">
      </a>
    </div>
  </loop>
</div>
</tangible>

---

Creates a full Bootstrap carousel based on an ACF Gallery.

Template

 <tangible class="live-refresh">

<!-- Bootstrap Carousel from ACF Gallery -->

<div id="acfGalleryCarousel-RANDOMID" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <loop acf_gallery="my_gallery_field">
      <if first="">
        <div class="carousel-item active">
          <img src="{Field url size='large'}" srcset="{Field image_srcset}" sizes="{Field image_sizes}" class="d-block w-100 rounded-3 shadow" style="aspect-ratio:16/9;object-fit:cover" alt="{Field alt}">
        </div>
      <else>
        <div class="carousel-item">
          <img src="{Field url size='large'}" srcset="{Field image_srcset}" sizes="{Field image_sizes}" class="d-block w-100 rounded-3 shadow" style="aspect-ratio:16/9;object-fit:cover" alt="{Field alt}">
        </div>
      </else>
      </if>
    </loop>

```
<if previous_total="" value="0">
  <div class="carousel-item active">
    <img src="https://placehold.co/1200x675?text=No+images" class="d-block w-100 rounded-3" style="aspect-ratio:16/9;object-fit:cover" alt="Placeholder">
  </div>
</if>
```

  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#acfGalleryCarousel-RANDOMID" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="visually-hidden">Previous</span>
  </button>

  <button class="carousel-control-next" type="button" data-bs-target="#acfGalleryCarousel-RANDOMID" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
</tangible>

---

Select

Displays the current option from an ACF Select field.

Template

 <tangible class="live-refresh">

<!-- Replace "my_select_field" -->

<field acf_select="my_select_field"></field> </tangible>

---

True/False

Renders a checkmark or X symbol based on True/False value.

Template

 <tangible class="live-refresh">

<!-- Replace "my_true_false_field" -->

<if acf_true_false="my_true_false_field">✔️<else>❌</else></if> </tangible>

---

Google Maps Address

Outputs only the address from an ACF Google Map field.

Template

 <tangible class="live-refresh">

<!-- Replace "my_acf_map_field" -->

<loop field="my_acf_map_field">
  <p class="mb-1">Address: <span class="text-body text-opacity-75"><field name="address"></field></span></p>
</loop>
</tangible>

---

Google Maps Button

Button that opens the ACF-stored address in Google Maps.

Template

 <tangible class="live-refresh">

<div class="lc-block" id="map-block-RANDOMID">
  <loop field="my_acf_map_field">
    <p class="fw-bold mb-1">Address</p>
    <p class="mb-2 js-address"><field address=""></field></p>
    <a class="btn btn-sm btn-outline-primary js-gmaps" href="#" target="_blank" rel="noopener">Open in Google Maps</a>
  </loop>

  <script>
  (function(){
    var wrap = document.getElementById("map-block-RANDOMID");
    if(!wrap) return;
    var addrEl = wrap.querySelector(".js-address");
    var linkEl = wrap.querySelector(".js-gmaps");
    if(addrEl && linkEl){
      var q = encodeURIComponent(addrEl.textContent.trim());
      linkEl.href = "https://www.google.com/maps/search/?api=1&query=" + q;
    }
  })();
  </script>

</div>
</tangible>

---

Google Maps Iframe (beta)

Embeds an interactive map powered by the stored ACF Map address.

Template

 <tangible class="live-refresh">

<div class="lc-block ratio ratio-16x9" id="map-embed-RANDOMID">
  <loop field="my_acf_map_field">
    <p class="visually-hidden js-address-embed"><field name="address"></field></p>
    <iframe class="js-iframe" width="100%" height="100%" style="border:0;" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
  </loop>

  <script>
  (function(){
    var wrap = document.getElementById("map-embed-RANDOMID");
    if(!wrap) return;
    var addrEl = wrap.querySelector(".js-address-embed");
    var iframe = wrap.querySelector(".js-iframe");
    if(addrEl && iframe){
      var q = encodeURIComponent(addrEl.textContent.trim());
      iframe.src = "https://www.google.com/maps?q=" + q + "&z=15&output=embed";
      iframe.title = "Map: " + addrEl.textContent.trim();
    }
  })();
  </script>

</div>
</tangible>

---

Date Picker

Displays the formatted output of an ACF Date Picker field.

Template

 <tangible class="live-refresh">

<!-- Replace your field -->

<if field="my_custom_date_field">
  <field acf_date_picker="my_custom_date_field"></field>
</if>
</tangible>

---

Time Picker

Outputs the value of an ACF Time Picker field.

Template

 <tangible class="live-refresh">

<!-- Replace your field -->

<field acf_time_picker="my_time_field"></field> </tangible>

---

Repeater Starter Example

Basic repeater loop showing two subfields.

Template


<div class="lc-block">
<tangible class="live-refresh">
<loop acf_repeater="therepeater">
  <h2><field name="title"></field></h2>
  <field name="content"></field>
</loop>
</tangible>
</div>

---

Repeater → Accordion

Creates a Bootstrap accordion from a repeater field.

Template

 <tangible class="live-refresh">

<div class="accordion accordion-RANDOMID" id="accordion-RANDOMID">
  <loop acf_repeater="faq">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#RANDOMID-collapse-{Get loop=count}">
          <field name="question"></field>
        </button>
      </h2>
      <div id="RANDOMID-collapse-{Get loop=count}" class="accordion-collapse collapse" data-bs-parent="#accordion-RANDOMID">
        <div class="accordion-body">
          <field name="answer"></field>
        </div>
      </div>
    </div>
  </loop>
</div>
</tangible>

---

Repeater → Accordion (First Open)

First accordion item starts expanded.

Template

 <tangible class="live-refresh">

<div class="accordion accordion-flush" id="accordion-RANDOMID">
  <loop acf_repeater="faq">
    <if first="">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#RANDOMID-collapse-{Get loop=count}">
            <field name="question"></field>
          </button>
        </h2>
        <div id="RANDOMID-collapse-{Get loop=count}" class="accordion-collapse collapse show" data-bs-parent="#accordion-RANDOMID">
          <div class="accordion-body">
            <field name="answer"></field>
          </div>
        </div>
      </div>
    <else>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#RANDOMID-collapse-{Get loop=count}">
            <field name="question"></field>
          </button>
        </h2>
        <div id="RANDOMID-collapse-{Get loop=count}" class="accordion-collapse collapse" data-bs-parent="#accordion-RANDOMID">
          <div class="accordion-body">
            <field name="answer"></field>
          </div>
        </div>
      </div>
    </else>
    </if>
  </loop>
</div>
</tangible>