9 Replies Latest reply on Jan 23, 2014 9:45 PM by philmodjunk

    Ways of incorporating thumbnail grid of images

    RyanBuckley

      Title

      Ways of incorporating thumbnail grid of images

      Post

           Hey everyone,

           I'm working on a filemaker solution for an art collector. This is my first database where the client specifically requested mobile capabiliies. In fact, it is very important to him. I am, however, running into some shortcomings with filemaker's capability to accommodate a more visual/graphic viewing experience.

           The client expects a mobile experience similar to other apps. He wants to view images from the database in a grid, and wants to swipe-scroll through to visually recognize images, then tab their thumbnail to see the record. I tried implementing a dynamic grid using a number of portals with a self-join and calculation to load subsequent records (i.e. http://fmlayoutmode.com/wp/?p=1695) but it is very clunky to say the least, and does not work well for a variety of screen sizes (would have to have a separate layout for ipad, iphone, desktop...etc)

           So my question is, does anyone know of any plug-ins or third-party software that can work with filemaker to better allow for a graphic interaction with database images? He is imagining the mobile database to function like iphoto, or bento even. (Maybe there would be a way to store image files remotely with specific metadata about the records, and these images could be viewed with another program that could link to filemaker?)

           I really don't want to have to bail on filemaker at this point, as the whole rest of the system is working so well, but this mobile component is crucial to the client's wishes.

           Any suggestions would be greatly appreciated.

           --Ryan

        • 1. Re: Ways of incorporating thumbnail grid of images
          schamblee

               No matter the application, including portals or not, it's better to create a new layout for each device, too much difference in screen sizes.   Filemaker Go does not support Plug-in.  You can have a layout that display a grid of thumbnails then setup this container fields as a button to go to another layout to view a larger image.   You may be able to use a web viewer or 360works super container.

               I will do more research this afternoon and if I find anything I will post. 

          • 2. Re: Ways of incorporating thumbnail grid of images
            philmodjunk

                 One way to get a grid of images from a set of individual records is to use a grid of one row portals to a set of related records. The first one row portal can be set with "initial row 1", the second with "initial row 2" and so forth. Portal filters can also control what images shows in each one row portal used to produce your "grid".

            • 3. Re: Ways of incorporating thumbnail grid of images
              RyanBuckley

                   Thank you both for replying. I have seen the super container example, but I'm not sure if that will really solve the problem or not.

                   I found this thread a while ago <http://fmforums.com/forum/topic/50180-horizontal-and-vertical-photo-browser-finished-fm-8/#entry235065> and I've successfully replicated it with my filemaker solution....however the navigation is not very smooth, and loading the files from their remote storage folder takes far too long (the filesizes are never larger than 1mb, often they are in the 300kb range.)

                   I shy away from multiple layouts because of the time it takes to make changes to them, but perhaps in this case it will have to do.

                   Any suggestions for improving speed and usability using the solution i've provided in the link above?

                   It's just too bad that filemaker inc has dropped bento without offer some of its distinguishing features into filemaker.

              • 4. Re: Ways of incorporating thumbnail grid of images
                schamblee

                     I don't know how you could create a functional layout for an iPhone that looks good on an iPad or Computer.  Items have to be made larger on the iPhone so the user can see it and so the correct object/button is selected.  A finger is not as precise as a mouse.  Most of the starter solutions use different layout for each device, which you might want to take a look at to give you some ideas.   

                     I had came across that same link  that you posted above when I was looking for a different example that I had seen over a year that was created in an older versions of FM and I though was a better example, but I had no luck in finding that sample.   I'm still searching.

                     I agree that the navigation is not up to par in Go compared to other iOS apps.  FM is currently working on the next version of Go  and I believe you will see that Go will be a much improved product in the next major release.  Bento was designed for a mac only environment, where filemaker is designed for  multi platforms , and features have to be consistence across all platforms, also Filemaker can do a lot more than Bento, you just have to be more of a developer.

                     You might want to take a look at the GetThumbnail function, which may help with speed.  https://www.filemaker.com/12help/html/func_ref1.31.14.html

                     PhilModJunk explains about storing/inserting images into a container at this link Filemaker container limitations??

                     Also the server and the internet connections play major roles in the speed.   More ram and solid state drives will always make loading images faster.  There is not really much you can do about a 3g connection, which is another reason for a much simpler layout for the iOS device.

                      

                     I would suggest displaying thumbnails in the grid and then if the thumbnail is selected (button) a different layout is used to display the full resolution image.

                     Good Luck with your project

                • 5. Re: Ways of incorporating thumbnail grid of images
                  RyanBuckley
                       

                  I had came across that same link  that you posted above when I was looking for a different example that I had seen over a year that was created in an older versions of FM and I though was a better example, but I had no luck in finding that sample.   I'm still searching.

                  I would love to review this if you do find it. I searched all over for examples and the one I posted above was the only I could find. It would be great to compare solutions.

                       You might want to take a look at the GetThumbnail function, which may help with speed. https://www.filemaker.com/12help/html/func_ref1.31.14.html

                  I never knew about this function, and it's so obvious. I'm sure it will speed things up quite a bit!

                  As far as multiple layouts go, I guess I'll have to bite the bullet on that one. I was expecting to of course have a layout for both Mobile and Desktop, but didn't expect having to make multiple mobile layouts per each device. I see the necessity, though.

                  I'll try all of these suggestions. You've all been a great help. I will report back if I am still having issues.

                  • 6. Re: Ways of incorporating thumbnail grid of images
                    philmodjunk

                         You may find this thread helpful as you work on an interface design that works for iOS devices: An Old Dog learns some new tricks...

                    • 7. Re: Ways of incorporating thumbnail grid of images
                      RyanBuckley

                           A separate, but related issue has come up regarding the use of this grid-view work-around and FileMaker Go 13's new Swipe feature:

                           http://forums.filemaker.com/posts/ffeefd75b6

                      • 8. Re: Ways of incorporating thumbnail grid of images
                        TSGal

                             Ryan Buckley:

                             I have replied to your post at:

                        OnSwipe script-trigger

                             In essence, FileMaker Pro/Go 13 has introduced Slide Controls.  These are similar to Tab Controls, except in FileMaker Go, you can now swipe between the different Slide panels.  See the link for more information.

                             TSGal
                             FileMaker, Inc.

                        • 9. Re: Ways of incorporating thumbnail grid of images
                          philmodjunk

                               Here is a demo file for using a slider to swipe through a list of images. Note that though this slider has only three panels, it enables the user to swipe through every image in a table of images:

                          https://dl.dropboxusercontent.com/u/78737945/SwipeablePictureList.fmp12