> Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt # Method name: createGallery(options: CreateGalleryOptions) # Method package: wixProGalleryBackend # Method menu location: wixProGalleryBackend --> proGallery --> createGallery # Method Link: https://dev.wix.com/docs/velo/apis/wix-pro-gallery-backend/pro-gallery/create-gallery.md # Method Description: Creates a new gallery. 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](https://support.wix.com/en/article/velo-tutorial-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](https://support.wix.com/en/article/wix-media-uploading-media-to-the-media-manager) first as the `imageInfo` parameter currently only supports the Wix media URL.
# Method Code Examples: *** Note: do not assume any prop names or enum values other than the ones in the example. ## Create a gallery ```javascript import { proGallery } from 'wix-pro-gallery-backend'; /* Sample gallery value: * { * "name": "My New Gallery", * "items": [ * { * "title": "Item 1", * "description": "This is the first item in my gallery.", * "tags": { * "values": ["voice","bees","wind"] * }, * "link": { * "text": 'Click here for more info.', * "url": 'https://www.wix.com/about/us' * }, * "type": "IMAGE", * "image": { * "exif": { * "Artist": "Bob Dylan", * "Copyright": "Bob Dylan MGT CO", * "ExposureTime": "0.005" * }, * "focalPoint": { * "x": 0.900576923076923, * "y": 0.0972887222382463 * }, * "imageInfo": "wix:image://v1/38939f9568z222d6avc6285c9ac1e9129.jpg/38939f9568z222d6avc6285c9ac1e9129.jpg#originWidth=200&originHeight=199", * "quality": 100, * "unsharpMasking": { * "amount": 2.41, * "radius": 28.6, * "threshold": 0.4745098 * } * } * }, * { * "title": "Item 2", * "description": "This is the second item in my gallery.", * "type": "VIDEO", * "video": { * "type": 'WIX_MEDIA', * "videoInfo": "wix:video://v1/8b7eef_9c5e3490bc9e4edbbc4ba917d17dad8c/BigBuckBunny.mp4#posterUri=8b7eef_9c5e3490bc9e4edbbc4ba917d17dad8cf002.jpg&posterWidth=1280&posterHeight=720", * "duration": 5000 * } * }, * { * "title": "Item 3", * "description": "This is the third item in my gallery.", * "type": "TEXT", * "text": { * "css": { * "backgroundColor": "rgba(205, 14, 205, 0.3)" * }, * "html": "\n " * } * } * ] * } */ export async function myCreateGalleryFunction(gallery) { try { const newGallery = await proGallery.createGallery({gallery}); const id = newGallery._id; const name = newGallery.name; const items = newGallery.items; const firstItemTitle = newGallery.items[0].title; console.log('Success! Created a new gallery:', newGallery); return newGallery; } catch (error) { console.error(error); // Handle the error } } /* Promise resolves to: * { * "_createdDate": "Wed Aug 03 2020 09:22:19", * "_id":"10874ccf-5867-4225-9550-3885079bad66", * "items": [ * { * "_createdDate": Wed Aug 03 2020 09:22:19, * "_id": "534264c7-0c61-45ce-b414-891aacadf4c2", * "_updatedDate": Wed Aug 03 2020 09:22:19, * "description": "This is the first item in my gallery.", * "sortOrder": 1657439075188, * "tags": { * "values": ["voice","bees","wind"] * }, * "link": { * "text": 'Click here for more info.', * "url": 'https://www.wix.com/about/us' * }, * "title": "Item 1", * "type": "IMAGE", * "image": { * "exif": { * "Artist": "Bob Dylan", * "Copyright": "Bob Dylan MGT CO", * "ExposureTime": "0.005" * }, * "focalPoint": { * "x": 0.900576923076923, * "y": 0.0972887222382463 * }, * "imageInfo": "wix:image://v1/38939f9568z222d6avc6285c9ac1e9129.jpg/38939f9568z222d6avc6285c9ac1e9129.jpg#originWidth=200&originHeight=199", * "quality": 100, * "unsharpMasking": { * "amount": 2.41, * "radius": 28.6, * "threshold": 0.4745098 * } * } * }, * { * "_createdDate": Wed Aug 03 2020 09:22:19, * "_id": "4507a07b-ab93-4326-a222-6d0bd8da0625", * "_updatedDate": Wed Aug 03 2020 09:22:19, * "description": "This is the second item in my gallery.", * "sortOrder": 1857439076299, * "title": "Item 2", * "type": "VIDEO", * "video": { * "type": 'WIX_MEDIA', * "videoInfo": "wix:video://v1/8b7eef_9c5e3490bc9e4edbbc4ba917d17dad8c/BigBuckBunny.mp4#posterUri=8b7eef_9c5e3490bc9e4edbbc4ba917d17dad8cf002.jpg&posterWidth=1280&posterHeight=720", * "duration": 5000 * } * }, * { * "_createdDate": Wed Aug 03 2020 09:22:19, * "_id": "4507a07b-ab93-4326-a222-6d0bd8da0625", * "_updatedDate": Wed Aug 03 2020 09:22:19, * "description": "This is the third item in my gallery.", * "sortOrder": 1857439076299, * "title": "Item 3", * "type": "TEXT", * "text": { * "css": { * "backgroundColor": "rgba(205, 14, 205, 0.3)" * }, * "html": "\n " * } * } * ], * "name": "My New Gallery", * "sortOrder": "1098567432145", * "totalItems": 3 * } */ ``` ## Create a gallery from an existing gallery ```javascript import { proGallery } from 'wix-pro-gallery-backend'; // Sample cloneFromGalleryId value: '10874ccf-5867-4225-9550-3885079bad66' export async function myCreateGalleryFunction(cloneFromGalleryId){ try { const newGallery = await proGallery.createGallery({cloneFromGalleryId}); const id = newGallery._id; const name = newGallery.name; const items = newGallery.items; const firstItemTitle = newGallery.items[0].title; console.log('Success! Created a new gallery:', newGallery); return newGallery; } catch (error) { console.error(error); // Handle the error } } /* Promise resolves to: * { * "_createdDate": "Sun Jul 10 2022 07:23:47, * "_id":"d4960668-a1f9-421b-99ed-974b632107c0", * "items": [ * { * "_createdDate": Sun Jul 10 2022 07:23:47, * "_id": "229265c7-0f61-45ve-b433-791nncadf4c5", * "_updatedDate": Sun Jul 10 2022 07:23:47, * "description": "This is the first item in my gallery.", * "link": { * "text": 'Click here for more info.', * "url": 'https://www.wix.com/about/us' * }, * "sortOrder": 1657439075188, * "title": "Item 1", * "type": "IMAGE", * "image": { * "imageInfo": "wix:image://v1/38939f9568z222d6avc6285c9ac1e9129.jpg/38939f9568z222d6avc6285c9ac1e9129.jpg#originWidth=200&originHeight=199" * } * }, * { * "_createdDate": Sun Jul 10 2022 07:23:47, * "_id": "4507a07b-ab93-4326-a222-6d0bd8da0625", * "_updatedDate": Sun Jul 10 2022 07:29:27, * "description": "This is the second item in my gallery.", * "sortOrder": 1857439076244, * "title": "Item 2", * "type": "IMAGE", * "image": { * "imageInfo": "wix:image://v1/25139f9568b74d8aac6286c9ac1e8186.jpg/25139f9568b74d8aac6286c9ac1e8186.jpg#originWidth=4000&originHeight=2667" * } * } * ], * "name": "My New Gallery", * "sortOrder": "1098567432267", * "totalItems": 2 * } */ ``` ## Create a gallery and display it on your live site ```javascript /****************************** * Backend code - gallery.jsw * ******************************/ import { proGallery } from 'wix-pro-gallery-backend'; export async function myCreateGalleryFunction(gallery) { try { const backendGallery = await proGallery.createGallery({gallery}); // convert returned backend gallery items to frontend gallery item format const convertedItems = backendGallery.items.map(item => convertToFrontend(item)); return convertedItems; } catch (error) { console.error(error); // Handle the error } } function convertToFrontend(item) { return { slug: item._id, type: item.type, src: item.image ? item.image.imageInfo : item.video.videoInfo, description: item.description, title: item.title, link: item.link ? item.link.url : undefined } } /************* * Page code * *************/ import { myCreateGalleryFunction } from 'backend/gallery'; $w('#galleryButton').onClick(async () => { try { // Call the myCreateGalleryFunction function to create a new backend gallery and convert the backend gallery items to the frontend format const newlyConvertedGalleryItems = await myCreateGalleryFunction(gallery); // Set your gallery element items to the converted backend gallery items $w("#myGalleryComponent").items = newlyConvertedGalleryItems; } catch (error) { // gallery not created console.error(error); } }); ``` ---