Output collection list as comma separated list

Design help General
1

I found some similar posts, but it seems each author had already figured out something I have not.

I have created a collection of “Services” for a portfolio. I have added a Collection List element for each project which will list the services included in that project.

I would like the services to be output as “Visual Identity, Web Design, Web Development” rather than the column structure I seem to be able to get by default.

From what I understand from the other threads, this involves solving 3 small problems.

  1. I need to “collapse” the column structure so that the Services each appear right up against each other.

  2. I need to add a comma and a space between elements.

  3. I need to repress the comma and space after the final element.

There seem to be multiple ways to solve the second and third, but I am still stuck on the first.

Any help would be greatly appreciated!

Thank you so much

William

Webflow_-_21_Day_Design_Portfolio
Webflow_-_21_Day_Design_Portfolio1920×639 62.8 KB

Here is my site Read-Only: LINK

2

The first two points are easy.
Set the following setting to the Collection Item:

  1. Display = Flex, Align = End (bottom)
  2. Padding (right only) = 5px (remove 10px default left padding)
  3. Width = AUTO (override default)

Add another text block to the Collection Item and write “,”

This should do the trick.

Removing the “,” from the last item will require some custom code.

1 Like
3

You can also create the commas using CSS.

Suppose your collection list has a class of My Collection;
You can drop in an HTML embed with this style;

<style>
.my-collection .w-dyn-item:not(:last-child) p::after {
  content: ", ";
}
</style>

This will append a comma after each paragraph, except the last one.

Also, I’ve found flex has issues when the screen width gets too small, the content gets chunky with its wrapping. You may have better luck setting the Collection Item and the inner text element to a layout of inline.

image

Codepen of the CSS here;

1 Like
4

I am new to Webflow @memetican Could you please tell me where I go to add the HTML with that CSS snippet for the commas?

5

Hey William, anywhere on your page, just drop an HTML Embed, and paste that code it.
If you want it on multiple pages, it’s bet to put into your navigation symbol or your footer symbol, which you’ll have throughout your site.

The reason to put it on the page in an HTML Embed, rather than pasting it into your Site Custom Code, is that in an HTML Embed the designer will display it. That lets you see what it will look like while you’re working on it.

6

I have tried to replicate this in my first actual site build (the other was in a sample from a tutorial). I was limited then because I was still working with a free account.

I am having trouble now because the individual items are wrapping individually rather than all together. They are kind of coming out as if they are in individual columns.

Monosnap Webflow - Lemonsnap wrapping wrong 2022-12-07 01-37-42
Monosnap Webflow - Lemonsnap wrapping wrong 2022-12-07 01-37-42938×676 278 KB

The commas worked perfectly, but is it possible to get these to wrap all together like a continuous line of text?

E.g. “branding, graphic design, web design, web development, web maintenance”

Note, I used text blocks here rather than paragraphs trying to fix the problem but it actually seems to have made no difference.

Here is the read-only link

7

You could set the home-portfolio-service-collection to display block and then set the collection items to display: inline-block (or set both the collection item and the text block to inline)

image

Extra punctuation bonus:

Give your elements the following class names:

image

Change your CSS to:

	.home-portfolio-service-collection-item:after {
  content: ', ';
  }
  .home-portfolio-service-collection-item:last-child:after {
  content: '.';
  }
  
  .home-portfolio-service-collection-item:last-child:before { content: "and "; }
  .home-portfolio-service-collection-item:first-child:before { content: ""; }

</style>

and set both the collection item and the text to inline |A| will give you an Oxford comma and a full stop.
image

8

Thank you, that did it perfectly!