README

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: mail@olivermesieh.com

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.