Blob image shapes - Forum | JoomShaper
Solved SP Page Builder

Blob image shapes

Asked by Jeroen 2 years ago Last activity 2 years ago

Hi,

From SP Page Builder 5.3.3 it is possible to add custom SVG Shapes.
I use SPPB 5.3.4 on Joomla 4.4.6.
I want to use blob image shapes for some of my images.
But I can't get it to work the way I want.
For example I use this site to generate an blob shape:
https://superdesigner.co/tools/blob-generator?type=Regular
I have also tried other generators.
I get for example the export SVG-code:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M79.5,67Q69,84,52,80Q35,76,20.5,63Q6,50,19.5,35.5Q33,21,52.5,16Q72,11,81,30.5Q90,50,79.5,67Z" stroke="none" stroke-width="0" fill="#4F46E5"></path></svg>

In SPPB I can add this code as a 'Custom SVG Shape' to my image.
I can select the new added shape and I can play with the 'Scale shape' setting.
But I never get it like I wanted it to be.
If the image is the full width of the column.
The shape never cuts out the entire image the full width off the column.
Usually only a part of the svg shape is visible. Playing with the 'Scale shape' doesn't give the desired result.
When I use the standard shapes it works great.

What is the best way to use blob image shapes for my images.

Best regards,
Jeroen

Accepted answer

Marked as the solution
Jeroen Asked this

Hi Ofi,

It can be added in the backend.
But it doesn't behave well in the frontend.
I've made my own solution with classes and the CSS feature 'mask-image' which works well.

Best regards, Jeroen

2 more replies

Ofi Khan Staff

Hello Jeroen

I have tried your Image Shape and it works fine. Please check the documentation:

Image Shape

https://prnt.sc/zfAfAlMnR7K6

Best regards

Ofi Khan Staff

Glad that you have found a workaround. If you do not have further queries, then please close the post by accepting the answer that helped you. It will be then easier to find the solution for the other users with the same issue. There is a button to accept answer after each comment.

Log in to reply.