Canva embed

[EvanDC]

Hi, I'm slowly getting to grips with Pages and Databases. 

I'm trying to create a database to showcase my Canva templates. Canva has an oEmbed framework or a div block embed code export to work with. 

I've created a database and have a text block for writing about the template, an image upload (which I probably don't need), and an url field to also copy in the url to the template. 

I have my categories sorted and displaying on the page, and I can add records just fine. 

What I would like is a block on each page which displays the oEmbed code link for each template. I want to put the Canva template into a block so I can keep the layout consistent for each record regardless of what size the Canva item is. One Canva template per record. 

I've tried creating a custom block, but I can't see how to link a database field contents to the content of the block. I must be doing something daft I'm sure. 

Any help gratefully received. Thanks. 

[EvanDC]

Sorry - in short - a block which pulls the data from the URL field of the record and hopefully displays it as an oEmbed item. 

[opentype]

Method 1: make the Canva oEmbed work in the editor fields of your website. Take a look at this
https://invisioncommunity.com/files/file/8963-ne-oembedservices-management/
Then you could just post the URL in the body field and you would get your embedding. 

Method 2: Use a custom Pages database field to add the embed URL or the full HTML code to the database records. I can’t give any more details without seeing the Canva embed options though. 

[EvanDC]

Thanks again! You're a rockstar. 

This is an example of the the embed codes Canva offers, the first is the first <div> code block you can export, and the second is the oEmbed url they provide: 

<div style="position: relative; width: 100%; height: 0; padding-top: 141.4286%;
 padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
 border-radius: 8px; will-change: transform;">
  <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
    src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAFZWegAizg&#x2F;view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe>
</div>
<a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAFZWegAizg&#x2F;view?utm_content=DAFZWegAizg&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Copy of H</a> by TheVestry

https://www.canva.com/design/DAFZWegAizg/view

I've installed the oEmbed plugin you linked to (thanks) and will give it a go. 

Assuming I can get the embedding to work, how do I go about creating a block which for each record pulls the embed code from the database? I've watched your course on Databases and I'm afraid I'm none the wiser! 

[opentype]

Yeah, that should be no problem at all. Here is an example:

https://www.opentype.space/supergrid/from-the-observatories/our-milky-way-r6/

I just added an URL field to the database, where you would then add this URL to a specific record.
https://www.canva.com/design/DAFZWegAizg/view

In the settings for the URL field, I turn off “Show in listing template” and under “Display View Format” I choose “Custom” and add this code:

{{if $formValue}}
<div style="position: relative; width: 100%; height: 0; padding-top: 141.4286%;
 padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
 border-radius: 8px; will-change: transform;">
  <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
    src="{$formValue}?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe>
</div>
{{endif}}

This creates the iFrame. 

(P.S. If members can submit to this Pages database, I would add an additional check to make sure we only use Canva URLs. Otherwise people could embed any iFrame on your website.)

[EvanDC]

Ok - we're getting somewhere!! 

Two more questions - which obviously you are free not to waste your time on (time for which I'm very grateful already - thank you)...

1)How do I make this work in a custom block, the block pulling the relevant field from the relevant record - ie, the block updates the url depending on which record is being viewed 

2)This code is just displaying a passive view of the template. There's no click through link to Canva itself. Any idea how I might get this to be clickable so it take me to the actual template ready to edit? 

Thanks again. 

[opentype]

18 minutes ago, EvanDC said:

1)How do I make this work in a custom block, the block pulling the relevant field from the relevant record - ie, the block updates the url depending on which record is being viewed 

That’s not the right approach. Blocks aren’t meant to interact with Pages records like this. If you have data from Pages records, you show it through the Pages database fields and templates themselves. 

22 minutes ago, EvanDC said:

2)This code is just displaying a passive view of the template. There's no click through link to Canva itself. Any idea how I might get this to be clickable so it take me to the actual template ready to edit? 

I don’t know what the click-through URL would be or if it exists. The code you provided only deals with this embedded view. 

[EvanDC]

Right - that is really helpful. Thank you. I think I'm there! 

I've added a Canva button and manually adding the link through code to edit the template, so that's fine. 

Last question I hope ... 

Any idea how to get rid of the black box around the embedded view? 
 

[EvanDC]

{{if $formValue}}
<div style="position: relative; width: 33%; height: 33%; padding-top: 25%;
 padding-bottom: 0; background: transparent; margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
 border-radius: 0px; will-change: transform;">
  <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: transparent; border: none; padding: 0;margin: 0;"
    src="{$formValue}?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe>
</div>
{{endif}}

This is what I've done to the code to reduce the size and try and get rid of the black background.

[EvanDC]

Ok, I've reset it now to the code you gave and used the scale function rather than width/height settings. That's helped me. 

But now the top padding is massive. Can you explain where the padding figure of padding-top: 141.4286% comes from? And how I might reduce this to get rid of a load of empty space above the embedded template?