Template Tags

At the most basic level, templating with Bloqs is nothing more than the standard EE tag pair/tag process. But tag pairs in Bloqs go a bit deeper than what you might normally expect to encounter in ExpressionEngine. Let's take a look at an example so you can see how the logic plays out.

Lets say we have a single bloq type defined with 2 atoms:

• Bloq Name: Content Bloq

• Bloq Short Name: {content_bloq}

• Bloq Atom Definitions:

  • Atom Name: Heading

  • Atom Short Name: {heading}

  • Atom Name: Body Content

  • Atom Short Name: {body_content}

And this bloq type is added to a Bloqs custom field assigned to the Pages channel.

• Field Type: Bloqs

• Field Name: My Bloqs Field

• Field Short Name: {my_bloqs_field}

  • Selected Bloq Types: Content Bloq

Given our base definitions, to output the content in a Pages Channel Entry, your template code would look similar to the following:

{exp:channel:entries channel="page"}
    {my_bloqs_field}
    
        {content_bloq}  
            {heading}
            {body_content}
        {/content_bloq}
        
        <!-- Working with file field examples -->
        {media_bloq}
            {media_bloq:file_field}
                <img src="{url}" />
            {/media_bloq:file_field}
            
            <!-- Or -->
            
            <img src="{media_bloq:file_field:resize width='90' height='90'}" />
            
            <!-- Or -->

            {media_bloq:file_field:webp}
                 <img src="{url}" />
            {/media_bloq:file_field:webp}
            
            <!-- Or -->
            
            <img src="{file_field}" />
            
        {/media_bloq}
        
    {/my_bloqs_field}
{/exp:channel:entries}

A slight more advanced example including a Feature Component bloq:

{exp:channel:entries channel="page"}
    {my_bloqs_field}
        {content_bloq}  
            {heading}
            {body_content}
        {/content_bloq}
        
        {feature_component}
            {if bloqs:is:first_child}
                <div class="features">
            {/if}
            <div class="feature">
                <div class="feature-title {bloqs:switch='yellow|purple|green'}">
                    <img src="{feature_icon}">
                    {feature_name}
                </div>
                <a class="cover-link" href="{feature_link}"></a>

                {bloqs:children}

            </div>
            {if bloqs:is:last_child}
                </div>
            {/if}
        {/feature_component}
    {/my_bloqs_field}
{/exp:channel:entries}

At the bottom of a Bloqs custom field settings page will be a live basic example template based on the bloqs you've created for your project you can use to get started. Once you've created your basic field tag pairs, you may need to use Context Variables to assist in the rendering of the output. Read more about Context Variables next.

If you are using the bloq nesting feature, then more template examples are available.