This table demo currently uses images from SquareSpace’s CDN and takes advantage of their URL-based API to dynamically control the width of the image.
(the height will be scaled automatically based on the width)
Add Images to the table:
Create a new Entry (row) by clicking the
button at the bottom of the table.
Enter whatever name you would like in the
(best to keep it very short and unique)
Find the image you want to use from a SquareSpace website:
Copy its URL. You’ll have to right-click on the image and look for “
Copy image address
(or whatever it says in your browser)
It will look something like: “
is a very long list of numbers and letters.
is the name of the originally uploaded image.
(it’s possible it could also end in “.png” instead of “.jpg”)
You’ll need everything between and including the
(but do NOT copy the double quotes “)
Paste the copied image URL into the
column. The image should display immediately if you’ve copied it correctly.
[Optional] Add a caption for the image in the
column. If you want to format the caption, as in the examples, click twice in the
cell and then click the double arrows that appear in the lower right column. That opens
Select a width in the
column from the dropdown. Only image widths supported by SquareSpace’s API are included.
NOTE: I excluded SquareSpace’s 1500px wide image option because Coda’s content width doesn’t allow it to display anyway.
column will show a small preview of how the Image and Caption will look.
(You can drag this column to resize it to any width you like. That won’t affect the image display size on other pages)
Tab to or select the
Copy This Code
cell, a blue outline will show it’s selected. Then just copy
(you don’t have to highlight the actual text to copy it. Just click ONCE in the cell to get the blue outline and copying will copy the entire contents of the cell.)
Place images on other Pages:
Using the code you copied in step 8. above, go to the Page where you want the image and place your cursor where you want the image.
Start by typing an equal sign,
which will open Coda’s
Immediately paste the code you copied from step 8. above.
and the image should display immediately, at the width you selected in the