How to set placeholder image when building plugin elements?

This is a complete beginner plugin builder question… but how do I get a placeholder image to appear when a user drags my plugin element on screen in edit mode?

I’m currently stuck with this rather ugly preview image

Screenshot 2021-12-21 at 07.49.04

2 Likes

Hey,

You can take the following code as an example:

function(instance, properties) {

    let height = properties.bubble.height;
    let width = properties.bubble.width;

    let image = '//s3.amazonaws.com/appforest_uf/f1569940754281x739368442489696500/whatsapp.png';

    if (height > width) {
        height = width
    } else if (width > height) {

        width = height
    }

    instance.canvas.append(`<div style="position: fixed; top: calc(50% - ${(height / 2).toFixed(0)}px); left: calc(50% - ${(width / 2).toFixed(0)}px); height: ${height}px; width: ${width}px; background-size: cover; background-position: center; background-image: url(${image})"></div>`)
}

Plugin:

2 Likes

Thanks so much for this @lottemint.md - really helpful!

I’m on the right path - I can now get a blank preview rather than the “no plugin preview available” text, but I still can’t get my chosen image to appear.

I’ve uploaded an image to the Public Logo image section and then referenced that in my code (basically replaced the image URL in the code you pointed me towards above).

Any thoughts on what might be wrong with it?

Screenshot 2021-12-22 at 08.18.29

Another thing I noticed is I’m getting the “no plugin preview available” when I use the whatsapp widget plugin you referenced above. So maybe it’s a separate issue?

Screenshot 2021-12-22 at 08.15.28

1 Like

The following code works for me with one of my plugins. You will need to place it in the Preview section of the editor.

	let box = $('<div id="preview-id"></div>');  
	box.css("height", properties.bubble.height)
	box.css("width", properties.bubble.width)
	box.css("background-image", "url(insert your URL here)")
	box.css("background-repeat", "no-repeat")
	box.css("background-position", "50% 50%")
	box.css("background-size", "cover")
  	instance.canvas.append(box); 

Notes:

  1. I don’t think it is necessary to give the div an Id but I did so for some reason that I can’t recall now.
  2. I uploaded an image in the shared assets section of the plugin editor and used the generated URL , but you should be able to use a URL for any publicly available image.
2 Likes

Thanks for this @louisadekoya ! :slight_smile:

1 Like

Here’s 1 solution:

var img = document.createElement("img");
img.src = "//dd7tel2830j4w.cloudfront.net/f1656414711539x986590310833129100/vecteezy_focus-icon-vector_6082472.jpg";
img.style = 'width:100%;height:100%;opacity:0.4;';

instance.canvas.append(img)