[SOLVED] Pinning an Image to Other Content (e.g. Card)

[AliGW]

I am looking for advice.

I am aware of badges, but have discovered that they don't work as I would have liked with a bespoke image. Is there another way to pin a transparent .png to the top right of another object (e.g. a card)? If so, can it be made responsive?

Such a lot to learn with this program and so much documentation that it's often hard to know where to start looking!

Thank you.

[Pablo]

I'm sorry, this is not possible.

[AliGW]

OK - thank you for your reply, Pablo.

I notice that badge dimensions are square, which is the root of the problem with my custom image (which is in rectangle format). Is there any documentation about best practices when using one's own images in badges? Can a badge be rectangular?

No worries if not.

[Pablo]

Currently only square images are supported.
But if you really want a rectangle then maybe you can a transparent border to the image with help of an image editor?

[AliGW]

Thanks for the idea. I was wondering whether I could somehow stack two badges on top of each other using offset settings - the image has been created in Affinity Designer, so could easily be converted into two square images. If I did it the way you suggest, it would be too small, I think.

I shall have a play another day - if I manage to fudge something, I'll share it here.

Thank you again.

[Pablo]

You cannot stack two badges.

[AliGW]

OK - thanks.

[wwonderfull]

I think the rectangle badge may be possible but need demo project for experimentation.

[AliGW]

I’ll put something together tomorrow. Thanks!

[AliGW]

@wwonderfull

Thank you for taking a look at this. The ZIP contains:

- the WBS file (just the page concerned, cut-down to a bare minimum)
- the rosette in PNG format
- a screenshot showing where I would like it to appear (Aim.jpg)

I'll be interested to see if you are able to make anything work. I am not worried about how it might look on small mobile screens - I would probably set a breakpoint with the rosette hidden, anyway. As long as it will work on laptop and desktop screens for now (if it's possible).

Thank you again - I appreciate your willingness to have a play with it.

https://we.tl/t-5X0lmbo9Jn

[wwonderfull]

I see It could be done in many ways I will do some tests and see how it goes even in responsive way.

[AliGW]

This is very kind of you. I thought there must be a way. Looking forward to seeing the options (but there's no rush - absolutely in your own time).

[wwonderfull]

This is very kind of you. I thought there must be a way. Looking forward to seeing the options (but there's no rush - absolutely in your own time).

Can you contact from below I think there is a something to discuss about the card and the content and the columns.

[AliGW]

I would rather keep the discussion here for the benefit of all. What do you need to know?

[wwonderfull]

The grid you have has huge amount of space because of 2 columns. What you have done is fine in general, but the same thing can be done in a different way yet responsive. But for now, I did not adjust that so the solution will stick to it. But if the layout grids column order changes then the solution is still possible but would need a different solution. The same thing can be done in 3 to 4 ways, but it all depends on the design the order and custom adjustment requirements. I already have 2 ways of doing it so have sent solution 1.

here is the demo:
https://wormhole.app/qp4ZM#rGksbVylIPy63ai_vTKU9Q

[AliGW]

Thank you very much.

You will know that I am new to WWB, and this is my first site with it (I come from the WebPlus stable). I am therefore open to suggestions regarding different layouts, although you do not have all of the items on the page (only those relevant to this question). Below these items there are three columns of cards.

I would really appreciate it if you would share all possible solutions that you have found with me, as reverse engineeering such things is one of the ways I learn. In your own time, of course.

I shall have a look at what you have shared here a litlle bit later - unfortunately, I need to break off now to do some jobs, but I shall be back later on today. I'll let you know once I've had a chance to look at it.

Thank you!

PS It looks great, but I don't have time to work it all out just now. I shall look forward to any other possibilities that you have come up with. Thanks!

[AliGW]

So I have it working in my real .wbs file and it's great. I understand how the two elements work together at a basic level and am able to swap the rosette for a different png file, etc. I am going to have a further play with it tomorrow and try to fully understand the HTML snippet - the only thing I haven't worked out so far is hoq to nudge the rosette a bit more to the right and up a bit, but when I come to it fresh tomorrow I might have a eureka moment. If not, I'll come back and ask here.

For now, thanks again for your kind help. One way or the other, I'll sign this thread off later tomorrow.

[wwonderfull]

There is also @media for adjusting it on breakpoints. Be sure to adjust that depending on the content. If the same thing was done on the card, it would need a different approach.

But I think it is also possible using the section tool. But that would need more adjustments on breakpoints I think.

[AliGW]

I’m sorry - I didn’t understand any of that! You’re going to have to be a bit more explicit, please.

[wwonderfull]

Just like the card tool there is a tool called sections tool. even that can do the corner badge trick. You can try it out too.

[wwonderfull]

The easiest way is the built-in feature pablo gave in wwb 19 which is to use the badge tool. It won't even need any custom codes. But only one badge can be set for any targeted object. So, there are built in ways and then there are custom ways of doing it.

[AliGW]

A new dawn and a good mug of coffee and I have worked it all out. I am sure that I shall discover different ways of doing this as I get to know WWB better, but for now, I am very happy with the result, so thank you once again for your kind assistance.

I have yet to sort out breakpoints for smaller mobile viewports, but that can wait - I am very happy with it as it is for now.

Thanks again.