Balsamiq Community Discussion

Looking for image placeholder

hello,
I am looking for an image placeholder that looks like the one used in moqups (with mountain and sun).
as far as I can see there’s only an image placeholder with two diagonal lines.
Is there something like this within balsamiq?
I’ve imported it via assets view but then you can’t change the background and the transparency.

thanks,
Sander

Hey Sander,
You can create the placeholder using shapes, as on the picture:
image

If you lazy enough (as I do), just copy the markup below and paste it into your wireframe:

{"mockup":{"controls":{"control":[{"ID":"30","children":{"controls":{"control":[{"ID":"0","h":"120","measuredH":"70","measuredW":"100","properties":{"borderColor":"6710886","borderStyle":"roundedSolid"},"typeID":"Canvas","w":"120","x":"0","y":"0","zOrder":"0"},{"ID":"1","h":"50","measuredH":"32","measuredW":"32","properties":{"borderColor":"6710886","shape":"circle"},"typeID":"RoundButton","w":"51","x":"11","y":"19","zOrder":"1"},{"ID":"2","h":"69","measuredH":"32","measuredW":"32","properties":{"borderColor":"6710886","shape":"triangle"},"typeID":"RoundButton","w":"83","x":"31","y":"26","zOrder":"2"},{"ID":"3","h":"48","measuredH":"32","measuredW":"32","properties":{"borderColor":"6710886","shape":"triangle"},"typeID":"RoundButton","w":"52","x":"11","y":"47","zOrder":"3"}]}},"h":"120","measuredH":"120","measuredW":"120","typeID":"__group__","w":"120","x":"509","y":"981","zOrder":"0"}]},"measuredH":"1101","measuredW":"629","mockupH":"120","mockupW":"120","version":"1.0"}}
1 Like

thank you very much Alexey for answering. This was what I was looking for!
sorry that I didn’t find it out myself, I am a total balsamiq newbie.

Sander

1 Like

sorry, one last question. is it possible to create a triangle shape and make the curves round?

thanks,
Sander

Hi @S_Noorman,

I’m not 100% sure what you are asking? Do you mean a triangle with sides that, instead of being straight, bow outwards? Like this:

image

The built-in Shape won’t support a shape like this but you could create it (and optionally save it as a Symbol for reuse) using 3 lines (i.e. ‘Arrow’ controls).

Here is the JSON for that image above:

{"mockup":{"controls":{"control":[{"ID":"1","typeID":"Arrow","zOrder":"0","w":"74","h":"136","measuredW":"150","measuredH":"100","x":"282","y":"72","properties":{"p0":{"x":74,"y":0},"p1":{"x":0.5030035040881028,"y":-0.08660103454029701},"p2":{"x":0,"y":136},"curvature":"0","leftArrow":"false","rightArrow":"false"}},{"ID":"2","typeID":"Arrow","zOrder":"1","w":"81","h":"136","measuredW":"150","measuredH":"100","x":"356","y":"72","properties":{"p0":{"x":0,"y":0},"p1":{"x":0.5251626292054117,"y":0.09163108113501217},"p2":{"x":81,"y":136},"curvature":"0","leftArrow":"false","rightArrow":"false"}},{"ID":"3","typeID":"Arrow","zOrder":"2","w":"154","h":"21","measuredW":"150","measuredH":"100","x":"282","y":"209","properties":{"p0":{"x":154,"y":0},"p1":{"x":0.5064935064935064,"y":0.13636363636363635},"p2":{"x":0,"y":0},"curvature":"0","leftArrow":"false","rightArrow":"false"}}]},"attributes":{"name":"New Wireframe 2","order":938440.7993319841,"parentID":null},"resourceID":"91F1395B-E38B-42E8-B756-C03192107F60","mockupH":"158","mockupW":"155","measuredW":"437","measuredH":"230","version":"1.0"}}

I fear I am misunderstanding so please get back to me and we can work through it.

hi Alasdair,
thanks for the reaction.
What I mean is that the 3 corners of the rectangle are not straight but curved. So the sides are straight but the corners are rounded.
such as this one: https://www.iemoji.com/view/emoji/1161/proposed/triangle-with-rounded-corners

Sander

Ah right. The built-in Shape control won’t support that so you could either:

  • Create it yourself from lines (and save it as a Symbol for convenient reuse)
  • Import that graphic as an image

The latter is probably the easiest approach.

oke, thanks for your help

1 Like