BoldMinded Docs
  • Overview
  • Advanced Categories
    • Docs
      • Installation
      • Requirements
      • Setup & Configuration
        • Hidden Config Options
        • Multi-Site Manager
      • Template Tags
      • FAQs
  • Ansel
    • Docs
      • Installation
      • Upgrading
      • Requirements
      • Settings
      • Usage
        • Channel:Form
      • Troubleshooting
      • Template Tags
    • FAQs
  • Bloqs
    • Docs
      • Why Bloqs?
      • Features
        • Add Bloq Menu
        • Nesting
        • Cloning
        • Drafts
        • Bloq Usage
        • Deprecated Bloqs
        • Caching
        • Profiling
        • Bloq Components
        • Bloq Groups
      • Installation
      • Requirements & Compatibility
      • Setup & Configuration
        • Hidden Config Options
      • Creating Bloqs
      • Template Tags
        • Twig
        • Examples
      • Context Variables
      • Add-on Developers
    • FAQs
  • Carson
    • Docs
      • Installation
      • Requirements
      • Fields
        • Omni
          • Hidden Config
        • Assistant
        • SEO
      • Troubleshooting
  • Custom System Messages
    • Docs
      • Installation
      • Requirements
      • Variables
      • Template Tags
  • DataGrab
    • Docs
      • Installation & Upgrading
      • Requirements
      • Troubleshooting
      • Configuring Imports
      • Running Imports
      • Automatic Imports
        • Importing with cron
        • Importing with cron (Deprecated)
      • Endpoints
      • Configuration Options
        • Config File Options
        • Increasing PHP memory limit
      • Import Types
        • CSV
          • Importing into Grid or Matrix field
        • JSON
          • Example file
        • WordPress
        • XML
          • Example file
        • Creating your own import type
      • Assigning Authors
      • Field Types
        • Assets
        • Ansel
        • Bloqs
        • Calendar
        • Channel Images
        • Date
        • File
        • File Grid
        • Fluid
        • Grid
        • Low Events
        • Relationships
        • Simple Grids & Tables
        • Tag & Tagger
        • Matrix (Deprecated)
        • Creating your own fieldtype
      • Publisher
      • Version 5.0
      • Version 6.0
    • FAQs
  • Feature Flags
    • Docs
      • Installation & Upgrading
      • Requirements
      • Configuration
      • Template Tags
      • A/B Testing
    • FAQs
  • Fluidity
    • Docs
      • Installation & Upgrading
      • Requirements
      • Configuration
      • Demos
    • FAQs
  • Logit
    • Docs
      • Installation
      • Requirements
      • Configuration
    • FAQs
  • Publisher
    • Docs
      • Installation
      • Requirements
      • Issues & Tips
      • Languages
      • Template Tags
        • Forms
        • Email Notification Templates
        • Channel:Form
        • Twig
      • URL Translations
      • Auto Translations
      • Diffs
      • Drafts
      • Categories
      • Phrases
      • Persistence
      • Performance
      • Add-ons
        • First Party
        • Third Party
      • Hidden Config
      • Extending Publisher
    • FAQs
  • Reading Time PRo
    • Docs
      • Installation
      • Requirements
      • Configuration
      • Template Tags
  • Reel
    • Docs
      • Installation
      • Requirements
      • Settings
      • Field Tags
    • FAQs
  • Simple Grids & Tables
    • Docs
      • Installation
      • Requirements
      • Template Tags
      • CSV File Imports
      • Field Settings
      • GraphQL
      • Advanced Configuration (deprecated)
    • FAQs
  • Sitemap
    • Docs
      • Installation
      • Requirements
      • Configuration & Usage
    • FAQs
  • Snaptcha
    • Docs
      • Installation
      • Requirements
      • Configuration
      • Template Tags
      • Developers
    • FAQs
  • Speedy
    • Docs
      • Installation & Updating
      • Requirements
      • Configuration
      • Template Tags
      • Static Caching
        • Real World Example
      • Frontedit Support
      • Control Panel
      • Migrating from CE Cache
      • Diagnostics
      • CLI Commands
      • Reverse Proxy Purging
    • FAQs
  • Trek (unreleased)
    • Docs
      • Configuration
    • FAQs
  • Queue
    • Docs
Powered by GitBook
On this page

Was this helpful?

  1. Bloqs
  2. Docs

Template Tags

Bloqs supports the Template Generator feature of ExpressionEngine 7.5. It'll output all the necessary tags for your Bloqs field. You will of course need to add your html around the tags, but the generated template will give you a jump start.

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}
        <!-- Note that any html here will not render. Only content within
        the tag pairs below will render. -->
        <div class="container">For example, this will not be output</div>
        
        {content_bloq}
            <div class="container">
                <h2>{heading}</h2>
                {body_content}
            
                <!-- If using nested bloqs, you'll want to add the {bloqs:children}
                tag within each bloq that might have one or more children -->
                <div class="children-container">
                    {bloqs:children}
                </div>
            </div>
        {/content_bloq}
        
        <!-- Working with file field examples -->
        {media_bloq}
            <div class="container">
                {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}" />
            </div>
        {/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}

Last updated 6 months ago

Was this helpful?

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 next.

If you are using the bloq nesting feature, then .

Context Variables
more template examples are available