COLLABORATORY USAGE GUIDE

This is a meta document for references on how to use certain functions of this website.

hero images

Hero images must be added to pages via a Code Block

To update the image, upload a photo to the "photo resources gallery" and get its url. You will probably have to look for its thumbnail on the photo resources page itself, and copy the image url. 

The image url will likely have something like ?format=1000w at the end of it. For the purposes of the hero image, remove this.

 <div class="figure">
   <div class="figoverlay">
    <div class="figcaption">
      <h1 class="front">
        hero image text
      </h1>
     </div>
    <img src="https://static1.squarespace.com/static/56313528e4b0804bf422bb8c/56313a0fe4b0ebf91a66ed9e/5664b73be4b08333d1ffb89a/1449441084455/collab3.jpg" />
</div>   </div>
            

The above code produces the following hero image

hero image text

To replace the image, replace the url in quotations, keeping the quotations. The text "Hero Image Text" can be changed to your liking.

Moving a Hero Image

To move a hero image around we'll need to do something like this:

 <div class="figure">
   <div class="figoverlay">
    <div class="figcaption">
      <h1 class="front">
        hero image text
      </h1>
     </div>
    <img src="https://static1.squarespace.com/static/56313528e4b0804bf422bb8c/56313a0fe4b0ebf91a66ed9e/5664b73be4b08333d1ffb89a/1449441084455/collab3.jpg" style="margin-top:-150px"/>
</div>   </div>
            

The above code produces the following hero image:

hero image text

The important addition to this code is style='margin-top:-350px' To get the exact cropping you desire play around with changing the number but be sure to keep it a negative number. It is also important to check how these images are displayed in various sized browser windows as some margins may cut off images as they are resized for the page.

Social media links

For profile pages we can insert social media links using a Code Block as well. This will be displayed as small logo icons of the social media network.

<a href='http://facebook.com/username' class='social_facebook'>&nbsp;</a>
<a href='http://twitter.com/username' class='social_twitter'>&nbsp;</a>
<a href='http://plus.google.com/username' class='social_google'>&nbsp;</a>
<a href='http://instagram.com/username' class='social_instagram'>&nbsp;</a>
<a href='http://link/to/linkedin/profile' class='social_linkedin'>&nbsp;</a>

The above produces:

To populate the social media links for a user, simply grab the line of the corresponding link to a network, and update what is in quotations with a link to that individuals social media account. 

For example,

<a href='http://twitter.com/alexanderfine' class='social_twitter'>&nbsp;</a>

Will produce

These social media links will automatically be displayed inline as blocks next each other.