How are people putting Images on their Studio Pages?

General
1

I see how easy it is to copy and paste a Youtube video and it shows up instantly. Is there a way to do this with a still image?

Does it need to be hosted on another site? If so what is the best site to do this?

Thanks guys!

2

@motheraigaia

I have 2 methods that can work for most use cases:

1) Google Photos:

Go to Google Photos and find the photo/image you want to embed >>> click Share on the top right >> and copy the share link

image
image980×377 64.4 KB

image
image518×700 44.4 KB

then go to:

and fill in the details (pretty straightforward) >> copy the HTML embed code >> go to your studio and paste in the code into the Rich Text (HTML) section.

image
image716×872 97.1 KB

image
image1421×767 59.6 KB

2) Canva:

Click on ‘Share’ on the top right corner >> ‘Embed’ >> Copy the HTML >> Paste it into the Rich Text (HTML) section in your studio (you can do this for video designs too).

image
image676×777 83 KB

image
image1920×1111 213 KB

image
image1855×997 157 KB

With the Canva route, the only potential downside, depending on your use case, is that the player components appear. But maybe if you play around with the HTML code, you can change that.

Important note:

Studio page-Rich Text HTML sections use a ‘flex’ layout, so standard HTML embed codes have to be modified.

2 Likes
3

Thank you so much. Is there a way to center the image so it aligns centered. Right now it’s left justified. Thanks!

2 Likes
4

Hi @motheraigaia with the raw text (HTML) pages I normally create a div element and add the image inside. You can align as needed. Something like this:

<div style="flex: 1 1 400px; min-width: 320px; border-radius: 1rem; overflow: hidden;">
                        <img src="https://www.dropbox.com/scl/fi/8spo0rjpicv8bgo024/Building.jpeg?rlkey=fm6n2v0pffr3yv5428j7d2&raw=1" alt="Building a Product" style="width: 100%; height: auto; display: block;">
                    </div>

I normally use either dropbox or canva.

image
image1257×556 105 KB

1 Like
5

Hey @motheraigaia, NP. Here’s a code template you can use:

Copy-paste this and replace the URL with your own:

<div style="width:100%; display:flex; justify-content:center;">
  <img src="REPLACE_WITH_IMAGE_URL"
       alt="Image"
       style="display:block; max-width:100%; height:auto;">
</div>

[To center a single image]

Cool modifications to make your image embeds stand out:

Rounded corners + soft shadow

<img src="REPLACE_WITH_IMAGE_URL"
     alt="Image"
     style="display:block; max-width:100%; height:auto; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.12);">

Make the image clickable (opens large version in a new tab)

<div style="width:100%; display:flex; justify-content:center;">
  <a href="REPLACE_WITH_LARGE_IMAGE_URL" target="_blank" rel="noopener">
    <img src="REPLACE_WITH_IMAGE_URL"
         alt="Image"
         style="display:block; max-width:100%; height:auto;">
  </a>
</div>

[If you don’t want it to open on click, just use the first snippet with no <a> tag.]

Two images side-by-side, centered

<div style="display:flex; justify-content:center; gap:16px; flex-wrap:wrap;">
  <img src="URL_1" alt="Image 1" style="max-width:100%; height:auto; border-radius:12px;">
  <img src="URL_2" alt="Image 2" style="max-width:100%; height:auto; border-radius:12px;">
</div>

Add a caption

<p style="text-align:center; font-size:14px; margin-top:8px;">
  Short caption here
</p>

If anything still won’t center, paste your snippet and I’ll tweak it.

image
image1255×445 58 KB

Official community guide below:

1 Like