How Media Library Works
Storing Images Available
- image name
- image size
- path and filename
- URL to access online
Searching and Inserting Images
- search by image name
- insert image URL
Loading Images from URL
- images need to be loaded from a website URL, even for local editing
Integration with Github and Gitlab
Using a Media Library with Go and Talk Page Builder
Create Website Repository
- one user can create multiple organizations(Github) or groups (Gitlab)
- one organization or group for each website
- a repository named [orgname].github.io or [groupname].gitlab.io
Upload Images
- upload to images folder
- store meaningful information in file path and file name
- image description
- dimension
- intended use, for example thumbnail, or cover
Sync Image List
- fill in repo owner and repo name in Website Repo tab of Site Setting
- read image list from Github or Gitlab
- store in local database
- read the file list after uploading new images
Search and Choose Images
- set up website base url in Site Setting for the page builder to generate image URL correctly
- website images are public and require no password
Using Media Library with a Public Repository on Github
- Limitation:
- a maximum of 1,000 files per folder
- a rate limit of 60 API requests per hour per IP for unauthenticated users (this does not include downloading the image)
- Solution:
- store images in subfolders if you have more than 1000 images
- specify subfolder when fetching image list
- do not fetch image list too frequently.
- image list is stored in a local database for subsequent use and won’t require extra API requests
Using Media Library with a Public Repository on Gitlab
- limitation:
- it takes slightly longer time for images to become available on your website (file list is available immediately after uploading new images)
- solution
- upload images by batch, a little while before editing
Updating Website Base URL to Load Images
- hover on the left side of the screen to show global toolbar
- click on the globe icon to show site setting options
- click on grid icon () at the top of the window to show extra tabs
- in “Current” tab, fill in the website address where images will be downloaded.
- the website address could be [orgname].github.io, [groupname].gitlab.io, or your custom domain name
Updating Website Repo to Fetch Image List
- hover on the left side of the screen to show global toolbar
- click on the globe icon to show site setting options
- go to Website Repo tab, choose github or gitlab for hosting provider, and fill in repo owner and repo name there.
- click on “Fetch List” button above “Select Logo File” field.
- click on the dropdown icon and you should be able to see images listed for selection.
- if there is an error fetching image list, make sure hosting provider, repo owner and repo name are all correct
- if you can see file names but can’t see the image, make sure your website address is correctly filled in “Current” tab of site settings.
Selecting Images for a Section in Media Library
- images are available in some sections of the page builder
- you can click the cog icon () on the horizontal toolbar to show the section option window, and select images in the following tabs: highlight image, background image, mobile background, base image, and mobile base.
- images are rendered in layers on screen. The highlight image is closer to you, and the base image is away from you.
- mobile background image and mobile base image are optional. These are useful when you want to use a different manually cropped photo when the page is displayed on mobile phones.
- the image location is set in “Website Repo” tab of site settings. you can click on the Fetch List button to update image list after uploading images.
- if you know the full address of the image, you can click on any image in edit mode, and paste the image url in the small popup window.
Selecting Images in a Section Collection from Media Library
- media library is available when you edit a section with a collection of cards
- if the image list is longer than the current section in edit, you can click the stack icon () so that the image list will always stay on top.
Selecting a Page Thumbnail Image from Media Library
- hover on the left side of the screen to show global toolbar
- click on file icon to show page setting window
- go to Page Thumbnail tab, enter the thumbnail image URL directly, or select an image from the media library.
- the page thumbnail image is used when listing this page in an index page.
What People Say About It
Love It
Choosing An Image From Media Library
Go and Talk page builder integrates with Github and Gitlab for website hosting, data storage and media library. More integrations are being developed and will be added to the tutorials once available.
The media library integration demonstrates how JavaScript and API can work together to achieve functionalities of a traditional content management system. As the data is stored locally in a database in the browser, content creators can write without a database server, even on mobile devices.
This tutorial provides some step by step guides on planning, uploading and using a media library. The key is to store useful information in file path and file names, in order to search for images.
In a similar way, content creators can back up data in a separate Git repository, fetch a list of content files from the Git hosting provider, and load data from remote storage as well as from local file system.
Please visit other tutorials and find more information on a topic of interest.
About Go and Talk
Go and Talk page builder is a lightweight web design tool running in the browser. It empowers designers and marketers to create presentable pages quickly without coding. It is optimized for running on mobile devices such as tablets. The generated web pages are responsive, lightweight and optimized for search engines.