How to create an editor toolbar button to wrap the macy widget and spotlight action

#1

https://saqimtiaz.github.io/tw5-plugins-sandbox/#Macy%3A%20Example%20with%20lightbox

I want to create an editor toolbar button to wrap the macy widget and spotlight action as shown in the link above around image links.

prefix will

<$macy columns="6" breakAt="1300:5:15:15 940:3:10:10 520:2:5:5 400:1:1:1">
<$let imgs="""

suffix will be

"""
>
<$list filter="[enlist<imgs>]" variable="img">
<$button class="tc-btn-invisible item-container" tag="div" actions="""
<$action-spotlight
	$images=<<imgs>>
	$start=<<img>>
/>""">
<$image source=<<img>>  class="item" />
</$button>
</$list>
</$let>
</$macy>

Its little complex because of the multiple lines of code involved. Can someone help?

#2

Bumping for some clever people to see.

1 Like
#3

I’ll state that I’m not one of those clever people, but I learned from one of them that instead of " I can use ' or """ to wrap content (in this case of suffixes and prefixes) and judging by the provided code, I thought that using ' to wrap might work.

This is my attempt:$ _Btn_EditorToolbar_Wrap-macy.json (771 Bytes)
It works for me, but I haven’t tried it with $macy which I’ve never encountered, hope it can help.

I wanted to do things right and I also tested it with the macy plugin and it seems to work.

By the way, I also found where I learned this: reading this post in which Justin_H explained that:

2 Likes
#4

@Matteo has your solution, but if this is a template you expect you use a lot, you might also consider putting the code into a macro, which would make it much neater and easier to call (with or without an editor toolbar button). For instance:

\define macy-spotlight(imgs)
<$macy columns="6" breakAt="1300:5:15:15 940:3:10:10 520:2:5:5 400:1:1:1">
<$let imgs=<<__imgs__>> >
<$list filter="[enlist<imgs>]" variable="img">
<$button class="tc-btn-invisible item-container" tag="div" actions="
<$action-spotlight
	$images=<<imgs>>
	$start=<<img>>
/>">
<$image source=<<img>>  class="item" />
</$button>
</$list>
</$let>
</$macy>
\end

Which you could then call like this:

<<macy-spotlight """
img1.png
img2.png
""">>
4 Likes
#5

Thank you @Matteo and @etardiff for the help. I will have to check them out when I am back on my desktop at night time. I will reply once the testing is over.

Edit: Thank you once again both of you, both the solutions are working fine.