Skip to content
Globally Managed Dynamic Images
Share
Explore
_data

i_Images

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)

ImgTable
0
imgName
imgLink
imgCaption
imgWidth
imgPreview
Copy This Code
1
Whale
Amazing Whale Image
(via SquareSpace)
500
Amazing Whale Image
(via SquareSpace)
Concatenate(ImgTable.Filter(imgName="Whale").imgPreview)
2
House1
Stunning design and views
(via SquareSpace)
300
Stunning design and views
(via SquareSpace)
Concatenate(ImgTable.Filter(imgName="House1").imgPreview)
3
House2
Magical Sunsets
(via SquareSpace)
1000
Magical Sunsets
(via SquareSpace)
Concatenate(ImgTable.Filter(imgName="House2").imgPreview)
4
House3
Mountain views
(via SquareSpace)
300
Mountain views
(via SquareSpace)
Concatenate(ImgTable.Filter(imgName="House3").imgPreview)
5
House4
Materials integration
(via SquareSpace)
300
Materials integration
(via SquareSpace)
Concatenate(ImgTable.Filter(imgName="House4").imgPreview)
There are no rows in this table

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
imgName
column.
(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: “
https://images.squarespace-cdn.com/content/v1/
[34jhg4hg3kjg....]
/image-name.jpg
Where the
[34jhg4hg3kjg....]
is a very long list of numbers and letters.
And
/image-name.jpg
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
https://.....jpg
.
(but do NOT copy the double quotes “)
Paste the copied image URL into the
imgLink
column. The image should display immediately if you’ve copied it correctly.
[Optional] Add a caption for the image in the
imgCaption
column. If you want to format the caption, as in the examples, click twice in the
imgCaption
cell and then click the double arrows that appear in the lower right column. That opens
.
Select a width in the
imgWidth
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.
The
imgPreview
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
CMD c
.
(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
Formula Editor.
Immediately paste the code you copied from step 8. above.
Hit
Return
or
Enter
and the image should display immediately, at the width you selected in the
imgWidth
column.

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.