How-to
Creating your own Four Corners photo
Adding images
For the primary image and the Related Imagery corner, you will need to copy and paste in image links. You are not uploading a file; Four Corners does not host images.
If you are using an image that already exists online, you can simply right click on that image and select “Copy Image Link,” and paste it into a Four Corners image field.
If the photographs are not already online, you will need to upload them to another site. You can do this by uploading them to the site you will embed Four Corners on. The photos do not have to be published on the site, just uploaded, so that a link can be generated, copied, and pasted.
Retrieving your Four Corners info
If you close the tab or browser you are viewing this website on, the information you’ve input into the Four Corners form will disappear. We provide two ways of retrieving your information. “View your history” and “Import code to edit” can be found on the upper left side of the Create your own page.
View your history
This feature locally saves your progress in your browser. This information only lives on the specific browser you used to make your Four Corners photo and is not stored on any server or shared with any third parties. If you’ve closed your browser, or are visiting the site at a later date, you can open a past entry in Four Corner’s history and automatically re-load all the information you inputted.
Import code to edit
If you want to edit a completed Four Corners photograph, you can copy and paste in the previously generated code to “Import code to edit.” This code originally copied from the “Embed your photo” section when you first made your Four Corners photo and embedded it onto your website. Once you’ve pasted it back in, and click “Import,” this will load all your information back into the form.
Embedding your Four Corners photo
Preparing your site
Before you can embed your Four Corners photo, you need to make your site compatible with the Four Corners functionality. This is done by pasting a link to our JavaScript library and stylesheets into your site’s <head>
tag.
- On the bottom of the Create your own page, expand the “Add Four Corners to your website” section.
- Copy the code.
- Paste this into your website’s <head> tag. Below are instructions for how to do this on popular website platforms.
Adding a Four Corners photo to a page
Finish adding in all information into the Four Corners template. The template automatically generates your embeddable code as you add text and links to each of the corners.
- On the bottom of the Create your own page, in the “Embed your photo” section, copy the HTML code.
- You can paste this anywhere on your site HTML is allowed (be sure you have completed the steps for “Preparing your site”). Below are instructions for how to do this on popular website platforms.
Squarespace
NOTE: You must have a Premium site. The standard site account does not allow you to edit the code or HTML.
- In Pages, go to your homepage. Click “Edit” next to “Homepage Header Content”
- Go to the “Advanced” Tab
- Paste your code into the “Page Header Code Injection” box (this box will be blocked if you do not have a Premium Squarespace account). Now whenever you add Four Corners photos to your pages, they will load properly. If you have another Squarespace site, you must repeat these steps.
- On any page, add a content block. Scroll down to the “More” section. Select “Code”
- Paste in your Four Corners code. Press Apply.