Conditional visibility for Image & Text

Hey  ,

Maybe this is what You're looking for: https://docs.bravostudio.app/connnec-api/conditional-visibility

Although I have to admin I haven't tried it myself yet and it only mentions singular UI element there so I don't know if it will work with groups for example.

When it comes to the boolen necessary for this to work, you could probalby do it in the backend (e.g. by using Formulas in Airtable).

Hi Lukas,

Thank youuuu for taking time out of your day to comment on this.

So, I was a able to bring the conditional visibility for the image in the feed. But the layout is not resizing automatically. And hence the blank space is shown in the feed. I have attached the screenshot for your reference.
Please do let me know if there is a way to pass this.

Thanks:)

Hi Lukas,

You have any idea on this?

Hey ,

Sorry for the late reply but like I said I have never used conditional visibility before so I needed to play around with it myself first, plus I was pretty busy with my day job.

Anyway - it seems that conditional visibility will only collapse containers (2nd level frames) but in the case of any other layer, it will just hide it without actually removing it from the screen flow.

Obviously, this isn't what you're looking for but it could be still useful for you when you get to the post details screen where you could put post image in its own container and then apply conditional visibility to it (presuming it will be possible for users to click on the post to open it).

Now, when it comes to the listing page there is only one type of component that can have an impact on the container height - [flexo].

So after spending some time with it I think I figured out a way to actually use [flexo] to achieve what you're trying to do here by simply adding <br> tags to the post content and delivering it as an HTML text. Then you use conditional visibility to show post image "behind" those break lines.

I know it's not very clear right now but it's super late where I live so I will try to post more details tomorrow (sorry for that).

Thanks ,

Let me also try to do a workaround on it!

Thanks alottttttt :)

here's my setup:

Figma

How you set up your Figma layers is the most important part of making it work.

Initial design

Below you can see the design without my hack applied:

Here are all the layers:

The order of the layers is very important because [flexo] must be the last layer of its [container]. That's why separator line must be at the top of the post, not at the bottom

I'm using html tag because I needed a way to deliver breaking lines in an invisible way (there are probably other ways to do it but this is what I went for for this test).

What you need to do now is to rearrange layers as if there was no image (without actually removing it) and reduce [container] height to end where [flexo] text ends.

At the end of the above GIF, I'm simply hiding post image a couple of times to show you that text is still behind it but the image should be visible when you send it to Bravo.

How this will work

Idea is that when you have [flexo] as the last layer of the [container], it will change [container] height almost like Figma's "Hug contents" auto-layout do.

Meaning you can add breaking lines to "create space" for the image if there is one and [container] height will change accordingly.

Here's a representation of that in Figma:

Basically - if there is a post image you add breaking lines to the post content to drop it below the image holder (this will also adjust the container height).

And if there is no image, you leave post content as is and use conditional visibility to hide the image placeholder.

Airtable

Here's my Airtable setup:

Title - it's not important for this to work.
Content - this is content submitted by the user.
Image - this is an image submitted by the user.
Has image? - this is Airtable formula that checks if there is an image. It returns true (1) or false (0) that I later use to show or hide images using Bravo conditional visibility. Here's a full formula:

In plain English - if Image exists return true (1), if not return false (0).

Content (formatted) - another Airtable formula where breaking lines are added if image exists. Here's a full formula:

The formatted content is what you actually display to the user.

Here's a screenshot from the Bravo Vision as proof that it actually works 🙂

I know it's a bit hacky but that's the best I could think of for now.

Let me know if that makes sense or if you need any clarification.

AWSOMEEEEEEEEEE , You are a rock star!

Finally we were able to get this done. It would have been very bad if we couldn't get this done....

Thank you for very much Lukas :)

Hey ,

Cool, I'm glad I was able to help 🙂 Btw - the app looks great. Nice job man!

This is a life-saver hack. Awesome 👍 Lukas. Great job