How to Add, Edit and Delete Photos Using the Masonry Module

Is your Virteom powered website utilizing the Masonry Photo Module? Adding new photos to your gallery is really simple and even allows you to upload multiple images at one time. The one real advantage of using the masonry module is so that you can display images in groupings or categories on a singular webpage. This allows you to separate images out into different galleries so like photos can appear together.

For example: Say you're a landscaper and you have a webpage entitled "Hardscapes". You may want to output multiple galleries on this single page to break out each type of hardscape you've done: walkways, patios, pergolas, steps, fire pits, etc. The masonry photo module allows you to accomplish this. You can set multiple categories, and multiple galleries in that one category - all to output on one single webpage.

In this how-to article, we explain how to add a new category, add a new gallery, edit an existing category, edit an existing gallery (adding images to an existing gallery), and how to delete categories, galleries, and images in the Masonry Photos module powered by RocketSites.

Logging-In

First things first, you must log-in to your Virteom powered website. You can do this by visiting your website and adding /virteom at the end. This will take you to the log-in screen for the site.

  1. Enter your email address in the email field
  2. Enter your password in the password field
  3. Click 'Login'

Log-In Screen | Virteom

Navigate to the Masonry Grid Module

Once you're logged-in you click 'Dashboard' from the top gray editor menu.

Dashboard Navigation | Virteom

After clicking 'Dashboard' use the left sidebar menu to navigate over to 'Modules'.

navigate to modules

Underneath the 'Modules' title, select 'Masonry Photos' from the menu.

Modules > Masonry

How to Add a Category to the Masonry Photos Module

If you're just starting out with the masonry photos module then you'll need to add a new category. To do this, click the Add New Category button on the page.

add category | masonry module

Please note: In order to add images to a category, you must first add a category and then add a new gallery to the category.

When you click 'Add New Category' in the Masonry Photos module new page loads. This page requires you to enter the following information:

  1. Title: This displays above the gallery
  2. Description: This is what outputs below the title. Be sure to use keywords here for SEO :)
  3. Display Order: This is the order it appears in on the page
  4. Page(s) this shows up on: This is a multi-selector that allows you to designate what page the category shows on.
  5. 'Save' --> When you've entered your new category you must hit 'save' so that you can add a gallery to it.

add new category

Example of Title + Description:

preview of masonry grid

Once you have created a category for your gallery, to start adding photos you need to Add a New Gallery. To do this, navigate back to the main module screen and click on the 'Add New Gallery' button.

how to add a gallery to masonry module

When you click 'Add New Gallery' in the Masonry Photos module, a new page loads. This page requires you to enter the following information:

  1. Name: This does not display on the page, rather just the name of the gallery for back-end use.
  2. Description: This does not output on-page. This is for back-end use
  3. Display Order: This is the order it appears in on the page
  4. Category Select: This is where you assign the gallery to a specific category.
  5. Page(s) this shows up on: This is a multi-selector that allows you to designate what page the gallery shows on.
  6. Select Page to Link to (Dropdown) OR URL (Text Enter): If the image needs to link to another page, you can choose the page on your website through the dropdown menu; or if you need to link the image to an external source you can paste the URL in the "OR URL" box.
  7. Multiple Image Upload: Browse File: Now that you gave your gallery a name and chose which page it will appear on, you can add photos to the gallery by browsing your computer
    1. Please Note: The order for which your images will appear is by the order in which they are loaded in. The first image that is loaded in will be the first image in the gallery.
  8. Upload Now: Once you have selected the photos that should appear in your gallery, click 'Upload Now'. This uploads your images to the gallery.
  9. Save: You must click 'Save' after making changes to the gallery

Masonry Photos

You have now created a new category and a new gallery for images to output! Check the page you designated for these images to show-up on and Wah Lah! You're done :) You now know how to create a new category using the masonry module and create a new gallery using the masonry module.

How to Edit an Existing Category

To edit an existing category in the masonry module head back to the main module dashboard and click 'Edit' next to the category you'd like to change.

Please Note: Be sure in the 'Type' column you're editing a category and not a gallery.

how to edit an existing category

When you click 'Edit' in the Masonry Photos module new page loads. To edit the information on the page, locate which piece you want to change and start typing: 

  1. Title: This is what displays above the gallery
  2. Description: This is what outputs below the title on the webpage.
  3. Display Order: This will allow you to change the order the gallery appears on the page.
  4. Page(s) this shows up: This is a multi-selector that allows you to designate what page the category shows on. You can edit this by using the deselect / select options.
  5. 'Save' --> Once your edits are made hit 'save' so that you can view your changes.

add new category

Want to add photos or edit photos that already exist in the masonry module on your RocketSite? It's simple enough. Once you're on the main module page, click 'Edit' next to the gallery you'd like to edit or add photos to.

Please Note: Be sure in the 'Type' column you're editing a gallery and not a category.

Edit Existing Gallery

When you click 'Edit' next to an existing gallery in the Masonry Photos module new page loads. To edit the existing gallery you may use the designated fields below. To add new images to the gallery

  1. Name: This does not display on the page, rather just the name of the gallery for back-end use. You can change it by typing into the field.
  2. Description: This does not output on-page. This is for back-end use. You can change it by typing into the field.
  3. Display Order: This is the order it appears in on the page. You can change it by typing into the field.
  4. Category Select: This is where you assign the gallery to a specific category. You can change it by using the multi-select to click/unclick the designated category.
  5. Page(s) this shows up on: This is a multi-selector that allows you to designate what page the gallery shows on. You can change it by using the multi-select to click/unclick the designated page.
  6. Select Page to Link to (Dropdown) OR URL (Text Enter): If the image needs to link to another page, you can choose the page on your website through the dropdown menu; or if you need to link the image to an external source you can paste the URL in the "OR URL" box.

    How To Add Images to an Existing Gallery: 
     
  7. Add New Images to an Existing Gallery: Utilize the Multiple Image Upload: To upload a new image Browse File: Now that you gave your gallery a name and chose which page it will appear on, you can add photos to the gallery by browsing your computer
    1. Please Note: The order for which your images will appear is by the order in which they are loaded in. The first image that is loaded in will be the first image in the gallery.
  8. Upload Now: Once you have selected the photos that should appear in your gallery, click 'Upload Now'. This uploads your images to the gallery.
  9. Save: You must click 'Save' after making changes to the gallery.

Masonry Photos

Deleting Images from the Masonry Photos Gallery

  1. If you'd like to delete an image from your masonry photo gallery, click the 'X' icon next to the file name.
  2. A new window will populate and ask if you are sure. Click 'Delete'.

deleting an image from multi-upload

If you'd like to completely delete a category or gallery from your website, head back over to the Masonry Photos module inventory page (steps mentioned above).

From the inventory page, click 'Delete' next to the gallery you'd like to remove or next to the category you want to remove.

It will ask you if you're sure if you'd like to delete the record click 'Delete'.

Delete Record


In this how-to article, we explained how to add a new category, add a new gallery, edit an existing category, edit an existing gallery (adding images to an existing gallery), and how to delete categories, galleries, and images in the Masonry Photos module powered by RocketSites.

WEBSITE MAINTENANCE & SUPPORT FROM VIRTEOM

If you have any questions or your site is not running the Masonry Photos module - reach out to a Virteom support team member today! We'll be happy to help.

CONTACT SUPPORT

Most Recent

How To Set A Social Share Image for a Page

By Alesha Wireman
May 01, 2020 Category: Learning, Modules, How To

Need to know how to you upload a social share image on your RocketSite? It's easy! You can upload or change a social share image for every individual page on your website in no time!

How to Add, Edit and Delete Photos Using the Masonry Module

By Olivia Justice
March 23, 2020 Category: Learning, Modules

Is your Virteom powered website utilizing the Masonry Photo Module? Adding new photos to your gallery is really simple and even allows you to upload multiple images at one time. The one real advantage of using the masonry module is so that you can display images in groupings or categories on a singular webpage. This allows you to separate images out into different galleries so like photos can appear together. For example:Say youre a landscaper and you have a webpage entitled Hardscapes. You may want to output multiple galleries on this single page to break out each type of hardscape youve done: walkways, patios, pergolas, steps, fire pits, etc. The masonry photo module allows you to accomplish this. You can set multiple categories, and multiple galleries in that one category - all to output on one single webpage. In this how-to article, we explain how to add a new category, add a new gallery, edit an existing category, edit an existing gallery (adding images to an existing gallery), and

How to Create Private Pages with Virteom

By Olivia Justice
August 21, 2019 Category: How To

Sometimes you don't want everypage on your website accessible to the general public. That's why we offer the ability to create private pages that are only accessible to a designated user.

Address

  • Virteom LLC
  • 36711 American Way
  • Suite 2D
  • Avon, Ohio 44011

Most Recent Blogs