{"id":1087,"date":"2012-04-27T11:59:36","date_gmt":"2012-04-27T03:59:36","guid":{"rendered":"http:\/\/www.nargalzius.com\/blog\/?p=1087"},"modified":"2017-02-11T08:08:07","modified_gmt":"2017-02-11T08:08:07","slug":"gallery-updates","status":"publish","type":"post","link":"http:\/\/nargalzius.com\/blog\/archives\/2012\/04\/27\/gallery-updates","title":{"rendered":"Gallery Updates"},"content":{"rendered":"<p>I realize that I&#8217;ve not been able to blog for the longest time. I really wish I could go back in time to the days when life wasn&#8217;t so goddamn busy.<\/p>\n<p>But I guess it&#8217;s neither good nor bad, as the times I do have some free time &#8211; it&#8217;s to do other fun stuff that doesn&#8217;t necessitate being in front of the computer. (or because I&#8217;ve got nothing else to do)<\/p>\n<p>So here I am posting again. For now, I won&#8217;t discuss some experience (which I may get to eventually as a lot of those have happened since I last posted). What I&#8217;m going to talk about is the modifications I&#8217;ve made to nargalzius.com&#8217;s <a href=\"http:\/\/nargalzius.com\/gallery\">photo gallery.<\/a><!--more--># Starting Anew<\/p>\n<p>For the longest time, I&#8217;ve been using [the now defunct] Lumis Gallery &#8211; and have <a href=\"http:\/\/www.nargalzius.com\/blog\/archives\/2007\/04\/11\/why-you-should-use-flickr\">discussed extensively<\/a> the benefits of piggybacking a personal gallery through Flickr&#8217;s API.<\/p>\n<p>Unfortunately, the old engine has been &#8220;sick&#8221; for a long time &#8211; and the proverbial straw that broke the camel&#8217;s back was when it stopped playing nice with Facebook&#8217;s URL scraper. <span class=\"footnote_referrer\"><a role=\"button\" tabindex=\"0\" onclick=\"footnote_moveToReference_1087_1('footnote_plugin_reference_1087_1_1');\" onkeypress=\"footnote_moveToReference_1087_1('footnote_plugin_reference_1087_1_1');\" ><sup id=\"footnote_plugin_tooltip_1087_1_1\" class=\"footnote_plugin_tooltip_text\">1 <\/sup><\/a><span id=\"footnote_plugin_tooltip_text_1087_1_1\" class=\"footnote_tooltip\">You know, the FB feature that generates proper titles, descriptions and thumbnails on your timeline when it [Facebook] detects a url in your post<\/span><\/span><script type=\"text\/javascript\"> jQuery('#footnote_plugin_tooltip_1087_1_1').tooltip({ tip: '#footnote_plugin_tooltip_text_1087_1_1', tipClass: 'footnote_tooltip', effect: 'fade', predelay: 0, fadeInSpeed: 200, delay: 400, fadeOutSpeed: 200, position: 'top right', relative: true, offset: [10, 10], });<\/script> That, and Flickr itself had made major changes in the &#8220;value assignments&#8221; of their photo data &#8211; so the old system was starting to display the wrong photo sizes, etc.<\/p>\n<p>So a few days ago, I decided to have a sit-down, scrap the &#8220;Lumis engine&#8221;, and re-write the gallery from the ground up. This decision has been put off as far as I can remember for various reasons &#8211; but mainly because the Lumis engine had supported displaying <a href=\"http:\/\/farm1.static.flickr.com\/208\/454858564_8a77c1fdd6.jpg\">Flickr notes<\/a>. But I figured that I was going to have to &#8220;fix&#8221; something anyways &#8211; might as well go the whole 9 yards.<\/p>\n<h1>Gallery v2<\/h1>\n<p>The &#8220;transition&#8221; was a more than a success. I was able to add so much more functionality (at least for my uses) to the gallery &#8211; not to mention I think it&#8217;s much more &#8220;usable&#8221; now.<\/p>\n<p>Here&#8217;s a quick rundown of the fixes\/changes\/improvements:<\/p>\n<ol>\n<li>Better implementation of notes<\/li>\n<li>All-sizes page<\/li>\n<li>Better EXIF detection<\/li>\n<li>Quicker response <span class=\"footnote_referrer\"><a role=\"button\" tabindex=\"0\" onclick=\"footnote_moveToReference_1087_1('footnote_plugin_reference_1087_1_2');\" onkeypress=\"footnote_moveToReference_1087_1('footnote_plugin_reference_1087_1_2');\" ><sup id=\"footnote_plugin_tooltip_1087_1_2\" class=\"footnote_plugin_tooltip_text\">2 <\/sup><\/a><span id=\"footnote_plugin_tooltip_text_1087_1_2\" class=\"footnote_tooltip\">Lumis had a much more complex implementation (tons of features that I didn&#8217;t really use) &#8211; so it was a bit sluggish.<\/span><\/span><script type=\"text\/javascript\"> jQuery('#footnote_plugin_tooltip_1087_1_2').tooltip({ tip: '#footnote_plugin_tooltip_text_1087_1_2', tipClass: 'footnote_tooltip', effect: 'fade', predelay: 0, fadeInSpeed: 200, delay: 400, fadeOutSpeed: 200, position: 'top right', relative: true, offset: [10, 10], });<\/script><\/li>\n<li>Proper OpenGraph behavior <span class=\"footnote_referrer\"><a role=\"button\" tabindex=\"0\" onclick=\"footnote_moveToReference_1087_1('footnote_plugin_reference_1087_1_3');\" onkeypress=\"footnote_moveToReference_1087_1('footnote_plugin_reference_1087_1_3');\" ><sup id=\"footnote_plugin_tooltip_1087_1_3\" class=\"footnote_plugin_tooltip_text\">3 <\/sup><\/a><span id=\"footnote_plugin_tooltip_text_1087_1_3\" class=\"footnote_tooltip\">This is what makes it play nice with Facebook<\/span><\/span><script type=\"text\/javascript\"> jQuery('#footnote_plugin_tooltip_1087_1_3').tooltip({ tip: '#footnote_plugin_tooltip_text_1087_1_3', tipClass: 'footnote_tooltip', effect: 'fade', predelay: 0, fadeInSpeed: 200, delay: 400, fadeOutSpeed: 200, position: 'top right', relative: true, offset: [10, 10], });<\/script><\/li>\n<\/ol>\n<p>Take for example this <a href=\"http:\/\/www.nargalzius.com\/gallery\/picture\/6229322082\" target=\"_blank\">sample page<\/a> (don&#8217;t worry, it&#8217;ll open in a new tab\/window) and compare it to the <a href=\"http:\/\/farm1.static.flickr.com\/208\/454858564_0c24d0fde2_o.png\">old implementation<\/a> <\/p>\n<p>I chose that sample page because it&#8217;s one of the pictures that&#8217;s got the whole shebang of data displayed: notes, comment(s), EXIF information &#8211; so it should give you an idea on what the general layout looks like.<\/p>\n<h2>Improving Notes<\/h2>\n<p>While Lumis did support <a href=\"http:\/\/farm1.static.flickr.com\/208\/454858564_0c24d0fde2_o.png\">notes<\/a>, it had a lousy implementation of it. One weakness it had was you couldn&#8217;t click on a hyperlink that was in a note &#8211; because you&#8217;d be navigating away from the trigger and into the actual note <code>&lt;div&gt;<\/code> &#8211; hence &#8220;closing&#8221; the note before you get a chance to click on anything.<\/p>\n<p>At first I fixed this by putting a 2 second time delay before any notes close &#8211; but that was really a hack and it felt like one <span class=\"footnote_referrer\"><a role=\"button\" tabindex=\"0\" onclick=\"footnote_moveToReference_1087_1('footnote_plugin_reference_1087_1_4');\" onkeypress=\"footnote_moveToReference_1087_1('footnote_plugin_reference_1087_1_4');\" ><sup id=\"footnote_plugin_tooltip_1087_1_4\" class=\"footnote_plugin_tooltip_text\">4 <\/sup><\/a><span id=\"footnote_plugin_tooltip_text_1087_1_4\" class=\"footnote_tooltip\">Notes would just overlap each other if you brush your mouse across all the triggers<\/span><\/span><script type=\"text\/javascript\"> jQuery('#footnote_plugin_tooltip_1087_1_4').tooltip({ tip: '#footnote_plugin_tooltip_text_1087_1_4', tipClass: 'footnote_tooltip', effect: 'fade', predelay: 0, fadeInSpeed: 200, delay: 400, fadeOutSpeed: 200, position: 'top right', relative: true, offset: [10, 10], });<\/script><\/p>\n<p>To solve it once and for all, I chose a different approach: I decided it was better to display the actual note content below the photo &#8211; and when you rolled over said note(s) &#8211; a box will appear on the photo showing where that note was assigned. Sorta like mousing over a tagged name in Facebook. <\/p>\n<p>This implementation had an added benefit that anyone visiting a photo with notes would immediately realize that the photo <em>had<\/em> extra information worth checking out. And it avoided redundancies when you try to identify things. Notice that in <a href=\"http:\/\/farm9.static.flickr.com\/8163\/6971475812_8bac0c8d06_z.jpg\">that very sample page mentioned earlier,<\/a> I have a general listing of the objects in the description box <em>as well as<\/em> the notes. That&#8217;s because this picture was &#8220;tagged&#8221; a while back &#8211; where notes were hidden until mouseovered &#8211; so I <em>needed<\/em> to put a proper description for those not savvy enough to realize that the picture <em>had<\/em> contained notes. Moving forward, I obviously don&#8217;t have to do that anymore &#8211; I could just have a general description for the description box and have all the details in the notes.<\/p>\n<h2>Sizes page<\/h2>\n<p>If you&#8217;re wondering what that &#9776; icon does, it sends you to a page where you have easy access to <a href=\"http:\/\/www.nargalzius.com\/gallery\/sizes\/?photo=6971475636\" target=\"_blank\">all the sizes.<\/a><\/p>\n<p>This page was built out of necessity. I like to have easy access to the different sizes of a photo &#8211; and I was always annoyed at how many &#8220;steps&#8221; it takes to get a proper URL from Flickr.<\/p>\n<p>With this page, get a quick glance of what picture I&#8217;m looking at (small thumbnail) then in case I haven&#8217;t quite decided what size I need to use &#8211; I have an easy way to immediately view each size through a lightbox. <\/p>\n<p>Once I&#8217;ve decided on a size I fancy using, I just hover either on the static URL or html code snippet (code is catered to my blog) and it auto highlights &#8211; all I have to do then is <code>ctrl-c<\/code> and I&#8217;ve got what I need. <span class=\"footnote_referrer\"><a role=\"button\" tabindex=\"0\" onclick=\"footnote_moveToReference_1087_1('footnote_plugin_reference_1087_1_5');\" onkeypress=\"footnote_moveToReference_1087_1('footnote_plugin_reference_1087_1_5');\" ><sup id=\"footnote_plugin_tooltip_1087_1_5\" class=\"footnote_plugin_tooltip_text\">5 <\/sup><\/a><span id=\"footnote_plugin_tooltip_text_1087_1_5\" class=\"footnote_tooltip\">There&#8217;s a way to do a copy clipboard on click &#8211; but that requires Flash &#8211; which I&#8217;m trying to avoid<\/span><\/span><script type=\"text\/javascript\"> jQuery('#footnote_plugin_tooltip_1087_1_5').tooltip({ tip: '#footnote_plugin_tooltip_text_1087_1_5', tipClass: 'footnote_tooltip', effect: 'fade', predelay: 0, fadeInSpeed: 200, delay: 400, fadeOutSpeed: 200, position: 'top right', relative: true, offset: [10, 10], });<\/script><\/p>\n<p>I also included some notes metadata for good measure &#8211; just for kicks.<\/p>\n<h1>Conclusion<\/h1>\n<p>All in all, I feel good how everything turned out. I&#8217;ve yet to see if there&#8217;s a better implementation I can do for the notes &#8211; since it can be quite a problem if you have a lot of notes (that you have to scroll down far enough &#8211; beyond view of the picture) but for now, this seems to be working well.<\/p><div class=\"speaker-mute footnotes_reference_container\"> <div class=\"footnote_container_prepare\"><p><span role=\"button\" tabindex=\"0\" class=\"footnote_reference_container_label pointer\" onclick=\"footnote_expand_collapse_reference_container_1087_1();\">Notes<\/span><span role=\"button\" tabindex=\"0\" class=\"footnote_reference_container_collapse_button\" style=\"display: none;\" onclick=\"footnote_expand_collapse_reference_container_1087_1();\">[<a id=\"footnote_reference_container_collapse_button_1087_1\">+<\/a>]<\/span><\/p><\/div> <div id=\"footnote_references_container_1087_1\" style=\"\"><table class=\"footnotes_table footnote-reference-container\"><caption class=\"accessibility\">Notes<\/caption> <tbody> \r\n\r\n<tr class=\"footnotes_plugin_reference_row\"> <th scope=\"row\" class=\"footnote_plugin_index_combi pointer\"  onclick=\"footnote_moveToAnchor_1087_1('footnote_plugin_tooltip_1087_1_1');\"><a id=\"footnote_plugin_reference_1087_1_1\" class=\"footnote_backlink\"><span class=\"footnote_index_arrow\">&#8673;<\/span>1<\/a><\/th> <td class=\"footnote_plugin_text\">You know, the FB feature that generates proper titles, descriptions and thumbnails on your timeline when it [Facebook] detects a url in your post<\/td><\/tr>\r\n\r\n<tr class=\"footnotes_plugin_reference_row\"> <th scope=\"row\" class=\"footnote_plugin_index_combi pointer\"  onclick=\"footnote_moveToAnchor_1087_1('footnote_plugin_tooltip_1087_1_2');\"><a id=\"footnote_plugin_reference_1087_1_2\" class=\"footnote_backlink\"><span class=\"footnote_index_arrow\">&#8673;<\/span>2<\/a><\/th> <td class=\"footnote_plugin_text\">Lumis had a much more complex implementation (tons of features that I didn&#8217;t really use) &#8211; so it was a bit sluggish.<\/td><\/tr>\r\n\r\n<tr class=\"footnotes_plugin_reference_row\"> <th scope=\"row\" class=\"footnote_plugin_index_combi pointer\"  onclick=\"footnote_moveToAnchor_1087_1('footnote_plugin_tooltip_1087_1_3');\"><a id=\"footnote_plugin_reference_1087_1_3\" class=\"footnote_backlink\"><span class=\"footnote_index_arrow\">&#8673;<\/span>3<\/a><\/th> <td class=\"footnote_plugin_text\">This is what makes it play nice with Facebook<\/td><\/tr>\r\n\r\n<tr class=\"footnotes_plugin_reference_row\"> <th scope=\"row\" class=\"footnote_plugin_index_combi pointer\"  onclick=\"footnote_moveToAnchor_1087_1('footnote_plugin_tooltip_1087_1_4');\"><a id=\"footnote_plugin_reference_1087_1_4\" class=\"footnote_backlink\"><span class=\"footnote_index_arrow\">&#8673;<\/span>4<\/a><\/th> <td class=\"footnote_plugin_text\">Notes would just overlap each other if you brush your mouse across all the triggers<\/td><\/tr>\r\n\r\n<tr class=\"footnotes_plugin_reference_row\"> <th scope=\"row\" class=\"footnote_plugin_index_combi pointer\"  onclick=\"footnote_moveToAnchor_1087_1('footnote_plugin_tooltip_1087_1_5');\"><a id=\"footnote_plugin_reference_1087_1_5\" class=\"footnote_backlink\"><span class=\"footnote_index_arrow\">&#8673;<\/span>5<\/a><\/th> <td class=\"footnote_plugin_text\">There&#8217;s a way to do a copy clipboard on click &#8211; but that requires Flash &#8211; which I&#8217;m trying to avoid<\/td><\/tr>\r\n\r\n <\/tbody> <\/table> <\/div><\/div><script type=\"text\/javascript\"> function footnote_expand_reference_container_1087_1() { jQuery('#footnote_references_container_1087_1').show(); jQuery('#footnote_reference_container_collapse_button_1087_1').text('\u2212'); } function footnote_collapse_reference_container_1087_1() { jQuery('#footnote_references_container_1087_1').hide(); jQuery('#footnote_reference_container_collapse_button_1087_1').text('+'); } function footnote_expand_collapse_reference_container_1087_1() { if (jQuery('#footnote_references_container_1087_1').is(':hidden')) { footnote_expand_reference_container_1087_1(); } else { footnote_collapse_reference_container_1087_1(); } } function footnote_moveToReference_1087_1(p_str_TargetID) { footnote_expand_reference_container_1087_1(); var l_obj_Target = jQuery('#' + p_str_TargetID); if (l_obj_Target.length) { jQuery( 'html, body' ).delay( 0 ); jQuery('html, body').animate({ scrollTop: l_obj_Target.offset().top - window.innerHeight * 0.2 }, 380); } } function footnote_moveToAnchor_1087_1(p_str_TargetID) { footnote_expand_reference_container_1087_1(); var l_obj_Target = jQuery('#' + p_str_TargetID); if (l_obj_Target.length) { jQuery( 'html, body' ).delay( 0 ); jQuery('html, body').animate({ scrollTop: l_obj_Target.offset().top - window.innerHeight * 0.2 }, 380); } }<\/script>","protected":false},"excerpt":{"rendered":"<p>I realize that I&#8217;ve not been able to blog for the longest time. I really wish I could go back in time to the days when life wasn&#8217;t so goddamn busy. But I guess it&#8217;s neither good nor bad, as the times I do have some free time &#8211; it&#8217;s to do other fun stuff &hellip; <p class=\"link-more\"><a href=\"http:\/\/nargalzius.com\/blog\/archives\/2012\/04\/27\/gallery-updates\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Gallery Updates&#8221;<\/span><\/a><\/p><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[9],"tags":[810],"class_list":["post-1087","post","type-post","status-publish","format-standard","hentry","category-nargalzius","tag-nargalzius"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/posts\/1087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/comments?post=1087"}],"version-history":[{"count":2,"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/posts\/1087\/revisions"}],"predecessor-version":[{"id":1861,"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/posts\/1087\/revisions\/1861"}],"wp:attachment":[{"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/media?parent=1087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/categories?post=1087"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/nargalzius.com\/blog\/wp-json\/wp\/v2\/tags?post=1087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}