Album Gallery from Google Photo album

[TransAmDan]

Recently it has become very difficult to add a batch of photos to a photo album on the website. Partly because our internet browsers block certainly things and there is no update for the forum to re-enable multiple uploads, so we cant upload 200 photos or so to the gallery. Is there other options, well yes.

Google photos gallery is one way to share photos with people. There are others like uploading to FTP or other galleries also.

What we want to achieve is to be able to go into our photo gallery on this website and view photos from shows. Even if the photos are hosted elsewhere they still appear like a usual photo album. The other bonus about the photos being hosted elsewhere is they don't take up space on our server(although we do have plenty of room) Also with google photos in your google account they do not count towards your space limit if they are saved in their regular hi-res. I know we have many users that do not use google, so I will need to find other methods to get you to share your photos. Once they are in the album they are open for all to view, you will also need to set permissions for your album to share to all.

So where do we start, first I need to write a script to view the google gallery, and grab the title and image links, and insert them into the database like a regular album. I also need to modify the album forum scripts to detect if it is a google album and not a local image file so it can create the correct HTML for the photo URL.

We will provide the script with the URL to the gallery, eg, this is for the Renegades Season Closer 2018. Renegades End of Season Show 2018 - Google Photo
When viewing the HTML for that page we can easily grab the album title. Images are a bit more tricky, as they use client side scripting to generate the URL of the image. What you see in the browser is after the browser has translates it, and quite different to the RAM HTML.

Further down the HTML listing is comma separated values, this get interpreted in a script to generate image URL's.

[TABLE]
<tbody>[TR]
[TD="class: line-content"][[1][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[2][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[9][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[3][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[4][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[5][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[31,false,true][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[36,false,true][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[8][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[21][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[10][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[14][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[30,true,true][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[17][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[18][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[19][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[22][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[27,false,true][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[28,false,true][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[29,false,true][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],[35,false,true][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],2,null,null,null,{"101428965":[0.0,"vddsojpj"][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]}][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"],["AF1QipOpneIn1NdMOtSfU0d4t1bazas6_TbC_ajHTzXG",["https://lh3.googleusercontent.com/WYX7oatGWs33rZqLL9MDMdUCzdh1SZNPN3RYpLXW47lQZxaBDyf00tBN-zUxA5wwkjd3DIuMTh6K-s5hCu0sakIny4MVqJmhYJoJl4snxdi0NbCw2KB2dr7krrcdi2c3oYDVtOwgtw0rE44Ib6MWPfgr_8uE7euF3KdFUvRawV7OEinCTJ5cnwdd4ctQ6a11wk5ISv9oE2FqYvkcgy4UiOI9yHibxje8_tri0-DLaZUqlKOisw28XhU54F-ceTPmswS7YkTHj3AdQo8Yn8IpUzfAEaDuL21hcCXb6MuckywKgAL2iGVp_l17wI3hSzpBnCk2QUyfU3lBB79ThM4lsmTwcMeFmZYIh2Gn2SNfzEUKMXMOsCkFeCqnk1s9LFJYgkoQLnU0sWjyhuqaKfRga9AJHVTpYDvP7g3wwOPZWhtCZO6VW8mdejhLNcopXUu-jfC4z0d7-xh9aEBANg7g7s55lpOIisD71kMTQ57factEPVeyFR8zqdKcKWsCuPuRvfpZ4-F9BPs4BEc4vG6LUx_sEH0poB0F-5yIgH6DXB7Fbw9n6Md871DYe4_FJBO7f4V_O52ByHkAZgV8FiEWDZ9cw-hXiVcXncXxCyp6WE18IHlELoQNnFQ47dsfP5VYi4ek6fFWs2cQwio1MpfIB5W5Bs3oJWgYq08etKuti0sqjQVK5pU0dW24Ecrf2kwaRUGSyttURHzIqF22FyY",3648,2736,null,null,null,null,null,null,[7501172][/TD]
[/TR]
[TR]
[TD="class: line-number"][/TD]
[TD="class: line-content"]][/TD]
[/TR]
</tbody>[/TABLE]

Notice there is already a URL in there, this is the thumbnail photo.
To get the full size image we need to create this URL.
Google Photo

The ?key= value is scattered over the HTML, 18 times in the one I loaded, so should be able to grab that to make the URL. The AF1QipOpneIn1NdMOtSfU0d4t1bazas6_TbC_ajHTzXG part of it is in the comma separated values above. The other part, AF1QipPGQNp2EI4OTrNL1uiy8FLk6SB19zu9xellFcJfUXX3w8cV4viyAq-tLOAyS3XtfQ is also scattered over the HTML, its not going to be an easy task but possible. Once i have the URLs for the images, and can link them to the album, so we can still comment on each individual image as you can now, and also it increments the counters in the forum for the amount of views on each image.

Last night I started writing the PHP script to grab the HTML page from google. Next it to see if I can list all the images contained within it.

 

[TransAmDan]

Okay I have generated some code which gathers all the image links from the html. I have some reusable code which searches and cuts out text, this is also use int he RSS feeds. Basically scraping data from web pages.

http://www.solent-renegades.co.uk/fetch_album/fetch_eos_2018.php

This grabs image links from the google photo album and displays them on this website.

After grabbing the image urls, adding "w1600-h1000-no" would dictate the size they are served. So thumbnails and full size use the same URL with just a different attribute.

Next is to grab the title and add these to a database.

 

[TransAmDan]

Spend some time on this last night. I have modified the database to include a flag to say if the image is from an external source. What I need to do now is when creating the code to display the picture detect if its external, if so then write different HTML code for it.

VBulletin has templates for each part of the website. So we need to insert an 'if' statement to decide what HTML code we need to implement.

	<vb:if condition="$picture['hasthumbnail']">
	   <vb:if condition="$picture['external_source'] == 0">  --detect here if its a local image or remote.
	<a href="album.php?{vb:raw session.sessionurl}albumid={vb:raw albuminfo.albumid}&amp;attachmentid={vb:raw picture.attachmentid}"><img src="http://www.solent-renegades.co.uk/attachment.php?{vb:raw session.sessionurl}attachmentid={vb:raw picture.attachmentid}&amp;thumb=1" alt="{vb:raw picture.caption}" title="{vb:raw picture.caption} from {vb:raw albuminfo.title}" border="0" {vb:raw picture.dimensions}/></a>
<table width="120" height="60"><tr><td>{vb:raw picture.caption} from {vb:raw albuminfo.title}</td></tr></table>
	   <vb:else />
                   -- code for remote image.	
  	   </vb:if>
	<vb:else />
		<a class="picture" href="album.php?{vb:raw session.sessionurl}albumid={vb:raw albuminfo.albumid}&amp;attachmentid={vb:raw picture.attachmentid}"><vb:if condition="$picture['caption_preview']">{vb:raw picture.caption_preview}<vb:else />{vb:rawphrase picture}</vb:if></a>
	</vb:if>
	<vb:if condition="$show['moderation']"><span class="shade">{vb:rawphrase picture_moderated}</span></vb:if>

The code didn't work, is it fetching from the database correct? The code above dosn't access the database directly, its done via some PHP code. I was hoping the
<vb:if condition="$picture['external_source'] == 0">
would pull in the value from the database. Next to check the PHP it comes from. This is called Album.php.

There is a fair few lines in there. This block fetches data from the database.

	$pictures = $db->query_read("
		SELECT
			a.attachmentid, a.userid, a.caption, a.dateline, a.state, a.filename, a.external_source,
			fd.filesize, IF(fd.thumbnail_filesize > 0, 1, 0) AS hasthumbnail, fd.thumbnail_dateline, fd.thumbnail_width, fd.thumbnail_height
			$hook_query_fields
		FROM " . TABLE_PREFIX . "attachment AS a
		INNER JOIN " . TABLE_PREFIX . "filedata AS fd ON (fd.filedataid = a.filedataid)
		$hook_query_joins
		WHERE
			a.contentid = $albuminfo[albumid]
				AND
			a.contenttypeid = " . intval($contenttypeid) . "
			" . ((!can_moderate(0, 'canmoderatepictures') AND $albuminfo['userid'] != $vbulletin->userinfo['userid']) ? "AND a.state = 'visible'" : "") . "
			$hook_query_where
		ORDER BY a.dateline DESC
		LIMIT $start, $perpage
	");

So now $pictures contains the information from that database query.

Each individual pictures is fetched from
while ($picture = $db->fetch_array($pictures))

So in the template code I would expect pictures.external_source to contain the data from the database. Something isn't working right.

Perhaps time to find a forum to help me over this hurdle. The forum template code and php has some connection, perhaps there is a translation layer not passing the value on.