Embedding Galleries on Your Website

Embedding your Foto Master Cloud gallery directly on your website is a great way to showcase event photos without sending visitors to an external platform. The embedded gallery appears as part of your own site, maintaining a seamless brand experience.

Getting the Embed Code

1. Log in to cloud.fotomaster.com.
2. Navigate to Events and select the event whose gallery you want to embed.
3. Go to Gallery > Share > Embed.
4. Copy the provided embed code (an HTML snippet containing an <iframe>).

The embed code looks similar to this:

<iframe src="https://cloud.fotomaster.com/gallery/embed/your-event-id" 
        width="100%" 
        height="600" 
        frameborder="0" 
        allowfullscreen>
</iframe>

Adding to Your Website

HTML

Paste the embed code directly into your website's HTML where you want the gallery to appear:

1. Open your website's HTML file or template editor.
2. Navigate to the page or section where you want the gallery.
3. Paste the embed code.
4. Save and publish your changes.

WordPress

1. Navigate to the page or post where you want to embed the gallery.
2. Switch to the Code Editor (or use a Custom HTML block in the Block Editor).
3. Paste the embed code.
4. Switch back to the Visual Editor to verify the gallery appears.
5. Publish or update the page.

Shopify

1. Go to your Shopify admin panel and navigate to the page where you want the gallery.
2. In the page editor, click Show HTML (or the <> button).
3. Paste the embed code.
4. Save the page.

Wix

1. In the Wix Editor, click Add (+) > Embed Code > Embed a Widget.
2. Paste the embed code into the code field.
3. Resize and position the widget on your page.
4. Publish your site.

Customizing Embed Dimensions

You can adjust the embed dimensions to fit your website layout:

• Width -- Set a pixel value (e.g., width="800") or use width="100%" for a full-width responsive display.
• Height -- Set the height in pixels (e.g., height="600"). Choose a height that shows enough content without requiring excessive scrolling.

Modify these values directly in the embed code before pasting it into your site:

<!-- Full width, taller gallery -->
<iframe src="https://cloud.fotomaster.com/gallery/embed/your-event-id" 
        width="100%" 
        height="800" 
        frameborder="0" 
        allowfullscreen>
</iframe>

Responsive Embedding

To ensure the gallery looks good on all screen sizes, wrap the embed code in a responsive container:

<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe src="https://cloud.fotomaster.com/gallery/embed/your-event-id" 
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
          frameborder="0" 
          allowfullscreen>
  </iframe>
</div>

This technique uses a padding-based aspect ratio to make the gallery resize proportionally on different screen sizes. Adjust the padding-bottom percentage to change the aspect ratio:

• padding-bottom: 75% -- 4:3 aspect ratio
• padding-bottom: 56.25% -- 16:9 aspect ratio
• padding-bottom: 100% -- 1:1 (square) aspect ratio

Additional Notes

• Password-protected galleries -- If the gallery has password protection enabled, visitors will be prompted to enter the password within the embedded frame before photos are displayed.
• Branding -- Your gallery branding (logo, colors, background) is carried through to the embedded version.
• Performance -- The embedded gallery loads asynchronously, so it won't slow down the rest of your page.
• Updates -- Photos added to the gallery after embedding will appear automatically. You don't need to update the embed code.