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
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.
Check Out The Gallery
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.If you want to add or change a Caption or Link for a single Image you can simply right click on it to open the Photo Settings
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.
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.
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.
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 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.
3. Image Sharing
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.
4. Import Images
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.
5. 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. 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.