Displaying your images, videos or URLs

In application development we often link resources to our page, may it be a PDF, an image, or a link to another application.

These resources are an important part of your page, and it's therefore important that we make sure they are properly linked and preferably set up in a way that prevents them from breaking in case something changes.

Displaying resources

Many components offer the option to display resources via one of the available input fields in the components options. To learn more about the component options, see our component articles.

A fast and easy way to display resources on your page is to use the URL of your resource and paste it into the URL field of your component.

However, if this URL changes or ceases to exist, your page may show an error.

For optimally displaying your resources, we advise you to link to variables inside your application instead. This will allow you to keep the source the same and prevent your page resource from accidentally breaking if the URL changes due to unforeseen updates.

Storing your resources

Public files

Your images, like your application logo or other files that are often displayed in your application, can be saved in the public files segment of your application.

Public files are ideal for files that aren't dynamically displayed on your pages and can be accessed by the link of the resource.

All public files will be available via the file selector options in your components.

Dynamic files

Resources that can change per visitor or object, are ideally saved in your data model.

In your data model, you can configure the following properties to save your resources in:

• Files property

• Image propery

• URL property

These can be selected in the data section of your component options, in this example I have a page variable available of an object that has an image property.

Besides always having dynamic access to resources stored in your application, you also can determine whether you want resources stored in your model to be public or private, giving you more control over the accessibility of your resources.

When opening the page I immediately display the stored images, the first from my model, the second via my public files. Both set up via a dynamic link to the storage location within my application.

Displaying hosted videos

If you want to display a video hosted outside your application, such as on Wistia, Vimeo, or YouTube, you can use the Media component’s Iframe option.

In traditional development, videos are often embedded with an iframe. In Betty Blocks, the Media component handles that setup for you, so you only need to provide the correct video link.

In this example, we use a YouTube video. If you copy and paste YouTube’s full embed code directly into the Iframe field, it will not work as expected, because the component already wraps the URL in an iframe.

Instead, use the regular video link, or strip the copied iframe code down to just the source URL if you want to preserve specific player settings.

Stripped down Iframe link

When pasting the video link in your Iframe option's input, you will see the video appear on your page builder canvas, if the video is publicly available via the hosted source.