Blocs for Mac 6.1 introduces a brand new feature to custom interactions that is going to be a real game changer and massively change the way you create interactions, it will allow you to do more with less!
You can now use the short code data() within your custom interactions to retrieve custom attribute data from the trigger element.
How it Works
Let me explain how this all works.
I have a button that I am using to trigger a custom interaction.
Within the Custom Interaction that this button is connected to, I use the new data() short code to get this attribute and feed it into a navigate to URL rule.
The benefit of this is, I can now use a single interaction on multiple buttons rather than create a separate interaction to link to each page. All I have to do is change the custom data attribute on the trigger element (in this case a button) and this will effect how the interaction works.
You can feed these data() values into into any of the text fields with your Custom Interaction Rules and you can use any type of string data to pass into the interaction. So you could feed in an elements ID string or a colour hex code string, whatever you want really.
Currently data() will only work on elements that trigger interactions, it will not work on the page load or scroll trigger.
There is no list you can use any type of attribute e.g data(get-myspecial-data) or data(blocs-rocks). You just need to make sure the trigger element has the data attribute applied.
The page transition experiment uses this new method.
I can already envision a few cool use cases for this feature. However, I would greatly appreciate it if you could share a few examples where the data() short code proves particularly useful. Thanks a bunch!
I have a blocs page with a dozen carousels. They all have within the carousel links that to lead a page.
Can I use the Custom Interaction New data() short code so a user can click on the image and or video anywhere within the carousel and have it leads to another page? Each carousel would leads to its own page.
That is not correct, you have put two links in the same interaction. You only use one interaction exactly how my sample project works, apply the same interaction to each carousel. But (this is the important part) you update the custom data attributes on each carousel to point to the page.
Hey Norm,
I’m still in learning mode when it comes to the interaction manager.
Thank you for hanging in there with me when I look at custom attributes I see that you have a web link in yours. For me I have 20 carousels that need weblinks. What is the easiest way to get those links if I need them?
I truly hope there is an easier way to do this then go and get all the links and then put them in the custom attribute area.
Custom Attributes can be copy and pasted, so set one up to a page, test it works. Then copy and past the actual custom attribute item in the inspector and paste it on your next carousel that is using the interaction.
When you move to the new carousel first click into the empty space of the custom attribute controls before you paste.
Once you have done that, you will need to manually, assign each page link, but because the rest is already set up its just a case of changing the page name in the value of each attribute.
Test after each carousel setup.
As for getting a list of all the page names you need, Im not sure about that.
Also I’m not sure you are aware but you can give the images in the carousels links as well, this is done entirely with the inspector and the classic interactions.
I’m not sure how you know how much work this will be, so it would be a great idea just to have a drop down to choose the pages like you do and the Interaction (/pages.htm) “pages”.
I clearly don’t have an understanding of this because I have tried this simple solution so many but I can’t get it to work.
I think because you want each carousel (x20) to point to a unique page (x20), it’s always going to be a little more time consuming regardless of your approach.
You select the images inside the carousel and then assign the page links to each image.
I actually just found a bug here, when you wrap a carousel image in a link it pushes the caption out of the carousel. But that will be fixed in 6.4.6 which will be released next week.
