If no image upload, collapse text?

I am trying to create a form that allows a user to upload an option image, a headline and body copy.

If an image, headline, and body copy is uploaded, I’d like to display the following

( Header )
( IMG )
( H1 )
( BODY )
( Footer )

But sometimes, images aren’t necessary, and when an image is NOT uploaded, I’d like to collapse the space where the image would have gone, so the ( H1 ) rises to the top of the screen. I haven’t found a way to make this work.

This is what I’d like the output to be

( Header )
( H1 )
( BODY )
( Footer )

I’d like to avoid two types of post methods if possible. Any pointers?

Hi Charles, welcome to the forum.

I would suggest changing the visibility options for each of your items.

In this example I am using an input field in a users list. In the options for the input field, click the 3 dots and select ‘change visibility’


Then make the settings as below…


Basically what this is saying is, IF the current item (whatever it is, in my case it is a users username, for you it could be a header or image or H1, BODY, whatever you want really) is NOT EMPTY then it will be VISIBLE and if it IS EMPTY then it will be hidden.

I hope this helps, please let me know how you get on :slight_smile:

Hey there @crmorris2 thanks a ton, especially for taking the time to share screenshots.

I had actually tried that earlier and it certainly works in part.

But the result is wonky. The image placeholder no longer renders, and the Header & Body below do rise up, but way too far. Any suggestions in terms of defining a “ceiling” for the Header and Body?

FWIW, if I disable the app bar at the top, you can see the Headline and Body to collapse vertically, but instead of anchoring just below the app bar, it’s being lost just behind it.

Hi Charles.

A couple of solutions…

If you want a placeholder image to show, you can add a placeholder image as seen below…

but I thought you wanted to hide the image altogether if there was no image?

To address your spacing issue. The way I would do this is as follows…

  1. Add a transparent rectangle below the image as you can see in the below screenshot.

    You can set the rectangle to be transparent by changing the alpha channel from 100 to 0 in the options as seen here…

  2. Set the visibility of the rectangle to only show if the image field is empty

  3. Test in preview mode if the spacing is correct and adjust the height as needed

Please let me know if you have any other queries :slight_smile: