The Gallery Section offers a wide range of options for displaying your images, including the new magazine layout. It has now been updated to the latest menu format.
Adding Images To The Gallery
A gallery section is included in the default MyPhotoApp Template so the first thing to do is add some photos to the empty Gallery. There are 2 ways to do this
- Drag and Drop photos from an open folder on to the Gallery section in the Visual Design preview or
- Click on the Upload Icon to select a folder and photos
MyPhotoApp works with images in the following formats jpeg, png and Gif. For this example, let's click on the Upload Icon (1) and locate the folder with the jpeg images you want to use. Select the images you want to upload and click on Open (2) to start the process. In this example, I've selected 12 photos of Kelsie from her studio session.
The File Upload Window will open with thumbnails and progress indicators (3) counting down as each upload is completed. If you want to add more images to the upload you can just drag them onto the file upload window. When all of the images have been uploaded, the window will close automatically. If you want to cancel the upload, just click the close and cancel upload in progress button.
Check Out The Gallery
Once your images have finished uploading they'll be displayed in the Gallery in the Visual Design area. Click the Settings Cog on the left of the Gallery section in the Layout Sections area to open the Gallery Settings and select the options you want from the 3 menus:
You can toggle the size of the thumbnails you see in the Gallery settings by clicking the Thumbnail Size button, with each click it will toggle between small, medium, and large. The defaults display size for image thumbnails is medium.
You can rearrange images using drag and drop to put them in the order you prefer. Standard keyboard shortcuts can be used to select multiple images and position them:
- To select a block of adjacent images - click the first image and shift + click on the last image in the block to highlight all the images between.
- To select non-adjacent images - just click on each image you want to select.
- To move selected images click and hold on a highlighted image and drag where you want them.
- To deselect images click on the Deselect All button.
Tip: You can also quickly change the order of images using drag and drop in the visual design section of the builder. This works best if you are moving an image close to where it is currently located and is visible on the screen.
Alternatively, you can use the built-in options to sort them:
Sort photos: Click this button to sort the images by file name works best where you have named images according to the order you want or want them in chronological order when using file names.
Randomize Photos: Click this button to randomize the order of your photos, MyPhotoApp will arrange the photos for the best fit according to the layout chosen.
Delete Selected Photos: To delete individual or multiple images you have changed your mind about by simply clicking on each image you wish to delete to highlight it, then click the Delete Selected Photos button to delete ALL selected images.
TIP: You can also delete photos direct from the Gallery in the Visual Design by dragging them to the Photo Trash on the right-hand side.To add or change a Caption or Link for an Image right click on it to open the Photo Settings
Next click on the Settings Tab
Here you can make more choices about how your Gallery will look:
Label: Add a label to easily identify the gallery section in the builder - this will also be used in the App as if you choose the accordion display option for the section.
Layout: You can choose from 15 standard Gallery layouts plus the new magazine layout available with an Elite subscription. By default, the Gallery layout is set to Diptych. You can see a preview of how the layout will look in the visual design. By default, the image order is preserved with a few exception indicated below. Choose from the following options:
- Mosaic - Images are displayed in order with random sizes to create a pleasing mosaic effect
- Automatic - The App will choose the best option for the device it is being displayed on
- 1 Column - Images are displayed in a single full-width column up to the maximum width specified depending on the screen size.
- 2 Columns - Images are arranged in two equal width columns the width of the photos are fixed according to the max width of the device they are being viewed on, but the column size of the photos will vary. There isn't a true "row" of pictures if the pictures vary in size and orientation. Also, at the bottom of the gallery, the pictures won't line up and will be jagged.
- 3 Columns - As for the 2 column option but with 3 columns. Some minor changes to image order may occur to achieve a balanced layout.
- Block - Images are displayed in a block with a variable number across. The App will optimize the display to achieve the best look, and some minor changes to image order may occur to achieve a balanced layout.
- Block (preserve order) - If you don't want the app to optimize the order of images to create the most logical block display this option preserves the image order.
- Diptych - Images are displayed 2 to a row, the size of the hight of the row will vary in order to make the width come out to 100% of the width of the device it is viewed on.
- Diptych Featured Photo - As the Diptych layout but the first image in the gallery is displayed full-width as a featured image.
- Triptych Images are displayed 3 to a row, the size of the hight of the row will vary in order to make the width come out to 100% of the width of the device it is viewed on.
- Triptych Featured Photo -As the Triptych layout but the first image in the gallery is displayed full-width as a featured image.
- Slideshow - Images are displayed individually in an autostart slide show. Set the display and transition time in the settings menu. The default settings are 5 second for display and 1 second for the transition. There are no in App controls.
- Square 3 Columns - Images are displayed in 3 columns as squares. If the images in the gallery do not have an aspect ratio of 1:1 aspect they will be displayed using zoom and center as a square. Images are not physically cropped and when viewed in full screen the original image is displayed as uploaded. To create a true square layout upload images that are 1024 or 2048 PX on both edges.
- Slider - Images are displayed individually with a manual side to side swipe transition and next and previous navigation buttons. Tick the additional autostart setting to play the images automatically as a slideshow. A pause button is added on the right below the images to stop or resume the slideshow. Each image is represented by a dot below and clicking on any dot will jump to that image in the gallery.
- Ken Burns - Displays your pictures with motion in a square gallery layout. By default, the square is centered on the images with a small amount of movement. This will not necessarily work for all images and you can specify the start and end position of the motion from the image section in the gallery setting. Right-click on an image to open the photo settings and adjust the start and end position for the square display in the slideshow for a more pleasing result.
Set the display and transition time in the settings menu. The default settings are 5 second for display and 1 second for the transition. There are no in App controls. can only have one Ken burns Gallery App. To resolve pixelated images when zooming in upload larger Gallery images that are 2048 px on the long side.
- Magazine (Elite Only) - Turns jpeg single page layouts into flip book magazines. Images need to be in Portrait orientation. The layout automatically adjusts from a single page spread to a double page spread according to the screen size and also automatically changes when the device orientation changes from portrait to landscape. The first image will be used as the cover photo to also have a single back cover there needs to be an equal number of images included in the gallery.
Margin: This sets the Photo margin between images in the App in Pixels. 5 is a typical narrow margin
Include Names: Click this box to include the file names when the images are displayed in the gallery full-screen view. This is useful when you want clients to be able to identify an image when communicating with you.
Sort on Upload: ticking this box before uploading your images, will sort the images added to the gallery automatically by name when the image upload finishes.
Disable image download: click this box to remove the option to download images from the App
Disable Image Sharing: click this box to remove the option for image sharing in the App.
Upload Max Size: This allows you to set the maximum size on the long edge for images you upload to the Gallery. the default is 1024 px and the max size currently supported is 2048 px. Images smaller than the Max size set will be uploaded unaltered but any images larger than the Max size will resolve to the max set.
Watermark Placement: If you have uploaded a watermark in the setup tab this where you can choose how it is placed on the images. The default setting is None, choose from the following options:
None - Top left - Top middle - Top right - Center Left - Center Middle - Center right - Bottom left - Bottom middle - Bottom right.
3. Other Settings
This is where you make final adjustments to how your gallery section will be displayed by choosing various settings.
When you have finished choosing your settings click Save to close and apply the changes or the ‘X’ at the top right to cancel and close without applying any changes.
Choose A Photo For The App Icon
By default, the first image in the Gallery is selected as the App Icon, this is the image displayed on the Icon when it is downloaded onto a mobile device or added as a link in a Facebook Post like this.
If you'd prefer to use a different image just drag it over from the Visual Design area to the App Icon. You can then use the resizing handles to resize and position the selection box as in the example below.
TIP: You can choose to have an image for the App Icon that isn't included in the gallery by clicking the jpg upload button below the App icon and uploading a different file. You can also delete photos direct from the Gallery in the Visual Designer by dragging them to the Photo Trash on the right-hand side.