{"id":883,"date":"2008-08-15T05:45:10","date_gmt":"2008-08-15T12:45:10","guid":{"rendered":"http:\/\/css-tricks.com\/?p=883"},"modified":"2012-07-10T16:57:14","modified_gmt":"2012-07-10T23:57:14","slug":"script-style-exclusive-automatically-generate-a-photo-gallery-from-a-directory-of-images","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/script-style-exclusive-automatically-generate-a-photo-gallery-from-a-directory-of-images\/","title":{"rendered":"Script & Style Exclusive: Automatically Generate a Photo Gallery from a Directory of Images"},"content":{"rendered":"
UPDATE:<\/strong> Script & Style is closed, but an updated version of this article<\/a> is now on David Walsh’s site.<\/div>\n
<\/figure>\n

Just a quick note that I wrote up a tutorial (with demo and download) on how to Automatically Generate a Photo Gallery from a Directory of Images<\/a> as an exclusive for Script & Style.<\/p>\n

There will be exclusive articles posted from time to time on Script & Style<\/a> as well as, of course, the regular stream of links aimed at helping you be a better designer and developer. Snagging the feed<\/a> might be a good idea =)<\/p>\n

I’d like to encourage folks, if you have a cool idea for a tutorial you want to write, to pitch it to me. I’d like to start paying people for cool exclusive tutorials, but rather than just set a flat rate I’d rather base it on the complexity\/length\/effort\/coolness of the tutorial. Send in your idea at the Script & Style contact form<\/a>.<\/p>\n

<\/div>\n","protected":false},"excerpt":{"rendered":"

UPDATE: Script & Style is closed, but an updated version of this article is now on David Walsh’s site. Just a quick note that I wrote up a tutorial (with demo and download) on how to Automatically Generate a Photo Gallery from a Directory of Images as an exclusive for Script & Style. There will […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":833,"url":"https:\/\/css-tricks.com\/launch-script-style\/","url_meta":{"origin":883,"position":0},"title":"Launch: Script & Style","date":"August 1, 2008","format":false,"excerpt":"I always liked the idea of having a community links section on websites. Lots of sites in this genre have that and I think it's great. The driving purpose behind a tutorial site like this is helping people learn and sharing inspiration. I do my weekly \"Links of Interest\" posts\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/ssscreenshot.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":330977,"url":"https:\/\/css-tricks.com\/converting-and-optimizing-images-from-the-command-line\/","url_meta":{"origin":883,"position":1},"title":"Converting and Optimizing Images From the Command Line","date":"December 21, 2020","format":false,"excerpt":"Images take up to 50% of the total size of an average web page. And if images are not optimized, users end up downloading extra bytes. And if they\u2019re downloading extra bytes, the site not only takes that much more time to load, but users are using more data, both\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/optimize-images-terminal.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1456,"url":"https:\/\/css-tricks.com\/links-of-interest-57\/","url_meta":{"origin":883,"position":2},"title":"Links of Interest","date":"December 2, 2008","format":false,"excerpt":"Double Background Effect with CSS Soh Tanaka tackles a CSS layout problem that probably many have you have run into. The idea is double backgrounds, that is, having a centered design where the left side has a repeating design and the right site has a different repeating design. \u00a0 New\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":360239,"url":"https:\/\/css-tricks.com\/make-a-component-multiple-frameworks-in-a-monorepo\/","url_meta":{"origin":883,"position":3},"title":"How to Make a Component That Supports Multiple Frameworks in a Monorepo","date":"January 5, 2022","format":false,"excerpt":"Your mission \u2014 should you decide to accept it \u2014 is to build a Button component in four frameworks, but, only use one button.css file! This idea is very important to me. I\u2019ve been working on a component library called AgnosticUI where the purpose is building UI components that aren\u2019t\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/button-frameworks.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":308227,"url":"https:\/\/css-tricks.com\/how-to-make-a-simple-cms-with-cloudflare-github-actions-and-metalsmith\/","url_meta":{"origin":883,"position":4},"title":"How to Make a Simple CMS With Cloudflare, GitHub Actions and Metalsmith","date":"May 14, 2020","format":false,"excerpt":"Let\u2019s build ourselves a CMS. But rather than build out a UI, we\u2019re going to get that UI for free in the form of GitHub itself! We\u2019ll be leveraging GitHub as the way to manage the content for our static site generator (it could be any static site generator). Here\u2019s\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Artboard.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":207082,"url":"https:\/\/css-tricks.com\/styling-a-server-generated-file-directory\/","url_meta":{"origin":883,"position":5},"title":"Styling a Server-Generated File Directory","date":"August 26, 2015","format":false,"excerpt":"The following is a guest post by Keith Knittel. Keith used a tutorial on this site to build his own customized file directory. I was like, hey, that oughta be a better-explained tutorial on this site. So here we are. You likely know that if there is an \"index.html\" file\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/883"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=883"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/883\/revisions"}],"predecessor-version":[{"id":17479,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/883\/revisions\/17479"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}