[Resolved] social icons continue

[Author]

Posts

[peterV-17]

Tell us what you are trying to do?
You helped me kindly with this issue: https://toolset.com/forums/topic/split-showing-social-icons-on-artists-page/

But the problem is, that if a userdoes not fill out all the available social URL's , there are blanks between the icons on the front-end
I would like them to automatically line up and fill in the blanks. See attached image.
Perhaps you can tell me a better way to do this?

I need same now on my other project site: hidden link
Thank you!

[Nigel]

Hi there

Reading the other thread, it seems that you are using the Single Field block to output the social icons and links.

In which case you would need to wrap each Single Field block in a Conditional block that tests whether the field you will use is not empty (i.e. it has a value to generate the icon and link with).

See https://toolset.com/course-lesson/using-toolset-conditional-block/

[peterV-17]

Hi, yes that is what i do, and that works. But the problem is that i have 5 social media options for each user, instagram, youtube, twitter, facebook, twitter.

But when someone does not fill in, let's say, Youtube, there will be a gap between instagram and twitter. (See attached image in first post)

[peterV-17]

i would like the icons to align automatically if a user does not enter all social media links

[Nigel]

I guess you must be arranging the icons inside a grid, and you will have empty grid cells when there is nothing to output. Would that be right?

(I can't tell from your sites, they are not public.)

You need to be outputting the icons as part of the flow so that they don't take up space if they don't exist.

The core Row block lets you add multiple child blocks which will be displayed in a row. So you can add your conditional blocks as child blocks of a Row block, and if some of them don't output anything, the others will close the gaps.

[peterV-17]

Oh! Thanks a lot, that worked!