Documentation

A. Installation and Registration

A.1 Installation

For Dreamweaver CS6, CC, CC 2014, CC 2014.1, CC 2014.1.1
- open the "DWMasonryGallery_[version-no].zxp" file using Adobe Extension Manager;
- restart Dreamweaver.
For Dreamweaver CS5.5, CS5, CS4
- open the "DWMasonryGallery_[version-no].mxp" file using Adobe Extension Manager;
- restart Dreamweaver.

Install Dreamweaver Reveal Effects using the Adobe Extension Manager

A.2 Where to find the extension in Dreamweaver


Extend Studio products are available in the "Insert" window in Dreamweaver. Click CTRL+F2 (Command+F2 for MAC) to display the Insert Window.
If the "Insert" window is displayed as Tabs, below the main Dreamweaver menu, the Extend products should appear on the right side of the Tabs.

Insert DW Masonry Gallery for Dreamweaver


If the "Insert" window is displayed as Floating Panel (usually displayed on the left or right of the working area, depending on the Workspace settings: developer, designer etc) you need to click on the Common drop-down - marked with a down arrow.


Adobe Dreamweaver Insert Window - Dreamweaver Reveal Effects

The Extend Studio products should appear in the pop-up list.

Insert DW Masonry Gallery for Dreamweaver

A.3 Registration

A.3.1 How to register the extension

When you'll first start the extension, a registration pop-up will appear. Paste the code from the email that you have received from Extend Studio after buying the extension or click on "Use as trial" to use it free for 10 days.

Insert DW Masonry Gallery for Dreamweaver

In the trial mode, when you load the page into the browser you will get the following Javascript alert: "This page contains a gallery created with DW Masonry Gallery . Not for commercial use!".
After you register the extension, all you have to do is to edit one of the effects that were created with the trial mode and update it in order to remove the "Commercial use" Javascript alert.
After registering the extension, the "Commercial use" Javascript alert will not appear when you view the page in browser.

A.3.2 Registration Errors
The error messages could be due to many different reasons - choose a solution from the list (below) which corresponds to the error code displayed on your screen.
301 : This message indicates that the license key which you have entered is already in use. If you are trying to install a single user license - you would have to reset the license from the Extend Studio website - "My orders" section.
License Invalid : this implies that the serial number entered by you is incorrect. Make sure you are entering the correct license key.
If it still doesn't work, go to Account "My orders" section and from there you can obtain the correct license key.
If you need more assistance regarding registration, you can email us to support [at] extendstudio.com

B. Add a DW Masonry Gallery

B.1 Overview

In order to add a DW Masonry Gallery, you need to create a html page inside a site. If you don't know how to define a site in Dreamweaver, check this page for help: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

After clicking the "Add DW Masonry Gallery" button, the DW Masonry Gallery Editor appears.

It has 3 sections - Templates, Settings and Image Manager .

Insert DW Masonry Gallery for Dreamweaver

 

B.2 Templates

Inside the Templates section you can:

1. Navigate through the 15 available included templates. Preview with each template and the effects applied on it.

Insert DW Masonry Gallery for Dreamweaver

2. Click on any gallery image to see how the lightbox looks:

Insert DW Masonry Gallery for Dreamweaver

3. Navigate through the Gallery Albums using the albums buttons from the top of the template:

Insert DW Masonry Gallery for Dreamweaver

4. View more images and preview this effect. Scroll down and a Load More appears. Click it to load more images.

Insert DW Masonry Gallery for Dreamweaver

After you choose the skin you can either Customize the template, by clicking the Customize this template button, or go to the Image Manager to change images.

B.3 Image Manager

B.3.a Overview

Click on the Image Manager button to add/ remove/ edit images and albums.

Insert DW Masonry Gallery for Dreamweaver

 

B.3.b Manage Albums

- change the albums order using the left control to drag it and drop it in the desired position;

- remove an album by clicking the delete (x) icon in the right of each album;

- add new album by clicking the new album button.

- if you want to move or copy a photo to a different album, click the image and select the desired album.

Insert DW Masonry Gallery for Dreamweaver

 

B.3.c Manage Images

 

Insert DW Masonry Gallery for Dreamweaver

Inside the Images section:
- the selected album is always shown at the top of the section, so it makes it easy to see which album you're editing;
- add and remove images using the add (+) and remove (-) buttons;

When you click the add images button you are able to browse for the images in your computer and upload them inside the gallery:

Insert DW Masonry Gallery for Dreamweaver

- move images using the drag and drop feature. Select the image, drag it and drop it to the desired location.

Insert DW Masonry Gallery for Dreamweaver

 

B.3.d Image Settings

 

Insert DW Masonry Gallery for Dreamweaver

Inside the Image Settings section:
- the image name and settings are displayed (format, dimensions, file size);
- add image HTML attributes like title and alt texts;
- add image url and link target - The link works on the image when the lightbox is disabled;
- add image description - here you have more options:
1. the appears when hovering an image;
2. you can select the text to always appear under the image;
3. the image description also appears inside the lightbox.
- click the Delete Image button to delete the selected image.

 

B.4 Settings

Here you can change gallery layout settings like dimensions, components etc.

Insert DW Masonry Gallery for Dreamweaver

 

B.4.a.i General Settings

Here you can:

- set the gallery width and height - the width is defined on columns ;
- select the items to show when the gallery is loaded;
- enable infinite to scroll ;
- define the number of initial images to be displayed when the gallery opens -the rest of the images will be displayed when the user clicks the LOAD MORE button.
- define the tablet and mobile breakpoints for responsive design;
- set the width defined in columns on mobile and tablet;
- choose the item spacing - defined in percents.

Insert DW Masonry Gallery for Dreamweaver

 

B.4.a.ii Albums and Load More Buttons

Here you can:

- enable/ disable the show albums buttons option;
- align albums buttons - left, centered, right;
- set album buttons dimensions ;
- set load more button dimensions .
- enable hover transition and duration ;
- set the album change duration;
- align the load more button;
- type the load more button text to be displayed ;
- enable the show albums as dropdown on mobile option;

Insert DW Masonry Gallery for Dreamweaver

B.4.a.iii Titles and Descriptions

Here you can enable/ disable the images titles and descriptions to be displayed.

Insert DW Masonry Gallery for Dreamweaver

Choose the way you want the image title and description to be displayed:
1. don't show text at all ;
2. when hovering over the image ;
3. hover overlay and text under the image ;
4. always under the image .

Insert DW Masonry Gallery for Dreamweaver

Here you can:

- enable/ disable the lightbox ;
- choose lightbox skin ;
- set the text position inside the lightbox ;
- choose the elements you want to be displayed inside the lightbox - title, description, prev/ next buttons and close button ;

Insert DW Masonry Gallery for Dreamweaver

B.4.a.v Image Effects

Here you can:

- define image effect duration and easing effect;
- enable border radius , image shadow, image opacity (on idle images);
- rotate images;
- scale images;
- enable black and white effect and also set the black and white effect state;

Insert DW Masonry Gallery for Dreamweaver

Inside the Design tab you can edit the design of the Albums and Load more Buttons , Title and Description and Lightbox .

Insert DW Masonry Gallery for Dreamweaver

B.4.b.i Albums and Load More Buttons

Albums Typography

Here you can:

- set the font settings for the idle (normal), hover and selected states;
- choose the font family ;
- set the font size, weight and font color ;
- define the albums buttons background color .
- set the letter spacing and line height ;
- set the text align and text style .

Insert DW Masonry Gallery for Dreamweaver

 

- add web font by clicking the ADD WEB FONT button:

Insert DW Masonry Gallery for Dreamweaver

Load More Typography

Here you can:

- set the font settings for the idle (normal) and hover states;
- choose the font family ;
- set the font size, weight and font color ;
- define the albums buttons background color .
- set the letter spacing and line height ;
- set the text align and text style ;
- add web font .

Insert DW Masonry Gallery for Dreamweaver

 

Albums and Load More Box

Inside the Box section you can:

- change the tabs box settings: set the margins, paddings, borders and rounded corners for albums and load more buttons;

Insert DW Masonry Gallery for Dreamweaver

 

B.4.b.ii Titles and Descriptions

General

Here you can:

- define the image overlay color and alpha (opacity );
- define the background color and transparency ;
- set the effect type and speed ;
- add an overlay background image .

Insert DW Masonry Gallery for Dreamweaver

Typography

Here you can:

- set the font settings for the title and description elements ;
- choose the font family ;
- set the font size, weight and font color ;
- define the letter spacing and line height ;
- set the text align and text style ;

Insert DW Masonry Gallery for Dreamweaver

Web Fonts

- add web font by clicking the ADD WEB FONT button:

Insert DW Masonry Gallery for Dreamweaver

Box Settings

Inside the Box section you can:

- change the tabs box settings: set the margins, paddings, borders and rounded corners for albums and load more buttons;

Insert DW Masonry Gallery for Dreamweaver

B.4.a.iii Lightbox

General

Here you can:

- define the lightbox overlay color and alpha (opacity ) - it represents the background color that displays behind the lightbox;
- choose the lightbox open effect and effect speed .

Insert DW Masonry Gallery for Dreamweaver

To preview the Gallery lightbox inside the Editor click on any image and it will be displayed.

Insert DW Masonry Gallery for Dreamweaver

Typography

Here you can:

- edit the font settings for the title and description elements that appear inside the lightbox;
- choose the font family ;
- set the font size, weight and font color ;
- define the letter spacing and line height ;
- set the text align and text style ;
- add web font.

Insert DW Masonry Gallery for Dreamweaver

C. Webadmin

The webadmin is a Masonry Gallery component that helps you or your client to change the gallery images online.
It does not require a database, all the images are generated from an XML file.
You will be able to access the webadmin in the browser by typing: www.domain-name/webadmin

C.1 Installation

Install the Masonry Gallery PRO version on your Dreamweaver.
- For Dreamweaver CC 2015, download the extension installer from here: http://www.extendstudio.com/extension_manager/download
- For Dreamweaver CS6, CC, CC 2014, CC 2014.1, CC 2014.1.1 - open the "DWMasonryGallery_[version-no].zxp" file using Adobe Extension Manager; - restart Dreamweaver. For Dreamweaver CS5.5, CS5, CS4 - open the "DWMasonryGallery_[version-no].mxp" file using Adobe Extension Manager; - restart Dreamweaver.

C.2 Add a Webadmin

You can add a Webadmin to an existing gallery. Click on the Add Webadmin button to add a Webadmin to your existing Masonry Gallery.

Insert DW Masonry Gallery for Dreamweaver

The Add Webadmin interface will appear. Here you have to choose the webadmin folder name. The default is webadmin. Therefore, accessing the webadmin in your browser you will have to type: www.domain-name.com/webadmin (or the correspondent folder name).
Add a login name and a login password for your webadmin.

Insert DW Masonry Gallery for Dreamweaver

After you finish with these settings, all you need to do is to upload all the files to the server.

C.3 Access the Webadmin Online

To access the webadmin on your site, you will have to type: www.domain-name.com/webadmin (or the correspondent folder name).
The following screen will appear:

Insert DW Masonry Gallery for Dreamweaver

Type the username and the password in order to login to the webadmin interface.
This interface is the same as the Masonry Gallery Image Manager.

Insert DW Masonry Gallery for Dreamweaver

From the Webadmin online interface you can:
- Choose the gallery you want to edit - you can have more galleries to a webadmin and you can manage which gallery you wish to edit from the online webadmin.

Insert DW Masonry Gallery for Dreamweaver

- Manage your Gallery Albums - from the left side of the album name you can move the album order on the list. There is also a "delete" button that helps you remove the album from the gallery.

To create a new album, click the "New Album" button.

Insert DW Masonry Gallery for Dreamweaver

- Manage Images - Click the "add" button to add a new image to the selected album.
Select the image you want to remove and click the "delete" button to remove it.

Insert DW Masonry Gallery for Dreamweaver

- Manage Image Properties - From the right side of the Webadmin Image Manager you can set the image properties.

Insert DW Masonry Gallery for Dreamweaver

After you finish with all the changes, click the "Save" button and the changes will be saved.

Visit the page with the gallery to see if the chamges were applied.

To logout from the Webadmin Image Manager, click the "Logout" button.

D. Edit DW Masonry Gallery

Once inserted in Dreamweaver the DW Masonry Gallery will be displayed as a grey rectangle with the logo inside.

Insert DW Masonry Gallery for Dreamweaver

To edit the gallery, click the Edit Gallery button from the DW Insert Window.

Insert DW Masonry Gallery for Dreamweaver

After you finish changing the Gallery settings, click the "Update" button and the effect will be updated.
Note: When you change the preset, the content of the Gallery remains but the design settings will be replaced with the settings from the new preset.
After finishing editing the gallery, click the Update button.

Insert DW Masonry Gallery for Dreamweaver

E. Add Existing DW Masonry Gallery

The "Add Existing DW Masonry Gallery" function helps you insert an existing instance of the Gallery to another page, so that you don't need to recreate it from scratch.
In order to add an existing instance of Gallery on your page, first put the mouse cursor inside the container where you want it to be added.

Click the "Add Existing Gallery" button and a popup will appear. Choose the existing Gallery instance that you want to reinsert. Click OK.

Insert DW Masonry Gallery for Dreamweaver

F. Delete DW Masonry Gallery

 

Insert DW Masonry Gallery for Dreamweaver

In order to delete a DW Masonry Gallery instance you have to select it inside the page and click the "Delete Gallery" button.

G. Requirements

1. The extensions works on PC or MAC on the following Dreamweaver versions: CS4, CS5, CS5.5, CS6, CC, CC 2014, CC 2014.1, CC 2014.1.1.
2. The page where you use the form must have a HTML5 Doctype, because it has datatype attributes that are HTML5 specific. Click here for more information about the doctype and its importance.

H. FAQ

1. Can I use the license to add the extension in an unlimited number of websites?
Yes. This is an unlimited sites license, therefore you can use it for an unlimited number of websites.

2. Can I use the license to work on my both work and home computers?
We offer a secondary free license at the user's request. All you have to do is send an e-mail to support [at] extendstudio.com and ask for a secondary free license.

3. How can I move the extension to a new computer?
You will have to download the extension from your extend studio account and install it in on the new computer. Before registering, you will have have to reactivate the serial number by clicking the correspondent "Reset license" button from your account.