How to: Bigger profile pictures in NationBuilder

We often come across a seemingly impassible issue with profile pictures in NationBuilder when we're trying to style directories and public profiles. Supporter profiles grab photos from Facebook and Twitter accounts but these are tiny (max 72kb). There are two workarounds to get bigger profiles images:

1. Edit your account settings page to let your supporters upload their own photos. 

Go into your theme files and find "signups_edit.html"

Throw this piece of code in where you'd like it to appear on the page: 

<div class="row">  
<div class="col-md-12">  
<div class="form-group">
<div class="file input optional" id="signup_signup_profile_attributes_image_input">  
<label class=" label" for="signup_signup_profile_attributes_image">Profile image</label>  
<input id="signup_signup_profile_attributes_image" name="signup[signup_profile_attributes][image]" type="file">  
<p class="inline-hints">Image must be square, and can be no larger than 56k.</p>  
</div>  
</div>  

2. Use liquid to change the photos coming from Twitter and Facebook

If supporters have social media info, NationBuilder will grab their profile images directly from Facebook or Twitter. This is great except that they come in as 73px by 73px images which is a drag. 

If you inspect the urls that comes from Facebook and Twitter, though, you'll see that they've got the dimension built right into the file name:

<div class="image" style="background-image: url('http://res.cloudinary.com/nationbuilder/image/twitter/w_255,h_255,c_fill,d_buddy1.png/462095689.jpg')"></div>

We're going to change this up using liquid replace filter: 

{% if signup.profile_image_url contains 'facebook' %}
 <div class="image" style="background-image: url({{ signup.profile_image_url | replace: '=73', '=255' }})"></div>
 {% elsif signup.profile_image_url contains 'twitter' %}
 <div class="image" style="background-image: url({{ signup.profile_image_url | replace: '_73', '_255' }})"></div>
 {% else %}
 <div class="image" style="background-image: url({{ signup.profile_image_url }})"></div>
 {% endif %}

Tada! Check out the results: