Update on inserting images into Exchange Protocols

A while ago, I wrote a post on how to insert images into the main text of Exchange Protocols.

I would like to write a quick update on this, because there is a slightly more elegant solution when trying to insert images that happen to be smaller or larger than the page-width.

1| Prepare your figure. In order for it to show as an image it has to be a jpeg, png or bitmap file. Unfortunately tif files will NOT show as images. The framed page is 560 pixels wide.


2| Assuming that you are in the process of sharing a protocol, upload your figure by going to the “Images and Attachments” page. Notice that both the Name (e.g. Figure 1) and the Title (Overall heading) are required fields.

3| Navigate to the section of the protocol where you would like to add the figure, and click on the link: “How do I enter formatted text, symbols, links and images?”, and expand the section: "URLS for files uploaded via the “Images and Attachments” page.

4| Copy the link for the image that you are interested in inserting including the exclamation marks, and paste it into, for example, the Introduction. (Use “Control-C” for copy, and “Control-V” for paste)

5| Save the changes, and preview your protocol. If the image is displaying perfectly, then your job is done!



Step 1: My uploaded file is not showing up as an image

If you file is not one of the “image file types”, you can usually convert it to one.

For tiff files, my favoured method is to open the image in PAINT (Start > All programs > Accessories > Paint), and then “Save As” a png file.

For pdf files, I usually open the pdf and select the image using the snapshot tool. I then “paste” it into Paint and “Save As” a png file.

Step 5: The images is too wide for the screen or you think that it is too big

You can fix this by using the following bit of html:

<img src=" webaddress for the image " alt="Alternative text for your image" width="560" height="228" />

For example:

<img src=" http://www.nature.com/protocolexchange/system/uploads/1927/original/DSC_2524.JPG?1315930505 " alt="Alternative text for your image" width="426" height="285" />

Will result in:

Alternative text for your image

If you wanted to insert the thumbnail with a link to the main figure, then you could insert the following html into the text: <a href="http://url/for/the/fullsize/image"> <img src="http://url/for/the/thumbnail/image" > </a>

For example:

<a href="http://www.nature.com/protocolexchange/system/uploads/1927/original/DSC_2524.JPG?1315930505 "> <img src="https://images.zapnito.com/tenants/123/stepwise/files/DSC_2524.png " > </a>

Will result in:

I am not going to go through the sums that you need to do to work out the numbers for the width and height of desired output, but there might be some value in mentioning ways of finding out the dimensions of your original image.

– If you are already in PAINT, then you can go to “Image > Attributes”.

– If have the full size image open in your browser, the you can right-click on the image. In Internet Explorer go to “Properties”, in firefox go to “Page info”, and in chrome go to “Inspect element”.