Globally Managed Dynamic Images

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

ImgTable

imgName

imgLink

imgCaption

imgWidth

imgPreview

Copy This Code

Whale

Amazing Whale Image

(via SquareSpace)

500

⁠

Amazing Whale Image

(via SquareSpace)

Concatenate(ImgTable.Filter(imgName="Whale").imgPreview)

House1

Stunning design and views

(via SquareSpace)

300

⁠

Stunning design and views

(via SquareSpace)

Concatenate(ImgTable.Filter(imgName="House1").imgPreview)

House2

Magical Sunsets

(via SquareSpace)

1000

⁠

Magical Sunsets

(via SquareSpace)

Concatenate(ImgTable.Filter(imgName="House2").imgPreview)

House3

Mountain views

(via SquareSpace)

300

⁠

Mountain views

(via SquareSpace)

Concatenate(ImgTable.Filter(imgName="House3").imgPreview)

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

Coda’s Rich Text editor⁠

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.

ImgTable

Add Images to the table:

Place images on other Pages:

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.