Working with Hanna Codes being used in 2-column format, in Body text

[MarcC]

Hi everyone,

I set up a simple Hanna Code button snippet for a project, like this:

[[special_button url='example.com' label='Visit Example.com']]

The client is using it actively and have asked for a side-by-side version, where two buttons will be next to one another.

In this case, they are requesting this because the URL varies depending on where the website user lives--County A or County B.

Any thoughts about how to implement this? Which HTML structure would you prefer for the columns, keeping in mind this is user-editable content? Would you alter the Hanna Code at all? 

I'm not used to using Hanna Code and layout options together, in a textarea like the Body field, so I thought I'd ask.

Thanks!

[diogo]

One way is to tell them to have the Hannacodes side by side, just like the buttons would be

[[special_button url='example1.com' label='Visit Example1.com']][[special_button url='example2.com' label='Visit Example2.com']]

But this depends on the html code that you are generating for that Hanna code. For that to work, you would need the root html tag of each of those buttons to be displayed as "inline-block" on your CSS.

Another option is to use a single Hanna Code for both buttons, and style them to be side by side. This would give you more control over the styling, since you can have a parent tag around the two buttons.

[[special_button url='example1.com' label='Visit Example1.com' url2='example2.com' label2='Visit Example2.com']]

This could be the same Hanna code for single and double buttons. If the url2 is not given, show a single button, if it is given, create the second button. A shorter alternative might be:

[[special_button url='example1.com|example2.com' label='Visit Example1.com|Visit Example2.com']]

For this you would have to explode() the value of "url" and "label" by the "|" separator, and create one button for each value in the resulting array.

[MarcC]

diogo, these are great ideas. Thank you. I really like the pipe-separated version and it would seem to fit great, so I'll give that a go. Thanks again.