Photo Gallery by Codexin - Documentation

Installing form Dashboard

Installing Photo Gallery By Codexin is pretty simple. You can do this from your WordPress dashboard by following these steps:

1. Go to Plugins Add New
2. Search for Photo Gallery By Codexin - Image Gallery
3. Install and then Activate the plugin

---

Installing from WordPress.org

Alternatively you can download Photo Gallery By Codexin from WordPress.org here. The plugin will download to your computer as a .zip file. This is the file you'll be uploading into your WordPress.

Depending on your approach to installation, you can either manually install Photo Gallery By Codexin or use the WordPress dashboard. In either case, you'll need to go to your WordPress dashboard and follow these steps:

1. Go to Plugins Add New
2. Click on Upload Plugin.
3. Upload the plugin by clicking Choose File, selecting the codexin-image-gallery.zip file, then clicking the Install Now button.
4. Once the plugin has been uploaded, all you need to do is click Activate Plugin.

---

Manual Installation

You can also install Photo Gallery By Codexin by uploading the plugin directly to your server inside the plugins directory. The steps are a little more technical but can be easily done. Follow these steps as shown below:

1. Download Photo Gallery By Codexin from WordPress.org here
2. Unzip the file on your computer so that you have the codexin-image-gallery folder accessible.
3. Connect to your site using your favorite FTP program and navigate to the wp-content/plugins directory of your WordPress site.
4. Finally, upload the codexin-image-gallery folder to the wp-content/plugins directory.

How to create a grid gallery

Adding a grid gallery to your site with Photo Gallery by Codexin is relatively simple & straight-forward. Follow these simple steps as shown below:

1. Locate the Photo Gallery menu in your WordPress dashboard. Hover over it, then click Add New Gallery from the expanded menu. You'll find yourself at the Add New Gallery screen. All the settings you need to add a new gallery are here.
2. Enter a name for your gallery in the Add New Gallery text box.
3. Scroll down and go to the Add Gallery Images box. Click on the Upload Images button. You'll get a popup dialog box where you can either upload new images or use previously uploaded images in your image gallery. If you're picking images from your existing media library, select all the images you need with holding down the control key of your keyboard and after you are done, click on the Select button. If you are uploading new images, click on Upload files tab and click on Select Files where you can upload one or multiple images. After the images are successfully uploaded, select/deselect the images you want to include and then click on the Select button.
4. Scroll down to Gallery Settings box. You will be already on the Gallery Styles tab. Select the Grid Style image.
5. Scroll up to the top of the page and find the Publish box to the right. Click on Publish button to publish your awesome grid gallery.

---

How to create a masonry gallery

Adding a masonry gallery to your site with Photo Gallery by Codexin is relatively simple & straight-forward. Follow these simple steps as shown below:

1. Locate the Photo Gallery menu in your WordPress dashboard. Hover over it, then click Add New Gallery from the expanded menu. You'll find yourself at the Add New Gallery screen. All the settings you need to add a new gallery are here.
2. Enter a name for your gallery in the Add New Gallery text box.
3. Scroll down and go to the Add Gallery Images box. Click on the Upload Images button. You'll get a popup dialog box where you can either upload new images or use previously uploaded images in your image gallery. If you're picking images from your existing media library, select all the images you need with holding down the control key of your keyboard and after you are done, click on the Select button. If you are uploading new images, click on Upload files tab and click on Select Files where you can upload one or multiple images. After the images are successfully uploaded, select/deselect the images you want to include and then click on the Select button.
4. Scroll down to Gallery Settings box. You will be already on the Gallery Styles tab. Select the Masonry Style image.
5. Scroll up to the top of the page and find the Publish box to the right. Click on Publish button to publish your awesome masonry gallery.

---

How to create a justified gallery

Adding a justified gallery to your site with Photo Gallery by Codexin is relatively simple & straight-forward. Follow these simple steps as shown below:

1. Locate the Photo Gallery menu in your WordPress dashboard. Hover over it, then click Add New Gallery from the expanded menu. You'll find yourself at the Add New Gallery screen. All the settings you need to add a new gallery are here.
2. Enter a name for your gallery in the Add New Gallery text box.
3. Scroll down and go to the Add Gallery Images box. Click on the Upload Images button. You'll get a popup dialog box where you can either upload new images or use previously uploaded images in your image gallery. If you're picking images from your existing media library, select all the images you need with holding down the control key of your keyboard and after you are done, click on the Select button. If you are uploading new images, click on Upload files tab and click on Select Files where you can upload one or multiple images. After the images are successfully uploaded, select/deselect the images you want to include and then click on the Select button.
4. Scroll down to Gallery Settings box. You will be already on the Gallery Styles tab. Select the Justified Style image.
5. Scroll up to the top of the page and find the Publish box to the right. Click on Publish button to publish your awesome justified gallery.

How to adjust columns for grid and masonry gallery

To adjust number of columns for grid and masonry gallery in desktop, follow these simple steps as shown below:

1. Click on Photo Gallery menu on the Dashboard. You will land on All Galleries page.
2. Hover over the gallery you want to edit and click on the Edit button.
3. Scroll down to Gallery Settings box and switch to Layout Settings tab.
4. You will see a dropdown field to the top named Select number of columns in desktop (1025px or higher). This settings is used for desktop layout. Change the dropdown value as per your need.

   Note: Ideally the screens larger than 1025px are called desktop devices.

   
5. After that, scroll up to the top of the page, click on Update button to update your image gallery and you are done.

---

How to adjust columns for tablet and mobile for grid and masonry gallery

To adjust number of columns for tablet and mobile for grid and masonry gallery, follow these simple steps as shown below:

1. Click on Photo Gallery menu on the Dashboard. You will land on All Galleries page.
2. Hover over the gallery you want to edit and click on the Edit button.
3. Scroll down to Gallery Settings box and switch to Layout Settings tab.
4. You will see a dropdown field towards the top named Select number of columns in tablet (768px to 1024px). This settings is used for tablet layout. Change the dropdown value as per your need.

   Note: Ideally the screens between 768px to 1024px are called tablet devices.

   
5. Next to it, you will see a dropdown field towards the top named Select number of columns in mobile (767px or lower). This settings is used for mobile layout. Change the dropdown value as your need.
6. After that, scroll up to the top of the page, click on Update button to update your image gallery and you are done.

---

How to adjust image height for grid gallery

You can adjust image height as per your need, but only for grid gallery. There will be no need to adjust height in the masonry and justified gallery layouts. To adjust image height for grid gallery, follow these simple steps as shown below:

1. Click on Photo Gallery menu on the Dashboard. You will land on All Galleries page.
2. Hover over the gallery you want to edit and click on the Edit button.
3. Scroll down to Gallery Settings box and switch to Layout Settings tab.
4. You will see three text fields towards the middle for height adjustment. They corresponds to desktop (> 1025px or higher), tablet (768px to 1024px) and mobile (767px or lower) devices. Enter your required height (example: 100) for these different devices as per your need.

   Note: You can keep these fields blank to revert to the default height.

   
5. After that, scroll up to the top of the page, click on Update button to update your image gallery and you are done.

How to set border radius and border color

To customize the border properties, follow these simple steps as shown below:

1. Click on Photo Gallery menu on the Dashboard. You will land on All Galleries page.
2. Hover over the gallery you want to edit and click on the Edit button.
3. Scroll down to Gallery Settings box and switch to Border Settings tab.
4. You will see a text field in the top named Set border radius for each image (px). You will see that currently the value is 0 (which is the default value). Change it as per your need to give your images a border radius (Example: 5)
5. Next to it, you will find three fields which represent the border properties. The first one is a text field named Set border size/width for each image (px). This field is responsible for the border width. You can change use this field to give your images a thick/thin width as per your need.
6. Next dropdown field is named Select border style for each image and it represents border style. You can change use this field to give your images a a border style as per your need.
7. Next to it, there is color picker field named Select border color for each image. You can select any color from here to give your borders any color you want.
8. After that, scroll up to the top of the page, click on Update button to update your image gallery and you are done.

How to use lightbox features

Photo Gallery by Codexin gives you the option to set a Lightbox feature for the images in the gallery. Lightbox is a popup feature used on web pages to overlay images over the site so that users can look at them more clearly. If you want to set Lightbox for all images in the gallery, follow these simple steps as shown below:

1. Click on Photo Gallery menu on the Dashboard. You will land on All Galleries page.
2. Hover over the gallery you want to edit and click on the Edit button.
3. Scroll down to Gallery Settings box and switch to Lightbox Settings tab.
4. You will see a field in the top named Enable image lightbox?. Lightbox is enabled by default. If you want to switch off the lightbox feature select Disable
5. After that, scroll up to the top of the page, click on Update button to update your image gallery and you are done.

---

How to enable/disable caption and description inside lightbox

Photo Gallery by Codexin gives you the option to show/hide image caption and description inside of Lightbox. To enable caption and description inside Lightbox for all images in the gallery, follow these simple steps as shown below:

1. Click on Photo Gallery menu on the Dashboard. You will land on All Galleries page.
2. Hover over the gallery you want to edit and click on the Edit button.
3. Scroll down to Gallery Settings box and switch to Lightbox Settings tab.
4. You will see a field named Show image captions in lightbox?. Select Yes to show image caption inside lightbox.
5. Next to it, you will see a field in the top named Show image descriptions in lightbox?. Select Yes to show image description inside lightbox.
6. After that, scroll up to the top of the page, click on Update button to update your image gallery and you are done.

---

How to change image caption, description and alt tags for each image

You can change the image metadata such as caption, description and alt text for each image while you are building up your gallery. follow these simple steps as shown below:

1. Upload/choose your images with Upload Images button.
2. After the selection is completed, you selected images will be shown in the top of the Upload Images button. Hover over any of the image to find a pen icon.
3. Click on the pen icon and the details for that particular image will be opened in a new tab. In this page, you can edit all the metadata for that image for example alt text, caption & description. Scroll down to find and edit them as per you need and when you are done, scroll to the top and click on the Update button to the right. After updating, the metadata will be saved.
4. Repeat this process for each image for which you want to edit the metadata.

How to use different hover effects

Photo Gallery by Codexin gives you the option to change hover effects and hover icon. To change the hover effect and icons for all images in the gallery, follow these simple steps as shown below:

1. Click on Photo Gallery menu on the Dashboard. You will land on All Galleries page.
2. Hover over the gallery you want to edit and click on the Edit button.
3. Scroll down to Gallery Settings box and switch to Image hover settings tab.
4. Here you will see some options to change the hover effects and icons. To the top, there is an option to enable/disable hover icon and also you can choose the hover icon and icon color.
5. Next, you will see a color picker field to change the image hover color. You can give any color you want and it will show when the images are hovered (along with the icon you selected above).You can also choose an opacity to use transparent overlay hover color by changing the bottom bar to left or right as shown in the below screenshot.
6. Next to it, you will see five hover effect selection field. There is a image hover live preview sample at the bottom of the panel. You can experiment all the hover effects, colors and icons and see the changes in the bottom live preview and choose the best combination as you see fit.
7. After that, scroll up to the top of the page, click on Update button to update your image gallery and you are done.

How to copy the generated shortcode and use that inside a page or post

After publishing your gallery, you'll want to show your new gallery somewhere on your site. A shortcode is automatically generated for each gallery. This can be pasted into any page or post to display your gallery. You can paste multiple gallery shortcodes in a page or post to show different galleries if you wish.

You can find the shortcode of your newly published gallery to the right of the page under Publish box. Click the shortcode in the Shortcode box to automatically copy it to your clipboard for easy pasting anywhere in page or posts.

If you're using the block editor, you can paste the shortcode into the Shortcode block.

Once again, thank you so much for installing this plugin. We'd be glad to help you if you have any questions relating to this plugin. Please keep that in mind that we are working very hard to providing better quality in coming days. If you love our work then appreciate us by writing a good review with 5 star.