He just said add this code!

[jarrad]

We like custom, in fact we like it so much we have a plugin that eats custom for breakfast! The idea is simple - anytime a custom solution is needed, we will provide you with what to put in the plugins property and your done.

You can see the plugin here:

Bubble plugins

[jarrad]

Add images into the SlideBarMenu

1. get the Plug Bubble Plugin
2. Add a When Page Load Action - Custom Code Block
3. For each option in your SlideBarMenu you will need 1 block so here is the block and the example:

The Block:

var pb = $( "div.slideable-option:contains('THE-MENU-OPTION-TITLE')" ); $(pb).prepend('<img align="left" float="absolute" src="YOUR-IMAGE-URL" width="100%" height="100%" />');

The Example:

(I have 4 menu options named, Option 1, Option 2, Option 3, Option 4 & my image url is https://s3.amazonaws.com/appforest_uf/f1504722854619x869909093482419800/iconwhite.png):

The Finished Block Would Be:

var pb1 = $( "div.slideable-option:contains('Option 1')" ); $(pb1).prepend('<img align="left" float="absolute" src="https://s3.amazonaws.com/appforest_uf/f1504722854619x869909093482419800/iconwhite.png" width="100%" height="100%" />');

var pb2 = $( "div.slideable-option:contains('Option 2')" ); $(pb2).prepend('<img align="left" float="absolute" src="https://s3.amazonaws.com/appforest_uf/f1504722854619x869909093482419800/iconwhite.png" width="100%" height="100%" />');

var pb3 = $( "div.slideable-option:contains('Option 3')" ); $(pb3).prepend('<img align="left" float="absolute" src="https://s3.amazonaws.com/appforest_uf/f1504722854619x869909093482419800/iconwhite.png" width="100%" height="100%" />');

var pb4 = $( "div.slideable-option:contains('Option 4')" ); $(pb4).prepend('<img align="left" float="absolute" src="https://s3.amazonaws.com/appforest_uf/f1504722854619x869909093482419800/iconwhite.png" width="100%" height="100%" />');

Just make sure you copy them without the gaps to avoid issues, we did this for clarity.

[jarrad]

So it turns out the little menu that has been lurking around has some interesting ability’s!

Embed YouTube Video’s & Trigger the Menu With any Element:

1. Get the Plug Bubble Plugin
2. Add a When Page Load Action - Custom Code Block (or add to what you have already)

The Block (Add a YouTube Video):

var pbframe1 = $( "div.slideable-option:contains('THE-MENU-OPTION-TITLE')" ); $(pbframe1).prepend('<iframe id="plugbubble" width="100%" height="100%" src="EMBED-URL-TO-YOUTUBE-VIDEO" frameborder="0" allowfullscreen />');

The Example & Finished Block:

(I have 2 menu options named, YouTube and Next. I want a video in the YouTube Section so only 1 block is required.)

var pbframe1 = $( "div.slideable-option:contains('YouTube')" ); $(pbframe1).prepend('<iframe id="plugbubble" width="100%" height="100%" src="https://www.youtube.com/embed/gEPmA3USJdI" frameborder="0" allowfullscreen />');

Trigger the menu from any Element:

1. Get the Plug Bubble Plugin
2. Add a When Page Load Action - Custom Code Block (or add to what you have already - THIS BLOCK LAST OR SECOND LAST IF USING THE CHANGE ICON BLOCK!).
3. Add a code block when the element or condition is true for the Trigger Block.

The Block:

When page has loaded block -
var pbTRIG = $('.bubble-element.jpanelmenu-SlidebarMenu.fa-reorder'); $(pbTRIG).attr('id', 'pbTRIG');

The Trigger Block:

When an element is clicked -
pbTRIGG.click()

Swap the Hamburger:

1. Get the Plug Bubble Plugin
2. Add a When Page Load Action - Custom Code Block (or add to what you have already - THIS BLOCK LAST).
3. Pick a font awesome icon here - http://fontawesome.io/icons/

The Block:

var pbicon = $('.bubble-element.jpanelmenu-SlidebarMenu.fa-reorder'); $(pbicon).addClass('fa-NEW-ICON-NAME'); $(pbicon).toggleClass('.fa-reorder, .fa-YOUR-ICON-NAME');

Interesting little menu if you ask me.

[nomads32n]

How do I run this for pictures already in my database using workflows? I’d like to update them to a default image if link to image is broken.

[nomads32n]

Do I have to put 2 blocks in workflow?

[jarrad]

There are a few things you can do, you could use bubble’s composer to split the result,

so code block to add an image to the menu,

using the blank img i have left to = or contain something relevant to your image. Then you can use the formatted as text to,

making the yes = the same img search & the no = another img that will show if the first isnt available.

---

Another approach is to add some fallback code in your <img> elements,

<img src="http://lofrev.net/wp-content/photos/2017/05/Online_logo_2.png" onerror="if (this.src != 'http://lofrev.net/wp-content/photos/2017/05/Online_logo_2.png' || this.attribute('src') != 'http://lofrev.net/wp-content/photos/2017/05/Online_logo_2.png'); this.src = 'http://oaklandtech.com/staff/files/2017/11/unnamed.png';">

breaking down the above code,

the src= attribute is where you provide your preferred image’s url.

the onerror= attribute is where we are going to place some javascript to deal with the preferred image failing.

Looking into what the onerror script is doing you could explain it like this,

if the src property or attribute’s image url does not = the image url you preferred, then show this other url (the last url in the onerror attribute).

A lot of the method you choose should be choosen based on your use case, a good example could be an image board type site - you dot want a bunch of missing images, text saying no image available or a secondary image with an error icon so a good way is when a user uploads an image, grab its base64 as text - then make your preferred src or “source” point to the data url like so -

<img src="data:image/png;base64,YOUR_BASE_64_HERE">

This will mean that even with the user not having the internet as long as the page loaded (locally or remotely) then the images will be there due to the entire image being contained within the base64.

[nomads32n]

@nomads32n

Thanks, though how do you edit the img element in a workflow? I am actually using Bubble as a backend and Dropsource for my frontend, native app. How can I bulk change images to default image if they are found and contain a 404 broken image error?

Thanks, though how do you edit the img element in a workflow? I am actually using Bubble as a backend and Dropsource for my frontend, native app. How can I bulk change images to default image if they are found and contain a 404 broken image error?

[joelalcudia]

Hey jarrad,
great method, but,
Can it be used in dynamic images, as a profile picture?