Search...

APIs

createGallery( )

Developer Preview

Creates a gallery.

Description

The createGallery() function returns a Promise that resolves to a newly-created gallery after it has successfully been created.

You can create your own gallery by providing the gallery information, or clone an existing gallery using the ID of that existing gallery. When a gallery is cloned, the newly-created gallery includes the same properties as the existing gallery except for the gallery and item IDs, sort order, and created and updated dates.

The newly-created gallery is only available on your backend, and doesn't appear on your live site. To display your backend gallery on your live site, you need to connect it to a gallery component on your live site. To do this, import the createGallery() function to your page code, and write code to convert the backend gallery object to the frontend gallery component object. Once converted, the newly created backend gallery is visible on your live site. For reference, check out the code example, "Create a gallery and display it on your live site". To learn more, see Displaying a Pro Gallery on Your Site Using the Pro Gallery Backend API.

Important: When creating image items in your gallery, the images must be uploaded to the Wix Media Manager first as the imageInfo parameter currently only supports the Wix media URL.

Override permissions

This function is restricted and only runs if you elevate permissions using the wix-auth elevate() function.

Warning: Elevating a function allows it to be called by any site visitor. Exercise caution to prevent security vulnerabilities.

Syntax

function createGallery(options: CreateGalleryOptions): Promise<Gallery>

createGallery Parameters

NAME

TYPE

DESCRIPTION

options

Optional

CreateGalleryOptions

Options to use when creating the gallery.

Returns

Created gallery.

Return Type:

Promise<

Gallery

NAME

TYPE

DESCRIPTION

_createdDate

Date

Date and time the gallery was created.

_id

string

Gallery ID.

items

Array<

Item

Media items in the gallery.

name

string

Gallery name.

sortOrder

number

Index that determines which position a gallery is displayed on the site.

Note: If you assign the same sort order index to more than one gallery, the function fails.

totalItems

number

Total number of items in the gallery.

Was this helpful?

Create a gallery

Copy Code

1import { proGallery } from 'wix-pro-gallery-backend';
2
3/* Sample gallery value: 
4 * {
5 *   "name": "My New Gallery",
6 *   "items": [
7 *     {
8 *       "title": "Item 1",
9 *       "description": "This is the first item in my gallery.",
10 *       "tags": {
11 *         "values": ["voice","bees","wind"]
12 *       },
13 *       "link": {
14 *         "text": 'Click here for more info.',
15 *         "url": 'https://www.wix.com/about/us'
16 *       },
17 *       "type": "IMAGE",
18 *       "image": {
19 *         "exif": {
20 *           "Artist": "Bob Dylan",
21 *           "Copyright": "Bob Dylan MGT CO",
22 *           "ExposureTime": "0.005"
23 *         },
24 *         "focalPoint": {
25 *           "x": 0.900576923076923,
26 *           "y": 0.0972887222382463
27 *         },
28 *         "imageInfo": "wix:image://v1/38939f9568z222d6avc6285c9ac1e9129.jpg/38939f9568z222d6avc6285c9ac1e9129.jpg#originWidth=200&originHeight=199",
29 *         "quality": 100,
30 *         "unsharpMasking": {
31 *           "amount": 2.41,
32 *           "radius": 28.6,
33 *           "threshold": 0.4745098
34 *         }
35 *       }
36 *     },
37 *     {
38 *       "title": "Item 2",
39 *       "description": "This is the second item in my gallery.",
40 *       "type": "VIDEO",
41 *       "video": {
42 *         "type": 'WIX_MEDIA',
43 *         "videoInfo": "wix:video://v1/8b7eef_9c5e3490bc9e4edbbc4ba917d17dad8c/BigBuckBunny.mp4#posterUri=8b7eef_9c5e3490bc9e4edbbc4ba917d17dad8cf002.jpg&posterWidth=1280&posterHeight=720",
44 *         "duration": 5000
45 *       }
46 *     },
47 *     {
48 *       "title": "Item 3",
49 *       "description": "This is the third item in my gallery.",
50 *       "type": "TEXT",
51 *	     "text": {
52 *         "css": {
53 *           "backgroundColor": "rgba(205, 14, 205, 0.3)"
54 *	       },
55 *	       "html": "\n      <div class=\"te-pro-gallery-text-item\"\n            style=\"padding: 50px;\n                  width: 420px;\n                  height: 420px;\n                  background-color: rgba(205, 14, 205, 0.7);\n                  transform-style: preserve-3d;\n                  overflow: hidden;\n                  word-wrap: break-word;\n                  font-style: normal; font-weight:normal;\n                  \">\n            <div style=\"\n      position: relative;\n      top: 50%;\n      transform: translateY(-50%);\">\n                <p style=\"text-align:center\"><span style=\"font-size:11px\">Hi!</span></p>\n\n            </div>\n      </div>"
56 *       }
57 *     }
58 *   ]
59 * }
60 */
61
62export async function myCreateGalleryFunction(gallery) {
63  try {
64    const newGallery = await proGallery.createGallery({gallery});
65
66    const id = newGallery._id;
67    const name = newGallery.name;
68    const items = newGallery.items;
69    const firstItemTitle = newGallery.items[0].title;
70
71    console.log('Success! Created a new gallery:', newGallery);
72    return newGallery;
73  } catch (error) {
74    console.error(error);
75    // Handle the error
76  }
77}
78
79/* Promise resolves to:
80 * {
81 *   "_createdDate": "Wed Aug 03 2020 09:22:19",
82 *   "_id":"10874ccf-5867-4225-9550-3885079bad66",
83 *   "items": [
84 *     {
85 *       "_createdDate": Wed Aug 03 2020 09:22:19,
86 *       "_id": "534264c7-0c61-45ce-b414-891aacadf4c2",
87 *       "_updatedDate": Wed Aug 03 2020 09:22:19,
88 *       "description": "This is the first item in my gallery.",
89 *       "sortOrder": 1657439075188,
90 *       "tags": {
91 *         "values": ["voice","bees","wind"]
92 *       },
93 *       "link": {
94 *         "text": 'Click here for more info.',
95 *         "url": 'https://www.wix.com/about/us'
96 *       },
97 *       "title": "Item 1",
98 *       "type": "IMAGE",
99 *       "image": {
100 *         "exif": {
101 *           "Artist": "Bob Dylan",
102 *           "Copyright": "Bob Dylan MGT CO",
103 *           "ExposureTime": "0.005"
104 *         },
105 *         "focalPoint": {
106 *           "x": 0.900576923076923,
107 *           "y": 0.0972887222382463
108 *         },
109 *         "imageInfo": "wix:image://v1/38939f9568z222d6avc6285c9ac1e9129.jpg/38939f9568z222d6avc6285c9ac1e9129.jpg#originWidth=200&originHeight=199",
110 *         "quality": 100,
111 *         "unsharpMasking": {
112 *           "amount": 2.41,
113 *           "radius": 28.6,
114 *           "threshold": 0.4745098
115 *         }
116 *       }
117 *     },
118 *     {
119 *       "_createdDate": Wed Aug 03 2020 09:22:19,
120 *       "_id": "4507a07b-ab93-4326-a222-6d0bd8da0625",
121 *       "_updatedDate": Wed Aug 03 2020 09:22:19,
122 *       "description": "This is the second item in my gallery.",
123 *       "sortOrder": 1857439076299,
124 *       "title": "Item 2",
125 *       "type": "VIDEO",
126 *       "video": {
127 *         "type": 'WIX_MEDIA',
128 *         "videoInfo": "wix:video://v1/8b7eef_9c5e3490bc9e4edbbc4ba917d17dad8c/BigBuckBunny.mp4#posterUri=8b7eef_9c5e3490bc9e4edbbc4ba917d17dad8cf002.jpg&posterWidth=1280&posterHeight=720",
129 *         "duration": 5000
130 *       }
131 *     },
132 *     {
133 *       "_createdDate": Wed Aug 03 2020 09:22:19,
134 *       "_id": "4507a07b-ab93-4326-a222-6d0bd8da0625",
135 *       "_updatedDate": Wed Aug 03 2020 09:22:19,
136 *       "description": "This is the third item in my gallery.",
137 *       "sortOrder": 1857439076299,
138 *       "title": "Item 3",
139 *       "type": "TEXT",
140 *       "text": {
141 *         "css": {
142 *           "backgroundColor": "rgba(205, 14, 205, 0.3)"
143 *	       },
144 *	       "html": "\n      <div class=\"te-pro-gallery-text-item\"\n            style=\"padding: 50px;\n                  width: 420px;\n                  height: 420px;\n                  background-color: rgba(205, 14, 205, 0.7);\n                  transform-style: preserve-3d;\n                  overflow: hidden;\n                  word-wrap: break-word;\n                  font-style: normal; font-weight:normal;\n                  \">\n            <div style=\"\n      position: relative;\n      top: 50%;\n      transform: translateY(-50%);\">\n                <p style=\"text-align:center\"><span style=\"font-size:11px\">Hi!</span></p>\n\n            </div>\n      </div>"
145 *       }
146 *     }
147 *   ],
148 *   "name": "My New Gallery",
149 *   "sortOrder": "1098567432145",
150 *   "totalItems": 3
151 * }
152 */

Create a gallery from an existing gallery

Clone the existing gallery by galleryId.

Copy Code

1import { proGallery } from 'wix-pro-gallery-backend';
2
3// Sample cloneFromGalleryId value: '10874ccf-5867-4225-9550-3885079bad66'
4
5export async function myCreateGalleryFunction(cloneFromGalleryId){
6  try {
7    const newGallery = await proGallery.createGallery({cloneFromGalleryId});
8
9    const id = newGallery._id;
10    const name = newGallery.name;
11    const items = newGallery.items;
12    const firstItemTitle = newGallery.items[0].title;
13
14    console.log('Success! Created a new gallery:', newGallery);
15    return newGallery;
16  } catch (error) {
17    console.error(error);
18    // Handle the error
19  }
20}
21
22/* Promise resolves to:
23 * {
24 *   "_createdDate": "Sun Jul 10 2022 07:23:47,
25 *   "_id":"d4960668-a1f9-421b-99ed-974b632107c0",
26 *   "items": [
27 *     {
28 *       "_createdDate": Sun Jul 10 2022 07:23:47,
29 *       "_id": "229265c7-0f61-45ve-b433-791nncadf4c5",
30 *       "_updatedDate": Sun Jul 10 2022 07:23:47,
31 *       "description": "This is the first item in my gallery.",
32 *       "link": {
33 *         "text": 'Click here for more info.',
34 *         "url": 'https://www.wix.com/about/us'
35 *       },
36 *       "sortOrder": 1657439075188,
37 *       "title": "Item 1",
38 *       "type": "IMAGE",
39 *       "image": {
40 *         "imageInfo": "wix:image://v1/38939f9568z222d6avc6285c9ac1e9129.jpg/38939f9568z222d6avc6285c9ac1e9129.jpg#originWidth=200&originHeight=199"
41 *       }
42 *     },
43 *     {
44 *       "_createdDate": Sun Jul 10 2022 07:23:47,
45 *       "_id": "4507a07b-ab93-4326-a222-6d0bd8da0625",
46 *       "_updatedDate":  Sun Jul 10 2022 07:29:27,
47 *       "description": "This is the second item in my gallery.",
48 *       "sortOrder": 1857439076244,
49 *       "title": "Item 2",
50 *       "type": "IMAGE",
51 *       "image": {
52 *         "imageInfo": "wix:image://v1/25139f9568b74d8aac6286c9ac1e8186.jpg/25139f9568b74d8aac6286c9ac1e8186.jpg#originWidth=4000&originHeight=2667"
53 *       }
54 *     }
55 *   ],
56 *   "name": "My New Gallery",
57 *   "sortOrder": "1098567432267",
58 *   "totalItems": 2
59 * }
60 */

Create a gallery and display it on your live site

This example assumes you have an existing gallery element on your site. It creates a new gallery on your site's backend, imports the backend gallery to your page code, and converts the backend gallery items to the frontend gallery item format. The converted backend gallery items are then set to the items in your gallery element, and is visible on your published site.

Copy Code

1/******************************
2 * Backend code - gallery.jsw *
3******************************/
4
5import { proGallery } from 'wix-pro-gallery-backend';
6
7export async function myCreateGalleryFunction(gallery) {
8  try {
9    const backendGallery = await proGallery.createGallery({gallery});
10
11    // convert returned backend gallery items to frontend gallery item format
12    const convertedItems = backendGallery.items.map(item => convertToFrontend(item));
13
14    return convertedItems;
15    
16  } catch (error) {
17    console.error(error);
18    // Handle the error
19  }
20}
21
22function convertToFrontend(item) {
23  return {
24    slug: item._id,
25    type: item.type,
26    src: item.image ? item.image.imageInfo : item.video.videoInfo,
27    description: item.description,
28    title: item.title,
29    link: item.link ? item.link.url : undefined
30  }
31}
32 
33
34/*************
35 * Page code *
36*************/
37 
38import { myCreateGalleryFunction } from 'backend/gallery';
39
40$w('#galleryButton').onClick(async () => {
41  try {
42    // Call the myCreateGalleryFunction function to create a new backend gallery and convert the backend gallery items to the frontend format 
43    const newlyConvertedGalleryItems = await myCreateGalleryFunction(gallery);
44 
45     // Set your gallery element items to the converted backend gallery items 
46     $w("#myGalleryComponent").items = newlyConvertedGalleryItems;	
47   
48  } catch (error) {
49    // gallery not created
50    console.error(error);
51  }
52});
53 
54
55
56
57
58