`Embed` and `Image` formulas don't work in `Concatenate` formulas

[Connor_McCormick]

`Concatenate(Image(“url”, width, height)) doesn’t apply width and height settings

Sample doc

The Goal

My goal with the use of the combination of the Concatenate and Image formula is to autogenerate a section of text based on the contents of several tables.

You can see my writeup of my design goals here with a sample doc that demonstrates what I want:

How best to generate text (a document) from a table?

Hello everyone, My current goal is to use Coda to automate the creation of Scope of Work documents. For each of my prospective customers I want to: Input information about them into tables Select a particular customer to populate a Section that contains their scope of work which should contain: a. One off items like their name, the date, and my contact information b. FormulaMap generated items. For example, a customer may have multiple security locations, and each location may require mult…

[Connor_McCormick]

This bug is currently blocking me from completing a project in Coda and I’m considering switching away. Should I switch or is there a possibility this could be resolved in the nearterm?

[Jean_Pierre_Traets]

Dear @Connor_McCormick, I am sorry to understand that you are disappointed, let’s see if I can offer some relief

I have update the formula a bit, assuring that you end with jpg", at the end and I was now able to show a size of “300, 250”

I don’t have the competency about why, but it seems that the end of the original formula made it impossible to adjust the size of the beautiful picture

Image("https://images.squarespace-cdn.com/content/v1/5a5906400abd0406785519dd/1552662149940-G6MMFW3JC2J61UBPROJ5/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/baelen.jpg", 300, 250)

[Connor_McCormick]

Hi @Jean_Pierre_Traets, thanks for your response.

I’m not sure i understand what you’re saying. The size of the image has not changed in the second example. It only successfully changes in the first example.

The difference between the two:

• Image("https://image.url", 600, 500) -> Success!
• Concatenate(Image("https://image.url", 600, 500)) -> Fail

[Jean_Pierre_Traets]

Dear @Connor_McCormick,

Sorry, seems to be that I am not that concentrated.

In the second sample you Concatenate(), but only 1 picture!
The concatenate should at least contain 2 instances, and therefore it’s not clear what result you are aiming for.

It seems to be that the size of the images in this case is not allowed to be changed.

Maybe it should be first updated to the size of your choice and after that concatenated

[BenLee]

I think what’s happening here is that Concatenate() is forcing the data type to “Text” and an image isn’t text. So the image is rendered, but it won’t have the various other aspects available, like size. My suggestion here would be to resize the images to what you need, then use them in the formula.

As far as what to expect in the future, I think we’ll have something that you will like and will work really well for you, but it might not be soon enough. I don’t have an ETA on things, but the product is continually getting better and allowing you to do more and more.

[Connor_McCormick]

Ok, thank you for the update. I’ll use that as a workaround for now. Can’t wait for the something!

[Shane_Robinson]

Hey @Connor_McCormick… @BenLee is correct in that both Concatenate() and Join() will both strip the internal parameters of the Image() (and other) functions.

I updated your Doc with a solution AS LONG AS you’re using images from SquareSpace (as in your examples) or from other Image CDNs that have a URL-based API.

Please LMK if you can see my update in your Doc and I’ll post an example Doc of my own.

---

PS: If you wanted to centrally manage your images, in a Table, so you could update/manage Captions, Width, etc., and then simply insert them anywhere, in any Page within your Doc with a single line of code, that would also be super simple.

I can (already have in my own test Doc) whip up an example in your Doc if you’re interested in how that would work.

---

PPS: I was doing some testing with SquareSpace’s image API and the image sizes available are 100, 300, 500, 750, 1000, and 1500. Basically these map to generally standard responsive CSS breakpoints.

So, if using SquareSpace’s CDN, you specify a 400w, you’ll get 500. You’ll always get the next larger breakpoint size.

[Paul_Danyliuk]

I’m late to the party, but can you please explain what you’re trying to achieve, not in the terms of formulas but the expected outcome?

Here’s a somewhat technical explanation of what may be happening.

What Concatenate() does is construct a rich text piece. In rich text, non-text elements (references, formatting, images, links etc) are stored separately from text as “spans”. I haven’t checked, but I believe that these elements are rendered by browser as display: inline.

Image() on itself, however, is most likely rendered as display: inline-block. Hence governed by different mechanics of how the browser applies styling such as position and size.

There may be workarounds, but I’m not immediately aware of these. Still I’d like to know what you’re trying to achieve — would give me some direction to work towards.

---

P.S. Looked into it, I’m a bit mistaken though.

For rich text lines, the CSS sets width and height to auto, which overrides the width and height supplied in HTML attributes (because that’s how CSS works: any CSS rule takes precedence over presentational attributes of an HTML node):

For images on their own, that _3EV... class is not applied, so the size attributes aren’t cancelled out:

The team could fix this by updating the _3EV... class rule to e.g. not apply to images, or to not apply to elements that have width and/or height set.

[Paul_Danyliuk]

@Connor_McCormick

Meanwhile here’s a workaround: you create a single-cell table for your formula. Its width will constrain the width of the image. You can then hide the title, headers, lines etc to make it appear as a value with no decorations.

I added this to your doc.

This works for embeds too. First documented here:

MEGA TRICK: Dashboard design — Two columns, smaller charts

I can make the field container expand by concatenating the iframe with a tall Rectangle() — however it doesn’t make the iframe taller (it just lingers in the bottom of a tall wide field). Seems like the iframe’s height is just fixed in layout view. UPD: @John_Beaudoin_Jack Found the trick, lol: Put a tall embed into a dedicated table Look up that table into your Detail view. Display it as a table. Hide all the table decorations Profit: Your best gratitude for this trick would be rejecting T…

[Federico_Stefanato]

@Connor_McCormick, (and all),
I mistakenly read

• Image("https://image.url", 600, 500) -> Success!
• Concatenate(Image("https://image.url", 600, 500)) -> Fail

as

• Image("https://image.url", 600, 500) -> Success!
• Concatenate(Image("https://image.url"), 600, 500) -> Fail

Therefore the whole post I submitted was wrong.
Thanks to @Paul_Danyliuk for gently pointing it out.

[Connor_McCormick]

Hi all! Thank you all so much for the detailed responses. I will respond to all with one post here and I will update the original post to reflect some of the necessary details.

The Goal

My goal with the use of the combination of the Concatenate and Image formula is to autogenerate a section of text based on the contents of several tables.

You can see my writeup of my design goals here with a sample doc that demonstrates what I want:

How best to generate text (a document) from a table?

Hello everyone, My current goal is to use Coda to automate the creation of Scope of Work documents. For each of my prospective customers I want to: Input information about them into tables Select a particular customer to populate a Section that contains their scope of work which should contain: a. One off items like their name, the date, and my contact information b. FormulaMap generated items. For example, a customer may have multiple security locations, and each location may require mult…

As well as the constraints I ran into when I tried to implement the doc in this subsequent post:

How best to generate text (a document) from a table?

Ok! I learned a lot about trying to generate sections dynamically. Most of it has to do with getting over some of the current shortcomings of Coda. As usual, we know how hard they are working and that they are likely to address this in the near future. This is for those that would like to see what pitfalls and limitations exist for document generation when attempting a pure Coda approach. This is a long post, so if you’d like to just play with the doc you can find it here: Learnings: Newlin…

What inspired this revisitation is that Coda now supports printing docs and I have a lot of scopes to write and I’m tired of doing them manually.

Here’s the full formula that I’m using to generate my section of text. I’m sure you can see what it’s doing and why the Concatenate function has to be mixed with Image functions. This image formatting problem also happens with the Format function.

@Connor_McCormick

FormulaMap(Summary, Concatenate(Format("{1}                                                                                                                                                                                                           
", CurrentValue.Name), FormulaMap(CurrentValue.Locations, Format("{1}
{2}
{3}  

   
", CurrentValue.Name, If(CurrentValue.[Image URL].IsBlank(), ' ', Image(CurrentValue.[Image URL], 800, 600)),
Concatenate(
Format("The intended installations are:
{1}
", CurrentValue.Devices.Name.FormulaMap(ToText(CurrentValue)).BulletedList()),

FormulaMap(CurrentValue.Devices, 
Concatenate(Format("
{1}
{2}
", CurrentValue.Name, Concatenate(If(CurrentValue.[Image URL].IsNotBlank(), Image(CurrentValue.[Image URL].ToText(), 800, 600), ""),
Format("
{1}
    Service Type: {2}
    Color: {3}
",[Output Formatting].Details.First(), CurrentValue.[Service Type].ToText(),
CurrentValue.Color.ToText())))))
)))))

Constraining Tables

Unfortunately, @Paul_Danyliuk, this means that your constraining table solution won’t work for me as I cannot put views of tables in a dynamic formula like this. I will have a variable number of images depending on the contents of my tables (though that is a genius solution in other contexts).

---

@Shane_Robinson Thank you for your response. The squarespace images I used were just examples. I’m not using them in my real doc. Sorry for the confusion there and thank you for your investigation of the API.

@Shane_Robinson

I can […] whip up an example in your Doc if you’re interested in how that would work.

Would still be interested in seeing this nonetheless, even if you’d just like to share your test doc.

[Connor_McCormick]

@Paul_Danyliuk this seems like the best solution to the problem.

@Paul_Danyliuk

The team could fix this by updating the _3EV... class rule to e.g. not apply to images, or to not apply to elements that have width and/or height set.

Is there I way I can manually override that in the CSS myself? I’m fine with a hacky solution I just need my images to be properly sized when I print them

[Connor_McCormick]

Took me a while to see the difference between those two myself, even though you put them right next to one another!

» diff <(echo 'Image("https://image.url", 600, 500) -> Success!
Concatenate(Image("https://image.url", 600, 500)) -> Fail') <(echo 'Image("https://image.url", 600, 500) -> Success!
Concatenate(Image("https://image.url"), 600, 500) -> Fail')
2c2
< Concatenate(Image("https://image.url", 600, 500)) -> Fail
---
> Concatenate(Image("https://image.url"), 600, 500) -> Fail

It’s an easy mistake to make Thanks for your help

[Paul_Danyliuk]

There are plugins for CSS overrides (aka User styles). I’m not using one myself, but there are plenty in Chrome/Firefox plugins repositories, just find something reputable.

For a one-shot edit you can just open Developer tools (F12), click on the image to highlight it in the element tree, and on the right panel disable the height/width rules that set those to auto:

[Connor_McCormick]

Wow thank you! I’ll do this!

[Paul_Danyliuk]

I probably wasn’t clear — if you do this like in the gif, the change will only stick around for as long as you’re in that tab and until you refresh. When you open the doc again, it will load the default styles again, and you’ll have to do these steps again. That’s what you’d need the user styles plugin for — so that this change is applied automatically for you every time you open Coda. Just, as I say, find a reputable one: these plugins require full access to the pages you use, so if it’s a shady one it can track the sites you’re opening at best, steal your sensitive info and login information at worst.

If you only need to do this once in a while, e.g. generate an invoice once in a month or so, then installing a plugin could be unnecessary.

---

P.S. @BenLee et al — I still believe this is a valid bug. If a user types Image(url, width, height), the expectation is that the width and the height should be applied no matter the context — and not ignored. If the width and height weren’t specified, then the default behavior could resolve to auto / fill the width of containing canvas or table cell, like it is behaving now. Please log this.

[Connor_McCormick]

Ah yeah I followed that. I do this relatively infrequently, so this will be a sufficient solution—but I appreciate the clarification!

[Shane_Robinson]

@Shane_Robinson

100, 300, 500, 750, 1000, and 1500. Basically these map to generally standard responsive CSS breakpoints.

Hey @Connor_McCormick… It was a fun Saturday morning project to take the ideas of globally managing image widths and captions and extend it to a production use case.
Here’s the Doc I created with examples and instructions:

Globally Managed Dynamic Images