<p>You can chain filters to achieve what you want. <a href="http://buildwithcraft.com/docs/templating/filters#replace" rel="nofollow">The example for the twig replace filter in the Craft docs</a> shows this in action.</p>

<p>So you could replace:</p>

<pre><code>{{ block.contactLinkName | lower }}
</code></pre>

<p>with:</p>

<pre><code>{{ block.contactLinkName | lower | replace('/ /', '-') | replace("'","") }}
</code></pre>

CC BY-SA 3.0
2014-09-08T16:39:20.373Z
This worked for the most part. One of these days I'm going to learn RegEx but I was able to change the first replace to look for only spaces. As written this removes a lot more then just spaces. I'll look into a way to find punctuation and update this soon but for now this works.
Stuart McCoy
CC BY-SA 3.0
2014-09-08T16:07:36.420Z
2014-09-23T14:41:36.543Z
2014-09-23T14:41:36.543Z
Steve Rowling
<p>I would use the <a href="https://gist.github.com/boboldehampsink/7354431" rel="nofollow">slugify</a> twig filter:</p>

<pre><code>{{ block.contactLinkName | slugify }}
</code></pre>

<p>It will handle apostrophies, spaces, and anything else that might come along.</p>

CC BY-SA 3.0
2014-09-08T18:30:16.850Z
I believe you need to have the Slugify plugin installed to use this filter: http://straightupcraft.com/craft-plugins/slugify
Lindsey D
CC BY-SA 3.0
2014-09-08T19:05:18.737Z
That certainly simplifies things. Still, I probably should learn RegEx.
Stuart McCoy
CC BY-SA 3.0
2014-09-08T19:49:40.867Z
[Some people, when confronted with a problem, think "I know, I'll use regular expressions." Now they have two problems.](http://en.wikiquote.org/wiki/Jamie_Zawinski)
Marion Newlevant
CC BY-SA 3.0
2014-09-08T17:08:17.840Z
2014-09-08T17:08:17.840Z
Marion Newlevant
<p>You could use the twig replace</p>

<p><a href="http://twig.sensiolabs.org/doc/filters/replace.html" rel="nofollow">http://twig.sensiolabs.org/doc/filters/replace.html</a></p>

<pre><code>{{ block.contactLinkName | replace({' ': -}) }}
</code></pre>

CC BY-SA 3.0
2014-09-08T15:57:56.283Z
2014-09-08T15:57:56.283Z
AbbeyDesign
<p>This may not be the most efficient approach for this specific case but I'm trying to learn how this might be done for other similar problems I might run across in the future so bear with me here.</p>

<p>I have a Global that creates links to social media sites on my profile page. My fields include icon (asset), name (text), url (text), and color (color). I have included the following at the top of my template:</p>

<pre><code>{% set buttonCSS %}
    {% for block in contactLinks.contactLinks.type("contactLink") %}
    .{{ block.contactLinkName | lower }}:hover {
        background-color: {{ block.buttonColor }}
    }
    {% endfor %}
{% endset %}

{% includeCss buttonCSS %}
</code></pre>

<p>This generates dynamic styles for each button at the top of my profile page so I can add links. My template then generates the links:</p>

<pre><code>{% for block in contactLinks.contactLinks.type("contactLink") %}
&lt;a href="{{ block.contactLinkUrl | entities }}" class="contact_link {{ block.contactLinkName | lower }}{% if loop.last %} last{% endif %}" target="_blank"&gt;
    &lt;img src="{{ block.contactLinkIcon.first().url }}" class="contact_link_image" /&gt;&lt;p class="contact_link_text"&gt;{{ block.contactLinkName }}&lt;/p&gt;
&lt;/a&gt;
{% endfor %}
</code></pre>

<p>Now, for the most part this works since social media sites tend to be one word but when I tried to use "Let's Talk" for my email link I run into problems with the CSS. What's the best way to strip the apostrophe and spaces from my class names?</p>

<templating><filter><css>
Need to create dynamic CSS names for buttons
# Need to create dynamic CSS names for buttons

(Asked by: username_0 on 2014-09-08)

This may not be the most efficient approach for this specific case but I'm trying to learn how this might be done for other similar problems I might run across in the future so bear with me here.
I have a Global that creates links to social media sites on my profile page. My fields include icon (asset), name (text), url (text), and color (color). I have included the following at the top of my template:
{% set buttonCSS %}
    {% for block in contactLinks.contactLinks.type("contactLink") %}
    .{{ block.contactLinkName | lower }}:hover {
        background-color: {{ block.buttonColor }}
    }
    {% endfor %}
{% endset %}

{% includeCss buttonCSS %}

This generates dynamic styles for each button at the top of my profile page so I can add links. My template then generates the links:
{% for block in contactLinks.contactLinks.type("contactLink") %}

    {{ block.contactLinkName }}

{% endfor %}

Now, for the most part this works since social media sites tend to be one word but when I tried to use "Let's Talk" for my email link I run into problems with the CSS. What's the best way to strip the apostrophe and spaces from my class names?

**Tags:** templating, filter, css


---

## 3 answers

### Answer by username_1 on 2014-09-08. Score: 2 | Accepted answer

You can chain filters to achieve what you want. The example for the twig replace filter in the Craft docs shows this in action.
So you could replace:
{{ block.contactLinkName | lower }}

with:
{{ block.contactLinkName | lower | replace('/ /', '-') | replace("'","") }}

> **Comments:**
> **username_0**: This worked for the most part. One of these days I'm going to learn RegEx but I was able to change the first replace to look for only spaces. As written this removes a lot more then just spaces. I'll look into a way to find punctuation and update this soon but for now this works.  

---

### Answer by username_2 on 2014-09-08. Score: 3

I would use the slugify twig filter:
{{ block.contactLinkName | slugify }}

It will handle apostrophies, spaces, and anything else that might come along.

> **Comments:**
> **username_3**: I believe you need to have the Slugify plugin installed to use this filter: http://straightupcraft.com/craft-plugins/slugify  
> **username_0**: That certainly simplifies things. Still, I probably should learn RegEx.  
> **username_2**: [Some people, when confronted with a problem, think "I know, I'll use regular expressions." Now they have two problems.](http://en.wikiquote.org/wiki/Jamie_Zawinski)  

---

### Answer by username_4 on 2014-09-08. Score: 1

You could use the twig replace
http://twig.sensiolabs.org/doc/filters/replace.html
{{ block.contactLinkName | replace({' ': -}) }}


---

