]> git.mxchange.org Git - friendica.git/commitdiff
two-way subscriptions working with federated social accounts
authorMike Macgirvin <mike@macgirvin.com>
Tue, 26 Oct 2010 04:52:30 +0000 (21:52 -0700)
committerMike Macgirvin <mike@macgirvin.com>
Tue, 26 Oct 2010 04:52:30 +0000 (21:52 -0700)
15 files changed:
boot.php
include/Scrape.php
include/auth.php
include/salmon.php
mod/contacts.php
mod/dfrn_request.php
mod/follow.php [new file with mode: 0644]
mod/xrd.php
view/atom_feed.tpl
view/auto_request.tpl
view/dfrn_request.tpl
view/follow.tpl [new file with mode: 0644]
view/follow_slap.tpl [new file with mode: 0644]
view/magicsig.tpl
view/theme/default/style.css

index 8c92487035d2e7545c4c46de68f764463e28dc72..1c00598b31f08da0b9dc5c178fa6028055deeb3f 100644 (file)
--- a/boot.php
+++ b/boot.php
@@ -409,7 +409,7 @@ function fetch_url($url,$binary = false, &$redirects = 0) {
 // post request to $url. $params is an array of post variables.
 
 if(! function_exists('post_url')) {
-function post_url($url,$params, &$redirects = 0) {
+function post_url($url,$params, $headers = null, &$redirects = 0) {
        $ch = curl_init($url);
        if(($redirects > 8) || (! $ch)) 
                return false;
@@ -419,6 +419,9 @@ function post_url($url,$params, &$redirects = 0) {
        curl_setopt($ch, CURLOPT_POST,1);
        curl_setopt($ch, CURLOPT_POSTFIELDS,$params);
 
+       if(is_array($headers))
+               curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
+
        $check_cert = get_config('system','verifyssl');
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, (($check_cert) ? true : false));
        $prx = get_config('system','proxy');
@@ -446,7 +449,7 @@ function post_url($url,$params, &$redirects = 0) {
         $url_parsed = parse_url($url);
         if (isset($url_parsed)) {
             $redirects++;
-            return post_url($url,$binary,$redirects);
+            return post_url($url,$binary,$headers,$redirects);
         }
     }
        $a = get_app();
@@ -1256,4 +1259,20 @@ function load_view_file($s) {
        return file_get_contents($s);
 }}
 
+// for html,xml parsing - let's say you've got
+// an attribute foobar="class1 class2 class3"
+// and you want to find out if it contains 'class3'.
+// you can't use a normal sub string search because you
+// might match 'notclass3' and a regex to do the job is 
+// possible but a bit complicated. 
+// pass the attribute string as $attr and the attribute you 
+// are looking for as $s - returns true if found, otherwise false
+
+if(! function_exists('attribute_contains')) {
+function attribute_contains($attr,$s) {
+       $a = explode(' ', $attr);
+       if(count($a) && in_array($s,$a))
+               return true;
+       return false;
+}}
 
index 0272dde129cd89c83d918ac2f9d6cbd5c3ceb86b..10ec54d1347aa968ec35c3d9b1b9185ca61976dc 100644 (file)
@@ -2,15 +2,6 @@
 
 require_once('library/HTML5/Parser.php');
 
-if(! function_exists('attribute_contains')) {
-function attribute_contains($attr,$s) {
-       $a = explode(' ', $attr);
-       if(count($a) && in_array($s,$a))
-               return true;
-       return false;
-}}
-
-
 if(! function_exists('scrape_dfrn')) {
 function scrape_dfrn($url) {
 
@@ -53,7 +44,7 @@ function scrape_dfrn($url) {
                                        $ret['photo'] = $x->getAttribute('src');
                                if(attribute_contains($x->getAttribute('class'),'key'))
                                        $ret['key'] = $x->textContent;
-                       }
+                       }
                }
        }
 
@@ -107,3 +98,40 @@ function scrape_meta($url) {
 
        return $ret;
 }}
+
+
+if(! function_exists('scrape_vcard')) {
+function scrape_vcard($url) {
+
+       $ret = array();
+       $s = fetch_url($url);
+
+       if(! $s) 
+               return $ret;
+
+       $dom = HTML5_Parser::parse($s);
+
+       if(! $dom)
+               return $ret;
+
+       // Pull out hCard profile elements
+
+       $items = $dom->getElementsByTagName('*');
+       foreach($items as $item) {
+               if(attribute_contains($item->getAttribute('class'), 'vcard')) {
+                       $level2 = $item->getElementsByTagName('*');
+                       foreach($level2 as $x) {
+                               if(attribute_contains($x->getAttribute('class'),'fn'))
+                                       $ret['fn'] = $x->textContent;
+                               if((attribute_contains($x->getAttribute('class'),'photo'))
+                                       || (attribute_contains($x->getAttribute('class'),'avatar')))
+                                       $ret['photo'] = $x->getAttribute('src');
+                               if((attribute_contains($x->getAttribute('class'),'nickname'))
+                                       || (attribute_contains($x->getAttribute('class'),'uid')))
+                                       $ret['nick'] = $x->textContent;
+                       }
+               }
+       }
+
+       return $ret;
+}}
index 7e04cb2e70a1280ceae7330cbaee512ba9950af0..a54b24f085cdb7f35f054fe4e04313acd83af8cb 100644 (file)
@@ -41,7 +41,7 @@ if((x($_SESSION,'authenticated')) && (! ($_POST['auth-params'] === 'login'))) {
 
                $_SESSION['my_url'] = $a->get_baseurl() . '/profile/' . $a->user['nickname'];
 
-               $r = q("SELECT * FROM `contact` WHERE `uid` = %s AND `self` = 1 LIMIT 1",
+               $r = q("SELECT * FROM `contact` WHERE `uid` = %d AND `self` = 1 LIMIT 1",
                        intval($_SESSION['uid']));
                if(count($r)) {
                        $a->contact = $r[0];
@@ -91,6 +91,7 @@ else {
                $r = q("SELECT * FROM `contact` WHERE `uid` = %s AND `self` = 1 LIMIT 1",
                        intval($_SESSION['uid']));
                if(count($r)) {
+                       $a->contact = $r[0];
                        $a->cid = $r[0]['id'];
                        $_SESSION['cid'] = $a->cid;
                }
index c5ad3e82561c8a304cc6f71541d84bbdd14caab4..7f4c32265c641a826ea6012dae9a79eb79126f83 100644 (file)
@@ -105,7 +105,8 @@ $namespaces = <<< EOT
       xmlns:media="http://purl.org/syndication/atommedia"
       xmlns:dfrn="http://purl.org/macgirvin/dfrn/1.0" 
       xmlns:as="http://activitystrea.ms/spec/1.0/"
-      xmlns:georss="http://www.georss.org/georss" >
+      xmlns:georss="http://www.georss.org/georss" 
+      xmlns:poco="http://portablecontacts.net/spec/1.0" >
 EOT;
 
        $slap = str_replace('<entry>',$namespaces,$slap);
@@ -129,7 +130,7 @@ EOT;
     $rsa->setHash('sha256');
        $rsa->loadKey($owner['sprvkey']);
 
-    $signature = $rsa->sign($data);
+    $signature = base64url_encode($rsa->sign($data));
 
        $salmon_tpl = load_view_file('view/magicsig.tpl');
        $salmon = replace_macros($salmon_tpl,array(
@@ -141,7 +142,13 @@ EOT;
        ));
 
        // slap them 
-       post_url($contact['notify'],$salmon);
+       post_url($contact['notify'],$salmon, array(
+               'Content-type: application/magic-envelope+xml',
+               'Content-length: ' . strlen($salmon)
+       ));
 
+       $a = get_app();
+       echo "CURL returned: " . $a->get_curl_code() . "\n";
        return;
 }
\ No newline at end of file
index bd5bf8ea80b9c56d3acbf4d55aa342a1224b6673..9360637150cc305e6a2eaa5d73ad4e6e071b02a1 100644 (file)
@@ -8,6 +8,14 @@ function contacts_init(&$a) {
 
        if($a->config['register_policy'] != REGISTER_CLOSED)
                $a->page['aside'] .= '<div class="side-invite-link-wrapper" id="side-invite-link-wrapper" ><a href="invite" class="side-invite-link" id="side-invite-link">' . t("Invite Friends") . '</a></div>';
+
+       $tpl = load_view_file('view/follow.tpl');
+       $a->page['aside'] .= replace_macros($tpl,array(
+               '$label' => t('Connect/Follow [profile address]'),
+               '$hint' => t('Example: bob@example.com, http://example.com/barbara'),
+               '$follow' => t('Follow')
+       ));
+
 }
 
 function contacts_post(&$a) {
@@ -150,6 +158,8 @@ function contacts_content(&$a) {
                        return;
                }
 
+               $_SESSION['return_url'] = $a->get_baseurl() . '/' . $a->cmd;
+
                require_once('view/contact_selectors.php');
 
                $tpl = load_view_file("view/contact_edit.tpl");
index ddf495986d842433bdb414507b67ccae058df1fe..a7296fec03cf729249a1d9119bb056c29f09c3dd 100644 (file)
@@ -472,13 +472,17 @@ function dfrn_request_content(&$a) {
                return; // NOTREACHED
        }
        else {
-
+               $myaddr = ((x($_GET,'address')) ? urldecode($_GET['address']) : '');
                // Normal web request. Display our user's introduction form. 
                if($a->profile['page-flags'] == PAGE_NORMAL)
                        $tpl = load_view_file('view/dfrn_request.tpl');
                else
                        $tpl = load_view_file('view/auto_request.tpl');
-               $o .= replace_macros($tpl,array('$nickname' => $a->argv[1]));
+               $o .= replace_macros($tpl,array(
+                       '$nickname' => $a->argv[1],
+                       '$name' => $a->profile['name'],
+                       '$myaddr' => $myaddr
+               ));
                return $o;
        }
 
diff --git a/mod/follow.php b/mod/follow.php
new file mode 100644 (file)
index 0000000..7ac9a50
--- /dev/null
@@ -0,0 +1,200 @@
+<?php
+
+require_once('Scrape.php');
+
+function follow_post(&$a) {
+
+       if(! local_user()) {
+               notice( t('Permission denied.') . EOL);
+               goaway($_SESSION['return_url']);
+               // NOTREACHED
+       }
+
+       $url = notags(trim($_POST['url']));
+
+       if($url) {
+               $links = lrdd($url);
+               if(count($links)) {
+                       foreach($links as $link) {
+                               if($link['@attributes']['rel'] === NAMESPACE_DFRN)
+                                       $dfrn = $link['@attributes']['href'];
+                               if($link['@attributes']['rel'] === 'salmon')
+                                       $notify = $link['@attributes']['href'];
+                               if($link['@attributes']['rel'] === NAMESPACE_FEED)
+                                       $poll = $link['@attributes']['href'];
+                               if($link['@attributes']['rel'] === 'http://microformats.org/profile/hcard')
+                                       $hcard = $link['@attributes']['href'];
+                               if($link['@attributes']['rel'] === 'http://webfinger.net/rel/profile-page')
+                                       $profile = $link['@attributes']['href'];
+
+                       }
+               }
+       }       
+
+       // If we find a DFRN site, send our subscriber to the other person's
+       // dfrn_request page and all the other details will get sorted.
+
+       if(strlen($dfrn)) {
+               $ret = scrape_dfrn($dfrn);
+               if(is_array($ret) && x($ret,'dfrn-request')) {
+                       if(strlen($a->path))
+                               $myaddr = urlencode($a->get_baseurl() . '/profile/' . $a->user['nickname']);
+                       else
+                               $myaddr = urlencode($a->user['nickname'] . '@' . $a->get_hostname());
+                       goaway($ret['dfrn-request'] . "&address=$myaddr");
+               
+                       // NOTREACHED
+               }
+       }
+
+       if($hcard) {
+               $vcard = scrape_vcard($hcard);
+       }
+
+       if(! $profile)
+               $profile = $url;
+
+       // do we have enough information?
+
+       if(! x($vcard,'fn'))
+               if(x($vcard,'nick'))
+                       $vcard['fn'] = $vcard['nick'];
+
+       if(! ((x($vcard['fn'])) && ($poll) && ($notify) && ($profile))) {
+               notice( t('The profile address specified does not provide adequate information.') . EOL);
+               goaway($_SESSION['return_url']);
+       } 
+
+       if(! x($vcard,'photo'))
+               $vcard['photo'] = $a->get_baseurl() . '/images/default-profile.jpg' ; 
+
+       // check if we already have a contact
+
+       $r = q("SELECT * FROM `contact` WHERE `uid` = %d AND `poll` = '%s' LIMIT 1",
+               intval(local_user()),
+               dbesc($poll)
+       );                      
+       if($r) {
+               // update contact
+               if($r[0]['rel'] == REL_VIP) {
+                       q("UPDATE `contact` SET `rel` = %d WHERE `id` = %d AND `uid` = %d LIMIT 1",
+                               intval(REL_BUD),
+                               intval($r[0]['id']),
+                               intval(local_user())
+                       );
+               }
+       }
+       else {
+               // create contact record 
+               $r = q("INSERT INTO `contact` ( `uid`, `created`, `url`, `notify`, `poll`, `name`, `nick`, `photo`, `network`, `rel`, 
+                       `blocked`, `readonly`, `pending` )
+                       VALUES ( %d, '%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s', %d, 0, 0, 0 ) ",
+                       intval(local_user()),
+                       dbesc(datetime_convert()),
+                       dbesc($profile),
+                       dbesc($notify),
+                       dbesc($poll),
+                       dbesc($vcard['fn']),
+                       dbesc($vcard['nick']),
+                       dbesc($vcard['photo']),
+                       dbesc('stat'),
+                       intval(REL_FAN)
+               );
+       }
+       $r = q("SELECT * FROM `contact` WHERE `url` = '%s' AND `uid` = %d LIMIT 1",
+               dbesc($profile),
+               intval(local_user())
+       );
+       if(! count($r)) {
+               notice( t('Unable to retrieve contact information.') . EOL);
+               goaway($_SESSION['return_url']);
+               // NOTREACHED
+       }
+
+       $contact = $r[0];
+       $contact_id  = $r[0]['id'];
+
+       require_once("Photo.php");
+
+       $photo_failure = false;
+
+       $filename = basename($vcard['photo']);
+       $img_str = fetch_url($vcard['photo'],true);
+       $img = new Photo($img_str);
+       if($img->is_valid()) {
+
+               $img->scaleImageSquare(175);
+                                       
+               $hash = photo_new_resource();
+
+               $r = $img->store(local_user(), $contact_id, $hash, $filename, t('Contact Photos'), 4 );
+
+               if($r === false)
+                       $photo_failure = true;
+
+               $img->scaleImage(80);
+
+               $r = $img->store(local_user(), $contact_id, $hash, $filename, t('Contact Photos'), 5 );
+
+               if($r === false)
+                       $photo_failure = true;
+
+               $photo = $a->get_baseurl() . '/photo/' . $hash . '-4.jpg';
+               $thumb = $a->get_baseurl() . '/photo/' . $hash . '-5.jpg';
+       }
+       else
+               $photo_failure = true;
+
+       if($photo_failure) {
+               $photo = $a->get_baseurl() . '/images/default-profile.jpg';
+               $thumb = $a->get_baseurl() . '/images/default-profile-sm.jpg';
+       }
+
+       $r = q("UPDATE `contact` SET `photo` = '%s', 
+                       `thumb` = '%s', 
+                       `name-date` = '%s', 
+                       `uri-date` = '%s', 
+                       `avatar-date` = '%s'
+                       WHERE `id` = %d LIMIT 1
+               ",
+                       dbesc($photo),
+                       dbesc($thumb),
+                       dbesc(datetime_convert()),
+                       dbesc(datetime_convert()),
+                       dbesc(datetime_convert()),
+                       intval($contact_id)
+               );                      
+
+
+       // pull feed and consume it, which should subscribe to the hub.
+
+
+       // create a follow slap
+
+       $tpl = load_view_file('view/follow_slap.tpl');
+       $slap = replace_macros($tpl, array(
+               '$name' => $a->user['username'],
+               '$profile_page' => $a->get_baseurl() . '/profile/' . $a->user['nickname'],
+               '$photo' => $a->contact['photo'],
+               '$thumb' => $a->contact['thumb'],
+               '$published' => datetime_convert('UTC','UTC', 'now', ATOM_TIME),
+               '$item_id' => 'urn:X-dfrn:' . $a->get_hostname() . ':follow:' . random_string(),
+               '$title' => '',
+               '$type' => 'text',
+               '$content' => t('following'),
+               '$nick' => $a->user['nickname'],
+               '$verb' => ACTIVITY_FOLLOW
+       ));
+
+       $r = q("SELECT `contact`.*, `user`.* FROM `contact` LEFT JOIN `user` ON `contact`.`uid` = `user`.`uid` 
+                       WHERE `user`.`uid` = %d AND `contact`.`self` = 1 LIMIT 1",
+                       intval(local_user())
+       );
+
+       require_once('include/salmon.php');
+       slapper($r[0],$contact,$slap);
+
+       goaway($_SESSION['return_url']);
+       // NOTREACHED
+}
index 47516e8dd50e4af3bbb059bcd6bb1425e75b8cbc..0b4bd0d1e7d7a795799759fa5aa0ae6af5a01bf5 100644 (file)
@@ -5,11 +5,16 @@ require_once('salmon.php');
 function xrd_content(&$a) {
 
        $uri = urldecode(notags(trim($_GET['uri'])));
-       $local = str_replace('acct:', '', $uri);
-       if(substr($local,0,2) == '//')
-               $local = substr($local,2);
 
-       $name = substr($local,0,strpos($local,'@'));
+       if(substr($uri,0,4) === 'http')
+               $name = basename($uri);
+       else {
+               $local = str_replace('acct:', '', $uri);
+               if(substr($local,0,2) == '//')
+                       $local = substr($local,2);
+
+               $name = substr($local,0,strpos($local,'@'));
+       }
 
        $r = q("SELECT * FROM `user` WHERE `nickname` = '%s' LIMIT 1",
                dbesc($name)
index 142119f4911ff4d38fe60820d02c7c35c5be3d8a..60522eb50ea9783d5b004ffe9a7ba839c07668ec 100644 (file)
@@ -5,7 +5,8 @@
       xmlns:media="http://purl.org/syndication/atommedia"
       xmlns:dfrn="http://purl.org/macgirvin/dfrn/1.0" 
       xmlns:as="http://activitystrea.ms/spec/1.0/"
-      xmlns:georss="http://www.georss.org/georss" >
+      xmlns:georss="http://www.georss.org/georss" 
+      xmlns:poco="http://portablecontacts.net/spec/1.0" >
 
   <id>$feed_id</id>
   <title>$feed_title</title>
index 57c4995d9b09b3fd63b0e38670c80f47cece4a4f..fe6e70a46740fb3cdaedfce2b78b36f6e57d22e3 100644 (file)
@@ -5,7 +5,7 @@
 Please enter your profile address from one of the following supported social networks:<br />
 <ul id="dfrn-request-networks">
 <li><a href="http://dfrn.org">Mistpark/DFRN</a> (fully supported)</li>
-<li><a href="http://ostatus.org">Federation/OStatus/Diaspora/GNU-social</a> (limited - experimental)</li>
+<li><a href="http://ostatus.org">StatusNet/GNU-social/Federation</a> (limited - experimental)</li>
 </ul>
 </p>
 
@@ -13,7 +13,7 @@ Please enter your profile address from one of the following supported social net
 
 <div id="dfrn-request-url-wrapper" >
        <label id="dfrn-url-label" for="dfrn-url" >Your profile address:</label>
-       <input type="text" name="dfrn_url" id="dfrn-url" size="32" />
+       <input type="text" name="dfrn_url" id="dfrn-url" size="32" value="$myaddr" />
        <div id="dfrn-request-url-end"></div>
 </div>
 
index df7e3830c34c4193927532dc62cbaa7ad778ced3..6cc9655972acf75cbc372faa83587d1ae16b49e9 100644 (file)
@@ -6,7 +6,7 @@ You may request a connection with this member if you have a valid profile addres
 on one of the following social networks:<br />
 <ul id="dfrn-request-networks">
 <li><a href="http://dfrn.org">Mistpark/DFRN</a> (fully supported)</li>
-<li><a href="http://ostatus.org">Federation/OStatus/Diaspora/GNU-social</a> (limited - experimental)</li>
+<li><a href="http://ostatus.org">StatusNet/GNU-social/Federation</a> (limited - experimental)</li>
 </ul>
 </p>
 
@@ -14,7 +14,7 @@ on one of the following social networks:<br />
 
 <div id="dfrn-request-url-wrapper" >
        <label id="dfrn-url-label" for="dfrn-url" >Your profile address:</label>
-       <input type="text" name="dfrn_url" id="dfrn-url" size="32" />
+       <input type="text" name="dfrn_url" id="dfrn-url" size="32" value="$myaddr" />
        <div id="dfrn-request-url-end"></div>
 </div>
 
@@ -25,7 +25,7 @@ Please answer the following:
 <div id="dfrn-request-info-wrapper" >
 
 <p id="doiknowyou">
-Do I know you?
+Does $name know you?
 </p>
 
                <div id="dfrn-request-know-yes-wrapper">
diff --git a/view/follow.tpl b/view/follow.tpl
new file mode 100644 (file)
index 0000000..49bebee
--- /dev/null
@@ -0,0 +1,10 @@
+<div class="side-follow-wrapper" id="side-follow-wrapper" >
+<form action="follow" method="post" />
+<label id="side-follow-label" for="side-follow-url" >$label</label>
+<input id="side-follow-url" type="text" name="url" size="24" title="$hint" />
+<div class="side-follow-input-end"></div>
+<input id="side-follow-submit" type="submit" name="submit" value="$follow" />
+</form>
+</div>
+<div class="side-follow-end"></div>
+
diff --git a/view/follow_slap.tpl b/view/follow_slap.tpl
new file mode 100644 (file)
index 0000000..1c4a5f7
--- /dev/null
@@ -0,0 +1,24 @@
+       <entry>
+               <author>
+                       <name>$name</name>
+                       <uri>$profile_page</uri>
+                       <link rel="photo"  type="image/jpeg" media:width="80" media:height="80" href="$thumb" />
+                       <link rel="avatar" type="image/jpeg" media:width="80" media:height="80" href="$thumb" />
+               </author>
+
+               <id>$item_id</id>
+               <title>$title</title>
+               <published>$published</published>
+               <content type="$type" >$content</content>
+
+               <as:actor>
+               <as:object-type>http://activitystrea.ms/schema/1.0/person</as:object-type>
+               <id>$profile_page</id>
+               <title></title>
+               <link rel="avatar" type="image/jpeg" media:width="175" media:height="175" href="$photo"/>
+               <link rel="avatar" type="image/jpeg" media:width="80" media:height="80" href="$thumb"/>
+               <poco:preferredUsername>$nick</poco:preferredUsername>
+               <poco:displayName>$name</poco:displayName>
+               </as:actor>
+               <as:verb>$verb</as:verb>
+       </entry>
index 46b4d4ea4dd7fa25404537306b81ef07442d1f84..6707493ca7ebc8b3af7f7830bad465ee01d288b5 100644 (file)
@@ -1,9 +1,9 @@
-<?xml version='1.0' encoding='UTF-8'?>
-<me:env xmlns:me='http://salmon-protocol.org/ns/magic-env'>
-<me:data type='application/atom+xml'>
+<?xml version="1.0" encoding="UTF-8"?>
+<me:env xmlns:me="http://salmon-protocol.org/ns/magic-env">
+<me:data type="application/atom+xml">
 $data
 </me:data>
 <me:encoding>$encoding</me:encoding>
-<me:alg>$algorithm</me:/alg>
+<me:alg>$algorithm</me:alg>
 <me:sig keyash="$keyhash">$signature</me:sig>
 </me:env>
index ca4891a7673284afae10c645e92df56d2c44b2c6..191f2d50f6a50001d5ead7ed0904a14214e81ad2 100644 (file)
@@ -32,9 +32,12 @@ input, select {
        border: 1px solid #858585;
 }
 input:hover {
+
        background-color: #29BBF2;
-       color: #F5F6FB;
-       border: 1px solid #F5F6FB;
+/*     background-color: #49dbFa; */
+       color: black;
+/*     color: #F5F6FB; */
+/*     border: 1px solid #F5F6FB; */
        cursor: pointer;
 }
 option {
@@ -1550,6 +1553,16 @@ a.mail-list-link:hover {
        margin-top: 10px;
 }
 
+#side-follow-wrapper {
+       margin-top: 20px;
+}
+#side-follow-url {
+       margin-top: 5px;
+}
+#side-follow-submit {
+       margin-top: 15px;
+}
+
 .photo-album-image-wrapper {
        float: left;
        margin-top: 15px;