Group to Image (Screenshot) — Documentation

Setup Instructions

This are step-by-step instructions on how to get the plugin working on any Bubble App.

[ml][ol][li indent=0 align=left]Add this plugin to your application.[/li][li indent=0 align=left]Add a Workflow action, for example 'When a button is clicked'.[/li][li indent=0 align=left]Search in the actions for [i]Element DOM to Image[/i].[/li][li indent=0 align=left]Go to Settings, then go to General -> General Appearance and check the option Expose the option to add an ID attribute to HTML elements.[/li][li indent=0 align=left]Go to the Design tab and select any element. Scroll to the bottom of the Property Editor and define an ID (for example group_1).[/li][li indent=0 align=left]Go back to Workflow tab and write the ID you just defined in the [i]Element DOM to Image[/i] Action, under Element ID property.[/li][li indent=0 align=left]Define a file name for the image (for example my_image) but don't add extension.[/li][li indent=0 align=left]Select a render option (for example jpeg).[/li][li indent=0 align=left]Set the scale of the rendering (for example 7)[/li][li indent=0 align=left]Run the Workflow Action and the image will automatically download into local storage.[/li][/ol][/ml]

Documentation

[b]Element to Image (Action)[/b] is the only action given in this plugin. You need to call the action in the Workflow to convert to an image any given element by ID.

This action contains the following properties to be used: [ml][ul][li indent=0 align=left][b]Element ID:[/b] the defined ID of a Bubble element. To be able to add an ID to the element you will first need to expose the option in Settings -> General -> General Appearance[/li][/ul][/ml][quote][indent data=1][color=rgb(136, 136, 136)]The ID global attribute defines an identifier (ID) which must be unique in the whole document as defined by [/color][color=rgb(0, 102, 204)][url=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id]Mozilla[/url][/color][/indent][/quote] [ml][ul][li indent=0 align=left][b]File Name:[/b] set the name of the file. Don't include extension like .png or .jpg[/li][li indent=0 align=left][b]Render Option:[/b] select between png, jpeg in which will be the format the image will be rendered.[/li][li indent=0 align=left][b]Scale:[/b] a number indicating image scaling resolution quality. The higher the number the higher the image size and resolution of the element, which will also increase it's storage size.[i] Default is 7.[/i][/li][/ul][/ml] After running the action in the workflow, the image will automatically download into the user's local Downloads.

[b]Element to Image[/b] is the only Element given in this plugin. Add this element into your Editor to manipulate the image internally in your app (it won't download automatically any image). Useful to store the image in Database or to save it for later use.

The element contains the following properties to be used: [ml][ul][li indent=0 align=left][b]Element ID:[/b] the defined ID of a Bubble element. To be able to add an ID to the element you will first need to expose the option in Settings -> General -> General Appearance[/li][/ul][/ml][quote][indent data=1][color=rgb(136, 136, 136)]The ID global attribute defines an identifier (ID) which must be unique in the whole document as defined by [/color][url=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id]Mozilla[/url][/indent][/quote] [ml][ul][li indent=0 align=left][b]File Name:[/b] set the name of the file. Don't include extension like .png or .jpg[/li][li indent=0 align=left][b]Render Option:[/b] select between png, jpeg in which will be the format the image will be rendered.[/li][li indent=0 align=left][b]Scale:[/b] a number indicating image scaling resolution quality. The higher the number the higher the image size and resolution of the element, which will also increase it's storage size.[i] Default is 7.[/i][/li][/ul][/ml] To successfully get the Image element, you will also need to run the [i]Get ElementDomtoImage[/i] Action, which will become available under [i]Element Actions[/i] when a Element Dom to Image element is present.

Next you need to add the Event [i]ElementDOMtoImage is ready [/i]and the Image will be available. To acces it just add an Action where an Image can be added (for example Display Data) and the option This ElementDOMtoImage's Image will be available with the rendered image. For a clear example, please visit Bubble Editor

Setup Instructions

This are step-by-step instructions on how to get the plugin working on any Bubble App.

Documentation

[b]Element to Image (Action)[/b] is the only action given in this plugin. You need to call the action in the Workflow to convert to an image any given element by ID.