Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-08T16:39:20.373Z
Answers.Text: 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.
Answers.UserDisplayName: Stuart McCoy
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-08T16:07:36.420Z
Answers.LastActivityDate: 2014-09-23T14:41:36.543Z
Answers.LastEditDate: 2014-09-23T14:41:36.543Z
Answers.UserDisplayName: Steve Rowling
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-08T18:30:16.850Z
Answers.Text: I believe you need to have the Slugify plugin installed to use this filter: http://straightupcraft.com/craft-plugins/slugify
Answers.UserDisplayName: Lindsey D
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-08T19:05:18.737Z
Answers.Text: That certainly simplifies things. Still, I probably should learn RegEx.
Answers.UserDisplayName: Stuart McCoy
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-08T19:49:40.867Z
Answers.Text: [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)
Answers.UserDisplayName: Marion Newlevant
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-08T17:08:17.840Z
Answers.LastActivityDate: 2014-09-08T17:08:17.840Z
Answers.UserDisplayName: Marion Newlevant
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-08T15:57:56.283Z
Answers.LastActivityDate: 2014-09-08T15:57:56.283Z
Answers.UserDisplayName: AbbeyDesign
Body: <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>
  
Tags: <templating><filter><css>
Title: Need to create dynamic CSS names for buttons
ThreadText: # 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") %}
  <a href="{{ block.contactLinkUrl | entities }}" class="contact_link {{ block.contactLinkName | lower }}{% if loop.last %} last{% endif %}" target="_blank">
      <img src="{{ block.contactLinkIcon.first().url }}" class="contact_link_image" /><p class="contact_link_text">{{ block.contactLinkName }}</p>
  </a>
  {% 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](http://buildwithcraft.com/docs/templating/filters#replace) 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](https://gist.github.com/boboldehampsink/7354431) 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({' ': -}) }}
  
  ```
  
  
  ---
  
  