Embeddable Galleries

EnTribe Galleries are responsive components that you can embed on a webpage or display on digital signage to showcase fresh, quality photo or video User Generated Content (UGC). This page provides guidance to help your team get the best results.

Example of a web gallery with five images in Slider format

Embedding your Gallery on a webpage

There are three ways to embed or share your gallery

Finding your embed code

To find your embed code, log into the EnTribe portal and open the Galleries tab. Find your Gallery on the right side panel and click "Embed". The popup will provide the available embed codes.

Screenshot of the Gallery Manager tab in the Entribe portal
Screenshot of Gallery Embed popup

Embed with Script Tag (recommended)

Why would I use this?

We recommend using this embed method for its flexibility and responsiveness. Use this if you want to embed your gallery in another webpage and your website builder allows for custom code blocks

How do I use it?

Copy your embed code and inject it into your page where you would like it to appear. If you are using a webpage builder with drag and drop blocks, try adding the code to a "Code" or "HTML" block. If you are editing the raw HTML of a page, it may be inserted directly into the body of your page.  

Sample embed code

(where do I find my code?)

<script defer type="text/javascript" src="https://gallery-tag.entribe.com/entribe_gallery.js"> </script>
<div data-client-id="132" data-gallery-id="16" class="entribe_gallery_v100_2023"></div>

Embed with iFrame

Why would I do this?

iFrames are quick and easy to embed but provide limited responsiveness. You may wish to use this if your website builder does not allow for custom code or your are unsure how to embed custom code.

How do I use it?

Copy your embed code and inject it into your page where you would like it to appear. Note that you can edit properties of the iFrame such as adding/removing a border, scrollbar, and adjusting height and width directly in the embed code.

Sample Embed Code

(where do I find my code?)

<iframe scrolling="no" frameborder="0" src="https://gallery.entribe.com?cl=132&gid=16" height="375px" width="100%" title="Slider Gallery"></iframe>

Use a Standalone Page

Why would I do this?

For cases like displaying galleries on digital screens, you may need to display the gallery as a standalone webpage.

How do I use it?

Just copy the provided URL and enter it into the web browser or playlist of your digital screen management tool.

Sample URL

(where do I find my code?)

https://gallery.entribe.com?cl=132&gid=16

Populating your Gallery

From the EnTribe Portal / Galleries tab, go to "Manage Content" and click "Add or Remove Content". You may choose to either assign content manually from your entire Content Library (which allows for reordering the content in your gallery) or assigning an Album of content (which enables auto-populating your Gallery as relevant content appears in your library but does not allow reordering).

Screenshot of how to Add or Remove Content from Gallery

Customizing the Design

The design and content of a gallery can be fully managed from your EnTribe Portal.

Screenshot of the EnTribe Portal's Gallery Management page

Go to the Gallery tab and click Edit Design. There you can:

  • Choose from four design themes: Grid, Slider, Mosaic, or Signage (see what they look like with our Sample Implementations)
  • Animate your gallery to auto scroll or auto play videos
  • Hide or show information about your content such as creator usernames, captions, or product page links
  • Change background or text color (depending on the theme chosen)

Overwriting Gallery styles (Advanced)

EnTribe Web Galleries are designed to be responsive to the viewport and container width to ensure  your content looks its best no matter where it is viewed. If you are embedding via a Script Tag, some properties of the gallery may be controlled by your webpage's CSS.

These are properties that will be overwritten by the hosting webpage's CSS:

  • Container sizing, margins, padding
  • Container background color
  • Font family

Sample Implementations

Slider Theme

Container at 60% width
Container at 30% width

Grid Theme

Container at 60% width
Container at 30% width

Mosaic Theme

Container at 60% width
Container at 30% width

Signage Theme

Container at 60% width
Container at 30% width

Troubleshooting

Gallery content is loading slowly

EnTribe Galleries use different techniques to render content as quickly as possible with minimal impact to the performance of the overall page. If load time is a priority, consider the following to provide an even faster performance.

Images are overflowing the container or getting cutoff

If you have embedded using an iframe and are seeing images overflow or cutoff (or seeing that pesky scrollbar), this is likely because the iframe dimensions do not allow for all of the content to display. Check that the iframe Width = 100% and the height is tall enough to display the content of the gallery. Each gallery theme has a different minimum height in order to show the content without overflow.

Recommended minimum iframe heights per design theme:

Gallery is not appearing