Adding a file link with insert/edit file

Soapbox makes it easy to add links to files in your content items and custom modules. Whether the file has already been uploaded to the server, or you are inserting a new file that hasn't been linked to before, you can use the "Insert/Edit File" button in the administrator to easily add links to files in your pages. Example file types include pdf's, word documents, excel files, etc. Here's an example of a link to a pdf:



These instructions will also describe how to link images to files.

To begin, opening the content item (or custom module) that you would like to contain your link to a file. It's often easier if you've already added the article/module text, including the text or image that will link to your file.

Once you're in the editor, and your text is ready to go, highlight the text (or select the image) that you'd like to link to a file, and click the "Insert/Edit File" button, shown here:

You should see a popup that looks like this:

You can think of this popup as two distinct halves. The top half (Link and Options sections) includes parameters for how you can change how your file link appears in the content item. The bottom half (browse section) is where you would select your files/add new files/edit/move existing files on the server. To put this another way, the top half is for file link settings as they relate to the content item itself (the individual instance of the link), and the bottom half is related to the actual files on the server.

From this one window, we can link to an existing file from the server, OR, you can upload a new file to the server, then insert a link to that file into your content item. For this article, we'll first walk through adding new files to the server, then how to create links to them. If your file is already on the server, please skip to the next section.

ADDING NEW FILES TO THE SERVER

To upload a new file to your documents folder, you'll want to begin by opening the "Insert/Edit Image" window, as described above.

For now, focus on the bottom half of this popup window, the 'browse' section. On the left, where it says "Folders". The insert/edit file window defaults to your documents folder, which displays as "root" in this window. You may have other folders displaying here, or you may just have all of your documents in the root folder. Either way, wherever you are in the "Folders" area is where we'll be uploading our files to, so be sure you're in the folder you want to be.

Now click the upload button shown here:

This will pull up the file uploader popup, shown here:


From here, you can click "Add" to select files from your computer to add to the file uploader Queue. This works just like attaching a file to your email. You'll notice that once you select a file from your computer, it will be added to your 'Queue'.  This allows you to go back to select multiple files to add all at one time.

[Note:] We recommend you use all lowercase letters and underscores instead of spaces in your file names, it can be helpful for browsers to render the links properly. You can rename files once you've added them to your queue by selecting them and clicking the blue rename button to the right of the filename in the queue, shown here:



Once you've selected your file(s) to upload, click upload

When your files are done uploading, they will all appear with green check marks next to them, you can now click the X in the top right of the uploader window to close this window, or "Close"

Now that you're back to the main "Insert/Edit File" pop up screen, you should see your new files in the folder that you placed them in. Confirm that they are there, then move on to the next step.

LINKING TO YOUR FILE IN YOUR CONTENT

Once you've uploaded your file(s), or if you skipped the previous step because your file was already on the server, now you can create your file link.

As described above, be sure you've highlighted the text that you would like to turn into a link, or selected the image that will be linked, and click the 'insert/edit file' button.

Once you're in the "Insert/Edit File" window, find your file that you'd like to link to in the browser window on the bottom.

Click the file name to select it.

If you began this process by highlighting text that you wanted to make into a link, you'll get a popup that asks "Replace file link text with file name?". This is meant to allow you the choice of whether you'd like the file name to display instead of the text you started with. Click "No" to keep the text you started with. If you click "Yes" it will replace your text in the "Text" field, under options, with the file name. If you did not start with some highlighted text, or you are linking an image to this file, you will not see this prompt.

At this point, if you are linking an image to a file, you are all set, just click "Insert" at the bottom and you're good to go.

If you are inserting a text link to a file, you could be finished here if you want (if so, click "Insert" at the bottom of the window). However, further customizations are available as well. You can:

• Check off the various boxes under "Layout" to configure how your link displays:
  • Include an icon that will sit next to the link text
  • Include the file size as part of the link text
  • Include the date with the link text
• There are also date and size classes, but unless these have been specifically configured for your site, it's unlikely these will function.
• Lastly, you can change the "Target" to change what happens when the link is clicked. For file links, it's often desirable to set the target to new window.

You may want to play around with the different settings and see what you like. Once you're set, you'll just need to click "Insert" at the bottom of the window and then "Save" in the upper right.

It's always a good idea to test your file link on the front end to be sure that it is working properly.