X

The Digital Experience Platform blog covers the latest in innovative technologies to help you transform your business.

How to Build an awesome Image Gallery in Universal React using Oracle Content Management as Headless CMS

Ankur Saxena
Principal Product Manager

By going through this blog you will learn how to build an image gallery in universal React with Oracle Content Management as a Headless Content Management System (CMS).

Using images has always been a successful recipe to build attractive websites. Nice and expressive images can not only convey the right message for the content, but also make the content look attractive. By doing so website users become more interested, feel connected, and tend to spend more time on the website.

A high-level overview of Image Gallery samples using Oracle Content Management is available in my earlier blog; “Here is how to build an Image Gallery in your favorite technology using Oracle Content and Experience”. 

This blog post explains how you can download the oce-react-gallery-sample from GitHub and try it yourself. Before we begin, I would like to thank Leena Shah, Principal Member of Technical Staff at Oracle for creating such an elaborated video on How to Build a Gallery sample in React using Oracle Content Management. The video details all the steps that I have mentioned in this Blog and also shows what’s in the code and how Oracle Content’s React sample uses the rest APIs to access content for the Oracle Content Management asset repository.

Here is how the GitHub page looks like for oce-react-gallery-sample

The first step is to clone the sample into your existing local directory folder and then change the directory to the one you have just cloned.

username@user-dir ~/projects> git clone https://github.com/oracle/ oce-react-gallery-sample

username@user-dir ~/projects> cd oce-react-gallery-sample

username@user-dir ~/p/oce-react-gallery-sample>

Also, you need to make sure you install all the dependencies involved to run this project by running the npm install command.

username@user-dir ~/p/oce-react-gallery-sample> npm install

Now you can open the source code of the sample in your favorite code editor. We will be using Visual Studio as an example.

Go to src /.env file and provide the serverUrl and channelToken. We have placed Oracle hosted public server URL and channel token for this sample to run easily. When you are ready with your own Oracle Content Management account, you can replace the server URL with your instance and provide a token for your channel.

Next, we need to spin up a server. Let’s go ahead and run a Build by typing an npm run build command. This will put together a server bundle and client bundle that will make our universal react sample available on our local machine.

username@user-dir ~/p/oce-react-gallery-sample> npm run build

Now, we just need to run a local development server by running the npm run start command.

username@user-dir ~/p/oce-react-gallery-sample> npm run start

This will launch express server whose port is configured in the .env file. In our case, it’s port 8080.

To see the running sample we just need to go to the browser @ localhost:8080

This Image Gallery consists several pages of images of food and drinks available at a coffee shop. We have created different taxonomies to match up with the categories we want to show on the sample. These images were assigned to these different taxonomies. When we navigate into these pages, we can see a list of images available for respective taxonomy/categories. Furthermore, the user can then select an image and see that image in a preview mode.

 

All the content displayed by the sample is dynamic and is fetched at runtime from Oracle Content Management.

 

We have created a detailed video to help you understand how it works technically. To try this sample by your own, you can also check out the hands-on tutorial, Build an Image Gallery in React with Headless Oracle Content and Experience.

 

If you are interested in trying out more samples using various technologies, check out the Oracle Content Management Samples page

 

Before starting with the tutorials, if you have not set up an Oracle Content Management account yet, please have a look at our Quick Start Guide. To learn more about Oracle Content Management, you can read Overview of Oracle Content and Experience and if you are interested in headless development, you would want to have a look at Oracle Content and Experience as Headless CMS.

 

Conclusion

Developers can simplify the creation of an Image Gallery by using headless Oracle Content Management and can quickly bring in dynamic image support in their websites. For full details on how oce-react-gallery-sample works, check out our new tutorial “Build a Blog in JavaScript with Headless Oracle Content and Experience” and watch a developer support video on How to Build a Gallery sample in React using Oracle Content Management.

 

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.