Flexible Width Fieldtype - a Statamic Addon

The Flexible Width Fieldtype for Statamic allows easy control of any content area or media element width. It offers more flexibility than the default "Width" Fieldtype, supporting any key-value pairs.

How to Install

Run the following command from your project root:


composer require o1y/statamic-flexible-width

How to Use

To use the Flexible Width Fieldtype, navigate to the "Buttons & Controls" section in the Blueprint configuration. Add key-value pairs as needed.

Alternatively, edit the Blueprint directly in your .yaml file:

-

  handle: column_width


  field:


    options:


      col-1: 1/3


      col-6: 2/3


      col-12: 3/3


    type: flexible_width


    display: 'Column Width'


    icon: width


    listable: hidden


    instructions_position: above


    visibility: visible


    hide_display: false


    width: 25

Use the augmented value in your template:


<div class="{{ column_width }}">


  <p>My column</p>


</div>

Need support with your Statamic project?

👋 Hey, I'm Oli, creative nerd & full-stack developer based in Berlin. If you need any help with your Statamic or web project, let me know! I've been doing this for over 10 years, so I've got you covered. Let's have a chat: [email protected]

Buy me a coffee

I'm happy to share this addon with the community for free. If you'd like to support my work, please sponsor me on GitHub.

Credits

This addon is an extension of the Width Fieldtype for Statamic.