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
  • Creating a tabbed content group
  • Displaying Assets fields in Bloqs

Was this helpful?

  1. Bloqs
  2. Docs
  3. Template Tags

Examples

Last updated 6 months ago

Was this helpful?

Creating a tabbed content group

Creating a tabbed content group in Bloqs is pretty easy when using nested bloqs. You can put as many bloqs or components inside of a tab. In this example there is a single component in each tab.

The template markup is where the magic happens. Since Bloqs lets you repeat the same tag pair more than once in the page, you'll create two different loops. The first loop is to render all of your tabs, either in a list, or in this example a series of buttons. And the second loop will render the actual tab panel itself, which will render the contents, or children of each tab, through the {bloqs:children} variable.

{block_tab}
    {if bloqs:is:first_child}
        <div role="tablist">
    {/if}

        <button
            role="tab"
            aria-controls="{tab_id}"
            tabindex="0"
            aria-selected="{if bloqs:is:first_child}true{if:else}false{/if}"
            data-text="{tab_label:attr_safe}"
        >
            {tab_label}
        </button>

    {if bloqs:is:last_child}
        </div>
    {/if}
{/block_tab}

{block_tab}
    {if bloqs:is:first_child}
        <div class="tab-group__panel-container">
    {/if}

        <div
            id="{tab_id}"
            role="tabpanel"
            aria-expanded="{if bloqs:is:first_child}true{if:else}false{/if}"
        >
            {bloqs:children}
        </div>

    {if bloqs:is:last_child}
        </div>
    {/if}
{/block_tab}

Displaying Assets fields in Bloqs

{bloqs_field}
    {asset_field}
        {!-- Looping over multiple files in an Assets field --}
        {asset_field:file}
            <img src="{url}" />
        {/asset_field:file}
        
        {!-- Displaying a single file in an Assets field --}
        {asset_field}
            <img src="{file:url}" />
        {/asset_field}
    {/asset_field}
{/bloqs_field}