lesson learned: where to place your “Liquid-tags”

[Carla@home]

I’ve read somewhere that you have to learn from your mistakes. Well, I did.

I’ve just started out with using “Liquid” (template language).

With the logic tag {% capture -%} you can assign a block of text, HTML code to a variable and reuse it later in your (html)-page several times.  The HTML code or text between the capture tags does not render on the page.

Example

{% capture test -%}

   <span>red</span>

{% endcapture -%}

<p>my {{test}} shoes</p>

<p>my {{test}} nose</p>

Output:

my red shoes

my red nose

So far, so good.

If you want to use the logic tag {% capture -%} in combination with a web app, be sure to place it after the command

{module_webapps id=“1234” filter="all" resultsPerPage="2" hideEmptyMessage="true" rowCount="" collection=“nameOfCollection” template=""}

{% for item in nameOfCollection.items -%}

{% capture nameOfCapture -%}

  <h2 >{{item.['headline sub']}}</h2>

more fields from the web app

{% endcapture -%}

Now you can “call” {{nameOfCapture}} where ever you want.

{% endfor -%}

If you place {% capture -%} before the  {module_webapps  ….} and recall it later, anything between the logic tag won’t render and will output it like this:

{{item.['headline sub']}}

So, to recap: place any dynamically retrievable fields after the {module_webapps  ….}

Kind regards, Carla

[Liam Dilley]

Hi Carla,

That is untrue because while you should avoid using the capture module (little reason you should ever do, its rare) where I have done so and others like assign (which you should try to use instead of capture where possible) it works totally fine.

The use case you have is one of the cases that you should not be capturing and using it like that.

What are you trying to achieve?

[Carla@home]

Hi Liam,

In an other post how to filter web app items with boolean item field checked (true) in module_webapps I was trying to filter a web-app item bases on a boolean field. That's working now. But based on the boolean field there is a "chunk" of code to be rendered twice. First I thought to place the code in a content holder but then I read the docs about the %capture -%.

In an other document or blog I read that it would be better to use this instead of assign. Since I'm not a native English speaker I perhaps misunderstood the whole discussion.

I must say I'm a lazy coder and I wanted to keep it DRY.

If I understand you correctly I always should use from now on to use assign instead of capture.

For my curiosity why is this better.

Thanks, Carla

[Liam Dilley]

Hi Carla,
I replied to that post but looks like it was deleted

I replied again to your other post.

You have includes Carla.

{% include "thefilepath" -%}

To achieve chunks or templates of reusable code.

If you read to use capture over assign for use... Who ever wrote that is wrong. Capture has to wait till everything is rendered before it can work so takes longer for a page to process because of that. Assign just accepts the values and data you give it. Even BC say to try avoid using capture where possible.

[Carla@home]

Hi Liam,

Btw: The post I referred to still exists.

Since we are here in the "newbie corner" and to learn. Do you use "assign" for variables (small piece of code) and "includes" where you have a lot of code?

So what is the purpose of capture? And in which situations should/could you use it?

In a BC webinar (some years old) if my eyes weren't deceiving me, I saw some Javascript and html code placed in here.

[Liam Dilley]

Do not think of them like that.

Its more programming logic.

Include are for large chunks of code to "modulize" your content as it were for easy management and re-use. Assign is like variables in most programming languages.

Capture is for rare cases where you need to capture rendered content, after everything has finished rendering you want to grab that block and either render it out later or manipulate it in some way.

One use example is in a for loop to do odd and even:

{% for item in site.posts %}
  {% capture thecycle %}{% cycle 'odd', 'even' %}{% endcapture %}
  {% if thecycle == 'odd' %}
  <div>echo something</div>
  {% endif %}
{% endfor %}

[Carla@home]

Thanks Liam, for your explanation. It makes more sense now.