{"id":150,"date":"2010-12-12T02:56:33","date_gmt":"2010-12-12T02:56:33","guid":{"rendered":"http:\/\/www.diywebmastery.com\/slickrflickrpro\/?p=150"},"modified":"2012-04-30T18:21:00","modified_gmt":"2012-04-30T18:21:00","slug":"how-to-set-the-slideshow-size-precisely","status":"publish","type":"post","link":"https:\/\/www.slickrflickr.com\/members\/150\/how-to-set-the-slideshow-size-precisely","title":{"rendered":"How to Set the Slideshow Size Precisely"},"content":{"rendered":"<p>The standard landscape slideshow is sized with a height of 400px for normal display and with a height of 450px if you want to include descriptions in the caption beneath the photo.<\/p>\n<p>However if you have non standard size photos then this can cause layout issues with the odd large or portrait photo overlapping the text below.<\/p>\n<p>With Slickr Flickr Pro you can specify the height and width of slideshow and all photos will be constrained within these dimensions <\/p>\n<p>[code]<br \/>\nheight=&quot;yyy&quot; width=&quot;xxx&quot;<br \/>\n[\/code]<\/p>\n<p>In this example I want to have a large slideshow similar to that produced by Flickr which is around 800 by 600px in size. The challenge is that Flickr gives photos at 640 by 480px (Medium 640) which is  too small, and 1024 by 768 (Large) which is too big<\/p>\n<h2>Standard Slickr Flickr Edition Slideshow<\/h2>\n<p>With the standardedition of Slickr Flickr the best we can do is use the Medium 640 format. Note also the space at the bottom of the slideshow as these photos are not the standard 640 by 480px (4:3) but 640px by 360px (16:9) &#8211; wide screen format. <\/p>\n<p>[code]slickr-flickr tag=&quot;slickrflickrslideshow&quot; type=&quot;slideshow&quot; items=&quot;6&quot; size=&quot;m640&quot;[\/code]<\/p>\n<div id=\"flickr_slickrflickrslideshow_7779\"><div class=\"slickr-flickr-slideshow landscape m640 \"><div class=\"active\"><img decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/5130\/5377886300_110bbedd74_z.jpg\" title=\"lupins\" alt=\"\"  \/><p>lupins<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/5247\/5377287413_fa712387cc_z.jpg\" title=\"leaving\" alt=\"\"  \/><p>leaving<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/5170\/5377885922_12bcfa1b07_z.jpg\" title=\"tree with snow\" alt=\"\"  \/><p>tree with snow<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/5164\/5377884762_397a569cd3_z.jpg\" title=\"noon lake\" alt=\"\"  \/><p>noon lake<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/5009\/5377285787_91d2c2086e_z.jpg\" title=\"tree at sunset\" alt=\"\"  \/><p>tree at sunset<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/5005\/5377884384_fd606fdc06_z.jpg\" title=\"sunset at bude\" alt=\"\"  \/><p>sunset at bude<\/p><\/div><\/div><div style=\"clear:both\"><\/div><\/div>\n<h2>Example of Slickr Flickr Pro Edition Slideshow With Defined Height and Width<\/h2>\n<p>With the Pro edition we can create a scaled version of the &#8220;large&#8221; photo and set the width and the height of the slideshow so the photos are  constrained in size. Note that that the width and height have been set to accommodate the 16:9 ratio of the photos and hence there is not a large amount of white space beneath the slideshow.<\/p>\n<p>[code]slickr-flickr tag=&quot;slickrflickrslideshow&quot; type=&quot;slideshow&quot; items=&quot;6&quot;  size=&quot;large&quot; width=&quot;800&quot; height=&quot;450&quot; border=&quot;on&quot; bottom=&quot;20&quot;[\/code]<\/p>\n<div id=\"flickr_slickrflickrslideshow_6148\"><div class=\"slickr-flickr-slideshow landscape large \" style=\"margin-bottom:20px;\"><div class=\"active\"><img decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/5130\/5377886300_110bbedd74_b.jpg\" title=\"lupins\" alt=\"\"  class=\"border\" \/><p class=\"border\">lupins<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/5247\/5377287413_fa712387cc_b.jpg\" title=\"leaving\" alt=\"\"  class=\"border\" \/><p class=\"border\">leaving<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/5170\/5377885922_12bcfa1b07_b.jpg\" title=\"tree with snow\" alt=\"\"  class=\"border\" \/><p class=\"border\">tree with snow<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/5164\/5377884762_397a569cd3_b.jpg\" title=\"noon lake\" alt=\"\"  class=\"border\" \/><p class=\"border\">noon lake<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/5009\/5377285787_91d2c2086e_b.jpg\" title=\"tree at sunset\" alt=\"\"  class=\"border\" \/><p class=\"border\">tree at sunset<\/p><\/div><div><img decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/5005\/5377884384_fd606fdc06_b.jpg\" title=\"sunset at bude\" alt=\"\"  class=\"border\" \/><p class=\"border\">sunset at bude<\/p><\/div><\/div><div style=\"clear:both\"><\/div><\/div>\n<p>I will follow up with a video tutorial in the next few days<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The standard landscape slideshow is sized with a height of 400px for normal display and with a height of 450px if you want to include descriptions in the caption beneath the photo. However if you have non standard size photos then this can cause layout issues with the odd large or portrait photo overlapping the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-150","post","type-post","status-publish","format-standard","category-examples","entry"],"_links":{"self":[{"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/posts\/150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":0,"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/posts\/150\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/media?parent=150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/categories?post=150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.slickrflickr.com\/members\/wp-json\/wp\/v2\/tags?post=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}