Blob Image Shapes - Question | JoomShaper

Blob Image Shapes

J

Jeroen

SP Page Builder 1 year 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="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

0
3 Answers
J
Jeroen
Accepted Answer
1 year ago #164925

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

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 1 year ago #164731

Hello Jeroen

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

Image Shape

prnt.sc/zfAfAlMnR7K6

Best regards

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 1 year ago #164973

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.

0