Links and Downloads

Need to quickly update a PDF download, or easily manage a list of external links? MagicEdit makes it easy to add editability to links by simply adding the magicedit attribute to the link:

  <a href="myFile.pdf" magicedit>Download your PDF here</a>

MagicEdit will then expose an Edit button to the content manager that enables uploading a file or entering a URL, as well as being able to edit the linked text itself.

A Simple Use Case

Suppose you have a real estate listing page that has the description and a gallery of images that showcase a particular property. Real estate agents also typically create a flier or brochure in PDF format that potential buyers can download and print.

As a web designer, you would then design the page as usual. Create your placeholder text areas, drop in your image gallery, and so on. Then, go ahead and create a link on the page that looks something like this:

  <a href="brochure.pdf">Printable property brochure</a>

You could even upload (using FTP) a generic file called "brochure.pdf" that has the real estate agent's information. The idea now is to let the agent update the file as necessary for a particular property. To enable link and file management, simply add the magicedit attribute to the link, and as usual, we'll add the me_name attribute (not required but is a best practice):

  <a href="brochure.pdf" magicedit me_name="brochure">Printable property brochure</a>

This will result in a link with a little edit button as shown in the image to the right. As usual, the edit button will only appear when the content manager is logged in. Clicking the edit button opens up the MagicEdit panel for managing the link (see image below). The content manager can now select a new file to upload, and the system will take care of storing the file and updating the link accordingly.

Link management panel

Linking HTML Elements

In some cases you might want to place something other than text inside the anchor tag. If MagicEdit detects HTML tags inside the <a>, it simply will not expose the "Link Text" field in the link management panel. In general, it is possible to nest other MagicEdit elements inside an anchor, but always thoroughly test any implementation. Modifications to the button positioning CSS may be required for the editing to be functional in these cases.


You can specify whether the link editor will be for links, downloads, or both by using the me_edit attribute. If you want to specify that an href can point only to a user-inserted URL, use me_edit="url". Similarly, if you want to require a link to point only to a file that the content manager has to upload, use me_edit="file". The default option is to allow the content manager to upload a file or link to a URL, which can also be set using me_edit="file,url" or me_edit="url,file".

Advanced Features

Need the size of the uploaded file, or have a need to display the file name? MagicEdit provides a few advanced features for linked files just for that purpose.

Getting the File Size

You can use a ClearLake marker to retrieve the size of a file and display it for users. This is a good idea for large files so site visitors know what to expect when they click to download a file. Here is an example of how to get the file size for a link you named "myFile" (by using me_name="myFile"):

  <cl_marker cl_binding="$myFile.file.bytes.humanReadableBytes">

Using the humanReadableBytes method tells MagicEdit to print the size in the typical way people read file sizes: B, kB, MB, etc.

Getting the File Name

Displaying the file name is just as easy as showing the size. Just use this marker:

  <cl_marker cl_binding="$myFile.file.filename">

Forcing Download

MagicEdit by default tells the browser to load certain file types right in the browser. Examples of these types of files include images and PDFs. To force these files to be downloaded instead of just displayed in the browser, use the me_download attribute in the link like this:

  <a href="file.pdf" magicedit me_name="file" me_download>Download the File!</a>