Passing info on the current breakpoint to a script

Elements
1

I want to use some JS (not mine so I have no control over it) in a site that provides parameters to control the number of images it presents in a box, as rows and columns. It would be nice to provide different values for these parameters at different breakpoints, so for example the base is presented as single column whereas a desktop gets 3 or 4. Anyone have any thoughts on the sanest way to do this? The parameters in question are integers.

At the moment the actual JS is broken so it’s not displaying anything but assuming it does get fixed I will have a better idea on how many different breakpoints are needed to make it look more responsive than it is but two different sets of values is probably a minimum.

2

You’d certainly be able to do this as a custom component. You could add some responsive controls to the inspector that you can set at each breakpoint :slight_smile:

Bit of a rambly video (sorry), but hopefully it gives you an idea of what’s possible:

Let me know if you have any questions, and if you have a working script I could do another video showing you how to get it setup :slight_smile:

3

Hi Dan, That was the way I had been going but “1 sm:2 md:3 lg:4” is not a simple integer and so it doesn’t work (I had tried it and discovered it the hard way). What I wanted is for it to just emit the correct number for the size. I had considered some sort of if-then-else condition but I couldn’t think of a way to make that work either.
The code in my template is

<div id="{{type}}" class="p-sm text-lg text-center text-brand-500">

   <script type="text/javascript" src="https://www.redbubble.com/assets/external_portfolio.js"></script>

    <script id="{{id}}" type="text/javascript">

new RBExternalPortfolio('www.redbubble.com', 'mprior', 3, 1).renderIframe();

</script>

</div>

I had 3 and 1 as variables {{rows}} and {{columns}}.

4

The iFrame render creates the space (since I have an element below it that moves down the page) but doesn’t populate it with images and I have a support request into RedBubble about it but so far crickets.

5

You could process the responsive values in the hooks file to extract the raw numbers and pass those through to the page, but that starts to feel a bit hacky and I would not recommend going down that route.

More realistically, you have two options:

  • Handle it in JavaScript at runtime — check the viewport width using matchMedia (or similar), determine the correct integer, then initialise RBExternalPortfolio with that value.
  • Render multiple instances and toggle visibility per breakpoint — Tailwind can control visibility cleanly, though you would technically be loading multiple embeds.

Stepping back a bit, it does feel like the RedBubble embed itself may be somewhat dated. Do they offer a more modern, responsive embed option that adapts automatically?

6

I was going down the hacky path and then stopped and asked the question instead as it did feel way too hacky :slight_smile: The JavaScript way seemed to be the better path but I wasn’t sure how best to integrate that either.
Sadly that embed is the only thing they offer. I have other issues with it and would prefer an API that I could control but at the moment it is what it is. I might yet fake it but I was looking for the path of least resistance at this stage.

7

If you do go down the route of modifying the responsive values in a custom component, you’ll want to check out rw.responsiveProps in the API docs, as that should do what you need.

If you get stuck, feel free to ping @ben for a little nudge in the right direction, he’s the component guru around here :smiling_face:

8

Thanks Dan. I got a response from RedBubble that wasn’t inspiring and felt like a fob off.
It doesn’t look like we have a solution for this issue right now. However, I’ve made note of the details you’ve provided to share with the appropriate team to look into when they’re able.

I’ll wait a while to see if they respond to my follow up with a more positive response but I might end up just emulating it with a flex, grid with images & links, and a button. The content won’t be a random selection but it will work.

9

Thanks for the update, and yeah, I wouldn’t holdout for a working solution from RedBubble :grimacing:

1 Like