Skip to main content
Inspiring
May 18, 2018
Question

Searchable Image Gallery

  • May 18, 2018
  • 3 replies
  • 2030 views

Can anyone recommend a simple way to configure a gallery of images to be searchable via a search text input field? I have a site built in Dreamweaver CC using Bootstrap Framework that has thousands of images files that I need for a user to be able to search through for specific images.

here's a link to a gallery page file:

https://www.doormatsandmore.com/Sample-Image-Gallery/index-ToughTop-01.html

Thanks.

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Community Expert
    May 19, 2018

    Evidently, your images don't  contain any metadata either. 

    online metadata and exif viewer

    You could use Bridge to add keywords and other metadata to your images.

    https://industrydev.com/adding-metadata-to-photos-using-templates-in-adobe-bridge/

    Later on,  export image metadata to a text or CSV file.

    Exporting Bridge metadata to Excel or CSV

    Nancy O'Shea— Product User & Community Expert
    Legend
    May 19, 2018

    Theres no real simple way for thousands of images, you have to implement some organisation initially. That means storing your image details in a database where you would also store keywords associated with the images. A user would then enter a keyword in the search form field on your website page and return any image which has that keyword associated with it.

    You could also store the images as a category in the database and have a drop down menu on your website page from which the user could choose from the available categories.

    Much smaller galleries could be accomplished without a database by using jquery to select them by a data-category name which you would incliude as part of the images src attributes  but if you have dozens of images associated with a data-category you would want to split the returned results over several pages not just dump the whole lot on a single page. Do a google search for - jquery searchable image gallery for simple examples with limited images.

    The initial organisation of the images and how you want the search to work is the time consuming and thought provoking part of the exercise. Getting the correct results from a database or jquery solution is a few minutes work.

    At the moment it looks like you are manually creating pages for your gallery and numbering them from 1-11, which if this is the case its not an efficient way of managing large amounts of data.

    BenPleysier
    Community Expert
    Community Expert
    May 19, 2018

    This example was made using Wappler Basic. Because this version does not include database options, a JSON dataset has been used. A JSON dataset can be created from your MySQL database​.

    The example can also be created in Dreamweaver using the following extensions

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!