jgdGalleryMaker

/* jgdGalleryMaker */

.jgd-gallery {
  margin: 0 auto;
}

.square.jgd-gallery {
  display: grid;
  justify-content: center;
}

.jgd-gallery figure {
  margin: 0;
}

.jgd-gallery__image {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

.padding-24 {
  padding: 24px 0;
}

.padding-48 {
  padding: 48px 0;
}

.padding-72 {
  padding: 72px 0;
}

.padding-96 {
  padding: 96px 0;
}



/* */

How to use jgdGalleryMaker

Adding images

1. Enter an image url into the Image URL box with optional Alt text one a time
2. Click Add an image to the gallery to add each new image *

---

Gallery Options

Image Width

Image widths are approximate and vary per each gallery style.

For instance, square galleries have an exact fixed width, while the Vertical Order Masonry gallery has a fluid width that becomes fixed when the parent container can fit the total number of columns.

Gallery Layout

The Gallery Options section features different styles for the gallery tiles.

• Square- Basic, square shaped gallery tiles.

• Vertical Order Masonry- A masonry pattern with alternating heights, displaying images from top to bottom, left to right.

  This style works best inside of a full width web page.

---

Editing the gallery

1. Under Select Editing Mode, choose Edit Gallery
2. Each gallery image will be highlighted; images that are highlighted yellow can be deleted or moved
3. To delete an image, use the Select next image and Select previous image buttons and click Delete image
4. To move an image, use the Move image left and Move image right buttons

---

Copying the code

Standard website

Just below the gallery, you can copy and paste the generated HTML and CSS to use in your projects.

1. Click the Select HTML or Select CSS button to highlight the HTML or CSS text
2. Copy (Ctrl/Cmd C)
3. Paste (Ctrl/Cmd V) the HTML output into an HTML document
4. Paste the CSS into a CSS document

WordPress 5.0+ website

1. Click the Select CSS button to highlight the CSS text
2. From the front page, go to Appearance > Customize to access the Customizer
3. Within the Customizer, find the Additional CSS section
4. Paste the CSS generated from the CSS code textbox into the Additional CSS text box at the bottom
5. Click Publish to save the CSS
6. Click the Select HTML button to highlight the HTML text
7. In a new or existing Post or Page edit screen, add a Custom HTML block wherever you want the gallery to appear
8. Paste the HTML from the HTML code box into the Custom HTML block
9. Publish or Update the page

jgdGalleryMaker only generates an HTML snippet to be used inside an existing web page.

---

About Local Storage

jgdGalleryMaker stores information to the brower's local storage. This information is used for the purposes of remembering a previously created gallery.

The information consists of the image URLs and stored settings, such as image sizes, etc.

Removing the gallery clears the local storage settings.

---

* It is highly advised to only add images to your gallery that you own or have permission to use.