The Gallery Section

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.

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:

Image Size & Format

MyPhotoApp works with images in the following formats jpeg, png, and Gif. You can choose to upload high-resolution images and allow MyPhotoApp to automatically resize them there is no file size limit if you choose to do this but upload speeds for large numbers of high resulution images will be slower. When images are automatically resized on upload they will be resized to the upload Max Size set in the gallery settings which by default is 1024 px on the long edge. You can set the size you want up to a maximum of 2048 px. For best results and full control over your image quality, you should export your images to the format you want and the appropriate finished size up to 2048px on the long side with a file size less than 1mb. Images with a file size greater than 1mb will be compressed when saved to the MyPhotoApp server.

To Upload images

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 counting down as each image upload is completed. There is also an overall progress indicator showing the overall % completed at the top of the File Upload window. As each image is added to the gallery thumbnail displays a tick. If you want to add more images to the upload you can just drag them onto the file upload window whilst it is still open. 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. If there is a problem uploading an image you will get an 'X' instead of a tick you can click the retry failed uploads button to see if that resolves the issue if not it may be an issue with the image check the file size of the image you are uploading to make sure it is less than 15mb in size and that it is the correct file formate, jpeg, png or gif.

Once your images have finished uploading they'll be displayed in the Gallery section 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:

Edit Captions - click on the edit captions button to open a menu with each image displayed with a text box to enter individual captions. Enter keywords and tags to improve your SEO for images.

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:

Unselect All: To quickly deselect the images you have selected click on the Unselect All button.

Thumbnail size: 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.

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.

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.

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:

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.

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 Sequence: When images are viewed by clicking one to enter the gallery view the number displayed in the top left-hand corner indicates the sequence or image position in the gallery in terms of the total number of images, for example, image 1 of 12 is displayed as 1 /12. Tick this box to remove this information from the gallery when viewed.

Disable Fullscreen: The full-screen option on the gallery removes any browser toolbars etc. tick this box to disable it.

Disable Captions: If you have added keyword captions to your images to improve SEO tick this box to hide them when images are viewed in the gallery.

Number Images: Tick this box to add consecutive numbers to the images in the Gallery when viewed as thumbnails in the App with the majority of the gallery layouts options with the exception of the following layouts, slideshow, slider, Ken Burns and magazine.

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.

Watermark Image: upload a unique watermark png file that will be applied to just this gallery instead of any default watermark available when a watermark placement option is selected.

Disable Sharing: Click this box to totally remove the option of image sharing in the Gallery.

Disable Facebook Sharing: Click this box to remove the option of sharing Gallery images via Facebook.

Disable Twitter Sharing: Click this box to remove the option of sharing Gallery images via Twitter.

Disable Pinterest Sharing: Click this box to remove the option of sharing Gallery images via Pinterest.

Disable image download: Click this box to remove the option to download images from the Gallery.

If you have upgraded to MyPhotoApp from Sticky Albums you can automatically migrate images from your former sticky Apps to a new App by clicking this button and adding the App URL. Then simply click the Import Sticky Albums Photos into Gallery button to add your images.

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. The text displayed will be whatever you have entered in the layout settings SEO text section for that App. You can test how an app will look on Facebook by posting it on your timeline for you only.

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.

Download All Gallery Images

You can add a button to your app that will download all the images in a gallery as a .zip file. You just add a link of the following syntax:

When the button (or link) is pressed, all images in the gallery that is labeled gallery2 will be downloaded as a .zip file.