Welcome to TalkGraphics.com
Results 1 to 10 of 19

Hybrid View

  1. #1

    Default Best Photo Gallery For Good Page Load

    Working in XDP X version 19, on a windows 11 Pro.
    Iím nearing completion of website.
    Doing some fine tuning.
    I am hung up with how to best display photos.

    Current website in development:

    https://draft-review.com/

    Photo gallery on Residential and Commercial pages are memory intensive and slow to load.
    And time intensive on the design side.
    This customer regularly sends photos to add, and we drop older pictures.
    Also likes photos to auto start and have description.

    Is there a gallery template or widget, or software that may work better for this scenario?

    As always, I sure appreciate insights from folks here.

  2. #2
    Join Date
    Dec 2006
    Location
    Melfort, Saskatchewan Canada
    Posts
    850

    Default Re: Best Photo Gallery For Good Page Load

    Hi Sue. I’ve played a bit with some of the gallery offerings from Xara. “Some” of the smart grids work, others not. Standard with me is making my own smart grid, with a click on the photo to enlarge. I’ve got a terribly picture heavy site. Pardon some of the blurry pop ups. This was a Xara offering.

    https://melfortmuseum.org/indigenous...ay%202022.html

    Many will chime in with some other ideas. But I think a simple grid, with some pop up effects work well.

    -Bill
    Bill Wood
    Charity Web Design
    XARA Pro+. WD17, Designer 17. Premium packages.

  3. #3

    Default Re: Best Photo Gallery For Good Page Load

    Bill,

    Thank you for sharing your thoughts and website link.
    Your website is beautiful.

    I dug through previous threads and found @Acorn shared this with me:

    https://www.talkgraphics.com/showthr...804#post513804

    This is the gallery I'm currently using, and it is great!
    It was helpful to find this post by Acorn to refresh my memory on edits.

    Issue of large amount of photos for customer had been addressed here before.
    Since this customer asked me to overhaul website, it brought me back here to see if there was a new or better approach to large galleries.
    The customer agreed to drop old pics so we can downsize gallery some.

    Question: What is suggested max number of pics for gallery and/or max file size of page for best page load?

    Also, it seems one of the moderators shared link to website that helps create galleries.
    I looked, and haven't found in my threads here. Perhaps I'm mistaken.

    I plan to continue with current gallery, unless someone points me another direction.
    Thinking of variation of Acorn's wondering if grid without shadow and frame softgroup will save overall size?
    If not, I do like look as is.

  4. #4
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    938

    Default Re: Best Photo Gallery For Good Page Load

    Sue,

    These examples follow the create, format one, and clone to match the grid size you require; the key attribute is that they transition from a desktop to mobile grid. As each is shared between variants, changing in one variant changes the other:

    https://initiostar.co.uk/demo/Photo_Template/

    https://initiostar.co.uk/demo/simple_grid/

    Any number of variations to this approach.

    Number of photos is a design choice, but I would have thought that much more than 20-30 unless each is significantly different would not be viewed.

    The performance with the examples seems OK.
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,219

    Lightbulb Re: Best Photo Gallery For Good Page Load

    Both, there are several issues with either solution.

    Topmost, they rely on Highslide JS, which is now dead in the water.
    Xara is still using Version: 4.1.13 (2011-10-06), a tad old.

    Sue has some 70 images on a page, each around 60kB, so loading in the site requires the design file to be holding 10MB in images and probably far more if they are originals scaled down.
    This is why Sue has a design file of around 150MB.

    Sue has mentioned frequent image changes.
    Republishing for one image is a sorry state of affairs and ties Sue into a never-ending support cycle.
    I would only do this if I had a good maintenance contact.

    Highslide JS can be manipulated to link to external assets but there would be a lot of bespoke code to achieve this.

    So I consider the following are Sue's actual needs:
    1. Have a Thumbnail Image Gallery capable of handling 100+ images per page.
    2. All large images to be treated as external assets; not part of the design file.
    3. Should retain the original image file name for better Accessibility, the Cinderella to her ugly Step-Mother, SEO.
    4. Each image is to have an associated description.
    5. All metadata should be external to the design file.
    6. Does not rely on legacy or moribund widgets or components.
    7. Should only be a Just-In-Time download when an image is expanded; the current terminology is lazy loading.
    8. The Gallery can be invoked to present the large images sequentially in a carousel.
    9. The carousel can be paused.
    10. The carousel can be restarted at any picked thumbnail.

    Personally, I would find a carousel a lazy approach and would prefer the viewing of a large image to be manual selection.

    My goto for the above would have to be https://nanogallery2.nanostudio.org/builder.html. I don't believe you can achieve 8,9 or 10 but the overall impact of the design is superb.
    The only thing that differs from a Xara design is that it requires a separate Thumbnail.
    Now in the past, I have used Get fills in the Fill gallery and navigated to an external local folder of images and linked to that. In doing so, Xara creates a xarainfo sub-folder of 128px square Thumbnails.
    If the images are already on a web server, you could set up a network share to a spare drive letter and access them that way.
    Remember to delete the installed from from the Fill gallery, you were only using that to get some thumbs.
    There are plenty of Thumbnail generators around.

    You would publish and update the nanogallery pages separate from Xara.
    To see changes all you need is a refresh of the published website pages holding a Placeholder IFRAME to the nanogallery HTML page.

    What you do not want to do is embed the nanogallery code directly into a Placeholder.
    This is for demonstration only: NanoGallery - Demo.xar.
    Instead your Placeholder must be a link to a web page otherwise you lose the decoupling of the gallery and the Xara design.

    Note, it is only three images but I have created a simple gallery across two variants, all in 25kB. Beats 150MB.

    Acorn
    Acorn - installed & active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy

  6. #6

    Default Re: Best Photo Gallery For Good Page Load

    Gary, thank you for sharing the links solutions that you thought of.
    I did take some time to check it out. Perhaps that may work in another project.

    Acorn, thank you for the detailed information.
    Your goto nano slider is the webpage I was thinking of that was shared somewhere here before.

    It looks like there will be a little bit of a learning curve for me to digest what youíre sharing.
    Ultimately, though it looks like it would be a much better solution once I learn it.
    Since my current gallery has been real labor intensive to edit, I'm ready/willing to learn.
    I may pop in with a question as I work on it.

    Interesting when you talk about your preference to viewing of large image to be manual selection. I think that looks better.
    The customer likes auto start. Iíll run the idea by him to see if he might change his mind.
    Itís hard sometimes when people have preferences that I donít think flow or look nice, or send me bad quality pictures.

    Many thanks to everyone that shares insights.

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,219

    Info Re: Best Photo Gallery For Good Page Load

    Quote Originally Posted by hotrodsue View Post
    Gary, thank you for sharing the links solutions that you thought of.
    I did take some time to check it out. Perhaps that may work in another project.

    Acorn, thank you for the detailed information.
    Your goto nano slider is the webpage I was thinking of that was shared somewhere here before.

    It looks like there will be a little bit of a learning curve for me to digest what you’re sharing.
    Ultimately, though it looks like it would be a much better solution once I learn it.
    Since my current gallery has been real labor intensive to edit, I'm ready/willing to learn.
    I may pop in with a question as I work on it.

    Interesting when you talk about your preference to viewing of large image to be manual selection. I think that looks better.
    The customer likes auto start. I’ll run the idea by him to see if he might change his mind.
    It’s hard sometimes when people have preferences that I don’t think flow or look nice, or send me bad quality pictures.

    Many thanks to everyone that shares insights.
    Sue, it should not be too hard.

    Follow these steps:
    1. Create an on-line folder for your images: .../Images/Commercial - note the full path, your Base URL.
    2. Do the same for your Thumbnails - try the Fill gallery approach as a first go. This is your Thumbnail URL. If it is a sub-folder, you can use relative addressing.
    3. Open https://nanogallery2.nanostudio.org/builder.html
      1. Input your Base URL
      2. Give the Gallery its name - the variant can be tweaked separately
      3. Click add image
        1. Create a Title
        2. Create a Description
        3. Input your Thumb Path to the thumbnail file like xarainfo/<name>.png
        4. Input the <name>.png for the main image

      4. Click apply settings and build gallery
      5. Copy to clipboard
      6. paste into atext editor and save out as gallery.htm
      7. Upload gallery.htm
      8. Test
      9. Rinse and repeat
      10. Tweak the setting to suit


    Only when happy worry about accessing it from your design.

    Acorn
    Last edited by Acorn; 11 August 2023 at 09:39 AM. Reason: Typos
    Acorn - installed & active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •