G3 embedding - A RESTful gallery - My trials, opinions and results

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Fri, 2012-05-18 23:41

Yesterday I set out to bring another example of "External G3" usage, this time using the REST interface.
I found myself banging my head and yelling "WHY?" many times.
And the issues I think need to be fixed could potentially break current applications that use G3 REST.

Issues:

Requesting a X-Gallery-Request-Key requires a POST request, but G3 redirects(if rewrite is enabled) from /gallery3.index.php/rest to /gallery3/rest only as a GET and you'll receive a Forbidden reply. In my opinion this is a fail, And wasted at least an hour of my time.
Next I setup "Anonymous access" but also added a login interface. If you first request without a X-Gallery-Request-Key and then suddenly start using one, the same Forbidden reply on all subsequent requests. Huh??
I was not able to request my X-Gallery-Request-Key output=jsonp which means no cross-domain embedding - not even across sub-domains. Without a proxy anyways.
Trying to request ancestors_for with a relative usr return a 404 not found - full url required?? inconsistent. Once it works its a great feature though.
When you request an Album item you receive back a very helpful entity object with all the albums info AND a very lackluster list of members(sub-items). This list of members is a list of restful urls to the other items, NOT what I would expect of the actual member item objects themselves... ok, another request(that makes 2) to retrieve these sub-items. Then remember you need another request yet to retrieve the thumb or whichever display property you're using.
The above members list of urls. Hmmm.. could this be a list of IDs instead? On my largest album(103 items) I hit a request limit when trying to retrieve all the actual items. I mean the url to each REST item is the same save the ID. I solved this by chunking my request, but still this change could save many many bits.

It wasn't all frustrations though, I loved several aspect.
Getting the breadcrumbs using ancestors_for was smooth. The info returned for each item was complete. And the ability to retrieve many items at once saves the second request.

Anyways, here is my result: http://www.flashyourweb.com/gallery2/embed_samples/g3_rest.php
It is for displaying items only, but I'll add some authenticated user actions soon.
And I'll add code snippets soon.

You can get the code here.

Comments?

Recap to all the external G3 examples:

And we now have a Wordpress plugin implementing the RESTful functionality.

-s

jnash

Joined: 2004-08-02
Posts: 814

Posted: Fri, 2012-05-18 23:53

All your points seem legit to me.

Your results are fantastic!

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sun, 2012-06-17 13:58

The code for my example is now available in the original post.

-s

heydroid

Joined: 2003-09-29
Posts: 48

Posted: Mon, 2012-06-18 03:23

I was playing around with your REST code and found a few bugs.

1. Videos only seem to play if you press the back button after you click on them. (only happens on 1 video http://awelker.com/rest/#item/3738 with the title of 4-30-2011. It is on the first page)

2. Only works if you have show full size enabled.

3. Did not work with my rest API key, had to turn guest mode on.

Thanks for your work!

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Mon, 2012-06-18 11:22

Thanks for trying my code and for the feedback, this will help me see what others are seeing.

Quote:

1. Videos only seem to play if you press the back button after you click on them.

The <video /> needs a parent DOM element to function properly. Please create at least the basic page structure ie.

<!doctype html>
<html>
    <head>
        <script src="code/modernizr.js"></script>
        <script src="code/respond.min.js"></script>
        <link href="code/style.css" type="text/css" rel="stylesheet" />
        <!--[if gte IE 9]>
            <style type="text/css">
            .gradient {
            filter: none;
            }
            </style>
        <![endif]-->
        <link href="code/ajaxGallery.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div class="ajax-title">
            <h2>Javascript required to view this content.</h2>
        </div>
        <ul id="breadcrumbs"></ul>
        <ul id="ajax-gallery"></ul>
        <div id="ajax-description">
            <p></p>
        </div>
        <ul id="pager"></ul>
        <!-- javascript after content -->
        <script src="code/klass.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="code/code.photoswipe.jquery-3.0.4.min.js"></script>
        <script src="code/jquery.ba-hashchange.min.js"></script>
        <script src="code/jquery.colorbox-min.js"></script>
        <script src="code/media.template.js"></script>
        <script src="code/g3.rest.js"></script>
    </body>
</html>

Quote:

Only works if you have show full size enabled.

Currently I'm using the fullsize when a widescreen is detected, and resize for smaller screens < 1000px
But this could be a config option

Quote:

Did not work with my rest API key, had to turn guest mode on.

Refer to my 1st issue listed above

I also noticed yoursite needs a crossdomain.xml which flowplayer was looking for.

-s

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Mon, 2012-06-18 12:41

@heydroid

Quote:

Did not work with my rest API key, had to turn guest mode on.

~~I just tried again w/ my rest key and it worked even from the desktop~~
add your rest key as follows:

    rest = {
        url: 'http://www.yoursite.com/gallery3/rest',
        initial: 1,
        max_items_per_page: 20,
        key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'
    };

****Scratch that****
After I turned allow_guest_access off again it did not work from my desktop.
This seems to be a cross-domain issue.
It did work from http://www.flashyourweb.com/gallery2/embed_samples/g3_rest.php
but not from http://flashyourweb.com/gallery2/embed_samples/g3_rest.php

Which to adds to my point in the first post - a total fail on the rest interface.

-s

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Wed, 2012-06-27 18:24

This is now a jQuery plugin which makes it far easier to use.

        <script>
            $(document).ready(function(){
                $('#gallery').g3rest();
            });
        </script>

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

rl98256

Joined: 2012-07-15
Posts: 1

Posted: Sun, 2012-07-15 13:48

suprsidr,

cool stuff you developed.
I was able to integrate my G3 albums in one of my other websites. ( http://www.nbahner.com/photoalbum/test.html )
It took a while and required some forum reading, but in the end the thread where you supported dave111111 answered all my question.

Currently it works with allow_guest_access only, this leaves only the authenticated access question open.
Do you think there will be an option available soon to use the rest api key for authenticated access?

Appreceate your effort and contribution for the G3 community.
Ralf

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sun, 2012-07-15 14:42

rl98256 wrote:

Do you think there will be an option available soon to use the rest api key for authenticated access?

suprsidr wrote:

After I turned allow_guest_access off again it did not work from my desktop.
This seems to be a cross-domain issue.
It did work from http://www.flashyourweb.com/gallery2/embed_samples/g3_rest.php
but not from http://flashyourweb.com/gallery2/embed_samples/g3_rest.php

Which to adds to my point in the first post - a total fail on the rest interface.

not until that is fixed
refer to my 1st, 2nd and 3rd issues from my first post.

rl98256 wrote:

It took a while and required some forum reading, but in the end the thread where you supported dave111111 answered all my question.

Sorry, I'm horrible at documentation which is why I usually refer users to these forums where we openly discuss issues/solutions.

-s

gabstero

Joined: 2010-01-06
Posts: 51

Posted: Wed, 2012-08-01 15:28

this is fantastik!

Question - how can you embed only a certain album from a gallery?

thanks
gabstero

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Wed, 2012-08-01 15:42

the options available are:

url: url to your G3 rest interface - required
code: url to the directory containing the included code directory - I have changed this in my working copy to the url to the code directory - simpler
initial: 1, // the initial album to start with - default 1
max_items_per_page: 20, // the maximum items per page - default 20
key: '' // rest key - advanced features not working ignore for now

so you can start like this:

$('#gallery').g3rest({
    url: 'http://yoursite.com/gallery3/rest',
    code: 'http://yoursite.com/gallery3/',
    initial: 17,
    max_items_per_page: 10
});

-s

gabstero

Joined: 2010-01-06
Posts: 51

Posted: Wed, 2012-08-01 16:26

very nice - THANKS!

is there a way to discover the initial number for a certain album on gallery? I have many albums

thanks,
gabstero

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Wed, 2012-08-01 16:40

if you view the source of your album's page you can see the RSS feed:
<link rel="alternate" type="application/rss+xml" href="/gallery3/rss/feed/gallery/album/113" />

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

gabstero

Joined: 2010-01-06
Posts: 51

Posted: Wed, 2012-08-01 17:16

that's great - thanks!

Now I have trouble using the code in a dynamically product page in my zen cart online store system. I added all the javascripts in the header, etc., but the gallery album is displayed sort of odd: http://www.gabkits.com/amp-cabinets/overtone/overtone-head

However, if I have a standalone page linking to the same resources, it works: http://www.gabkits.com/minimal_page_structure.html

do you have an idea what I might be doing wrong?

thanks!
gabstero

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Wed, 2012-08-01 17:57

is that the correct url to ajaxGallery.css
and you do not need to include my sample style.css

-s

gabstero

Joined: 2010-01-06
Posts: 51

Posted: Wed, 2012-08-01 18:07

yep - that's the right path to it.

Also I eliminated your syle.css from the header.

And I pointed the " code:" to point to http://www.gabtone.com/gallery/ where the "code" folder resides.

thanks for looking at this.

gabstero

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Wed, 2012-08-01 18:16

a little lesson in relative urls:
gabtone/gallery/code/ajaxGallery.css is a relative url from where ever we are displaying the link, so from:
gabkits.com/amp-cabinets/overtone/
that would be:
gabkits.com/amp-cabinets/overtone/gabtone/gallery/code/ajaxGallery.css

But adding the leading / forces the relative url from the root of the site
/gabtone/gallery/code/ajaxGallery.css

-s

gabstero

Joined: 2010-01-06
Posts: 51

Posted: Wed, 2012-08-01 18:28

bingo!!

the leading / solved everything!!! MANY THANKS!! This mod rules!

cheers!
gabstero

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Thu, 2012-10-25 16:41

I have created a Wordpress plugin to display your G3 in WP

-s
________________________________
All New jQuery Minislideshow for G2/G3

luglug

Joined: 2005-10-09
Posts: 8

Posted: Tue, 2013-01-08 14:52

THANK YOU SO MUCH suprsidr

Your restful implementation kicks ass!

One quick question, is there a way to get the album and photo names to just appear rather than requiring a mouseover? I poked around the css but couldn't find anything that changed that behaviour.

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Tue, 2013-01-08 17:33

the pop-title is literally appended to the element on mouseover so there is nothing to show until then.

One of the tricks with this responsive grid layout is that every element has to be the same height and that height is figured out as the images load.
It would take some structural changes to show the title under the image. And then if some had long titles they would flow to the next line making that element taller and breaking layout.

so no, not easily.

-s
________________________________
All New jQuery Minislideshow for G2/G3

Murphy_ia

Joined: 2013-06-23
Posts: 2

Posted: Sun, 2013-06-23 08:56

I am trying to implement this on my webpage, but keep getting the message that javascript required to run this content. Have tried several different placements of the code and different versions of the link to the code but still keep getting this, when I try to visit other sites with this implemented everything works fine.
The page I am trying to get this to work on is www.jaktterrier.com/testpage.html and my gallery is located at www.jaktterrier.com/gallery2
I am running the newest version of G3 and have installed the REST module and set guest access to 1.

If anyone has any suggestions I would be very happy.

Thanks

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sun, 2013-06-23 10:44

javascript syntax error.
add a comma after: code: 'http://www.jaktterrier.com/'

-s
________________________________
All New jQuery Minislideshow for G2/G3

Murphy_ia

Joined: 2013-06-23
Posts: 2

Posted: Sun, 2013-06-23 12:23

Perfect, thank you

JaronRH

Joined: 2010-07-28
Posts: 23

Posted: Wed, 2013-08-14 19:39

Glad to see I wasn't the only one stumbling my way through the Gallery3 RESTful API! I too was very curious why the members came back as URL's instead of id's. I ended up using regex to get the id's that I needed when the API only gave me URL's so it worked out in the end. Also, the lack of complete documentation made it much more difficult then it had to be (I'm looking at you, tags!).

I ended up not really integrating Gallery3 into my existing site but rather making my own client front-end for Gallery3. This let me display the images in nicer interface without all of the management overhead that only I use in Gallery3. Also, I can give my users their own login information so that they can download their images after logging in (I updated User Homes module to include a REST interface so I can assign users their own album "homes" -- http://galleryproject.org/node/95629#comment-405447). The biggest improvement though was that I can selectively cache my RESTful request/response to improve performance and I also use dynamic loading of images instead of paging.

I'm still working on it but you can check out the results here:
Album -> http://c.jhpho.com/5504
Tag -> http://c.jhpho.com/tag/78

In the end though, I'm very happy with how everything turned out.

floridave

Joined: 2003-12-22
Posts: 27300

Posted: Wed, 2013-08-14 20:27

JaronRH,
Very nice! I like that the Galereya is masonary and lazy loading as well. Looks good and performs well.

I did notice even on the Galereya demo site as well as yours that on mouseover the thumbs 'blink' black. Not sure why but it is the only thing I can see that I did not like.
Are you planing on releasing it?

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

azzahra

Joined: 2013-09-13
Posts: 1

Posted: Fri, 2013-09-13 05:10

Hey everyone,

At beginning I will say that I'm not the best in websites building.
I try to use that interface but can't make it work. I installed gallery3 on server, put code folder to the same directory
and turned on REST module and set guest access to 1. website is just minimal page structure address to it www.azza.eu.pn.

Could someone suggest something I should do?

nickelaj

Joined: 2013-09-19
Posts: 8

Posted: Thu, 2013-09-19 18:22

azzahra wrote:

Hey everyone,

At beginning I will say that I'm not the best in websites building.
I try to use that interface but can't make it work. I installed gallery3 on server, put code folder to the same directory
and turned on REST module and set guest access to 1. website is just minimal page structure address to it www.azza.eu.pn.

Could someone suggest something I should do?

I am reading and trying to embed gallery3 to my website but i think i am doing something wrong or less as azzahra. Is there any documentation or installation guide for this ?

thanks

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Fri, 2013-09-20 12:29

http://www.flashyourweb.com/gallery2/embed_samples/g3_rest.php <- click the show/hide code button

or see the examples given in the download

-s
________________________________
All New jQuery Minislideshow for G2/G3

nickelaj

Joined: 2013-09-19
Posts: 8

Posted: Fri, 2013-09-20 13:30

suprsidr wrote:

http://www.flashyourweb.com/gallery2/embed_samples/g3_rest.php <- click the show/hide code button

or see the examples given in the download

-s
________________________________
All New jQuery Minislideshow for G2/G3

i searched and read everything in those links, but i couldnt make it work.
after it i had to ask here. is there any points as api key, or htaccess or something etc.

for example i am filling my websites in the below links i am getting 404 error
http://www.mysite/subsite/galeri/rest

url: 'http://www.flashyourweb.com/gallery3/rest',
code: 'http://www.flashyourweb.com/gallery2/embed_samples/'

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Fri, 2013-09-20 13:50

you may have to use http://www.mysite/subsite/galeri/index.php/rest if you don't have rewrite active

-s
________________________________
All New jQuery Minislideshow for G2/G3

nickelaj

Joined: 2013-09-19
Posts: 8

Posted: Fri, 2013-09-20 14:00

suprsidr wrote:

you may have to use http://www.mysite/subsite/galeri/index.php/rest if you don't have rewrite active

-s
________________________________
All New jQuery Minislideshow for G2/G3

exactly you are wonderfull. now i did something. if you dont get mad i want to ask last question.
after wrote url : 'http://www.mysite/subsite/galeri/index.php/rest' it started to try loading albums but flash loading icons turning turning and turning.
my code :'' is empty. is it necessary ?

thanks a lot

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Fri, 2013-09-20 14:02

you'll have to send me a link

-s
________________________________
All New jQuery Minislideshow for G2/G3

nickelaj

Joined: 2013-09-19
Posts: 8

Posted: Fri, 2013-09-20 14:20

suprsidr wrote:

you'll have to send me a link

-s
________________________________
All New jQuery Minislideshow for G2/G3

one gallery can work, when adding second the error occurs.
i sent the link to your private message if it is not problem for you ?

a lot of regards and thanks for your interest.

nickelaj

Joined: 2013-09-19
Posts: 8

Posted: Fri, 2013-09-20 16:46

nickelaj wrote:

suprsidr wrote:

you'll have to send me a link

-s
________________________________
All New jQuery Minislideshow for G2/G3

one gallery can work, when adding second the error occurs.
i sent the link to your private message if it is not problem for you ?

a lot of regards and thanks for your interest.

i sent the all links includes embedded site too.
if there is 1 album i can show, after adding second album loading.gif cames infinitely

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Fri, 2013-09-20 18:38

1st change to an older version of jquery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

the next error looks like an album thumbnail is missing.

-s
________________________________
All New jQuery Minislideshow for G2/G3

nickelaj

Joined: 2013-09-19
Posts: 8

Posted: Fri, 2013-09-20 19:20

suprsidr wrote:

1st change to an older version of jquery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

the next error looks like an album thumbnail is missing.

-s
________________________________
All New jQuery Minislideshow for G2/G3

i am still working for it, as you saw i uploaded your minimal_page_structure.html and edited it for my gallery.
it has old jquery, and i deleted all albums. tried again one by one.
still same. first album ok, but when second or third came it is out of order.
i liked this module a lot and i will make it work by trying everything

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sat, 2013-09-21 02:52

there is nothing wrong with my script.
your gallery is not functioning correctly. fix that first.

-s
________________________________
All New jQuery Minislideshow for G2/G3

nickelaj

Joined: 2013-09-19
Posts: 8

Posted: Sat, 2013-09-21 19:03

suprsidr wrote:

there is nothing wrong with my script.
your gallery is not functioning correctly. fix that first.

-s
________________________________
All New jQuery Minislideshow for G2/G3

no no you understood me wrong.
i didnt say that your code isnt working. i said will try to make it work with my site
and i did it

deleted all folder, database and installed again. It is ok now.

Thanks again for code and your interest.

nickelaj

Joined: 2013-09-19
Posts: 8

Posted: Tue, 2013-09-24 04:52

hi again,
how can i add image title below the image as original gallery page, except showing hover on image?
i looked at g3.rest.2.0.js but i didnt want to modify by myself

thanks

aquarium

Joined: 2013-10-02
Posts: 1

Posted: Wed, 2013-10-02 08:05

Used it for my gallery and worked integration without problem. Thanks for your work.

Only problem for me is getting first picture size.
If it is 640x480 there is no problem for thumbnail (horizontal square) but if first is 480x640 then thumbnail size gets bigger (vertical square)

Is there any way to arrange it ??

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Wed, 2013-10-02 12:03

try arranging them in gallery.

-s
________________________________
All New jQuery Minislideshow for G2/G3

G3 embedding - A RESTful gallery - My trials, opinions and results

XUser login