{"id":136,"date":"2010-09-07T12:35:54","date_gmt":"2010-09-07T17:35:54","guid":{"rendered":"http:\/\/www.danielwiener.com\/is\/?p=136"},"modified":"2011-12-13T13:29:00","modified_gmt":"2011-12-13T18:29:00","slug":"galleries-of-images","status":"publish","type":"post","link":"https:\/\/www.danielwiener.com\/is\/artist_website\/galleries-of-images","title":{"rendered":"Galleries of Images"},"content":{"rendered":"<h4>Preparing Images<\/h4>\n<p>Before you upload images to your site they need to be sized, color-corrected and exported as jpegs. Color correct you image for the screen. In order to fit on most screens using &#8220;lightbox&#8221; images should have a maximum width of 900px and a maximum height of 600px. Images should be 72dpi and exported as a medium high quality jpeg. Don\u2019t export them at 99% quality. The final image will be between 50KB and 100KB. WordPress will create thumbnails for you.<\/p>\n<p>Both Photoshop and Fireworks offer batch processing, which can automate some of this tedious work.<\/p>\n<blockquote><p>There are two free online image-editing services that I would recommend if you do not own a good image-editing program. Both of them are easy to use and can do everything you need to creating screen-ready images &#8211; resizing, minor color correction and sharpening and exporting as a jpeg.<\/p>\n<p><a href=\"http:\/\/www.pixlr.com\/\">http:\/\/www.pixlr.com\/<\/a><br \/>\nGo to the site and then click &#8220;Image Editor&#8221;.<\/p>\n<p><a href=\"http:\/\/www.pixlr.com\/\">http:\/\/www.aviary.com\/<\/a><br \/>\nClick &#8220;Image Editor&#8221; icon, then click &#8220;Launch Phoenix, start a new creation&#8221;. It should be fairly self-explanatory after that.<\/p><\/blockquote>\n<p>I recommend that you organize your image files in folders as you want them to appear online so it will be easy to access them as you upload them.<\/p>\n<blockquote><p>NOTE: You will have better luck if your file names, include the proper extension, jpg, etc and have no white space or unusual characters, e.g. $#^,&#8221;&#8221; . It is best if the names include only letters, numbers, underscore and dashes.<\/p><\/blockquote>\n<h4>Adding Images to a Post and Creating a &#8220;Gallery&#8221;<\/h4>\n<p>Steve Lambert&#8217;s &#8220;WPFolio User&#8217;s Manual&#8221; also includes instructions on <a href=\"http:\/\/wpfolio.visitsteve.com\/wiki\/instructions\/adding-content\">creating galleries.<\/a><\/p>\n<p>Click on &#8220;Posts&#8221; in the left hand menu of WordPress.<br \/>\nClick &#8220;New Post&#8221;<\/p>\n<p>Make sure you choose the category for the post, in the right hand sidebar.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"\/is\/wp-content\/uploads\/wpfolio_install\/39_choose_category.jpg\" alt=\"WPFolio\" width=\"284\" height=\"258\" \/><\/p>\n<p>Add a title for the the group of images being uploaded, e.g. &#8220;Recent Sculpture&#8221;,<br \/>\n&#8220;River Series&#8221;, etc.<br \/>\nClick the small image icon above the &#8220;post&#8221; text box, shown below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/is\/wp-content\/uploads\/wpfolio_install\/33a_newpost_addimage.jpg\" alt=\"WPFolio\" width=\"520\" height=\"252\" \/><\/p>\n<p>An overlay dialog box appears. Click Select Files<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"\/is\/wp-content\/uploads\/wpfolio_install\/34_select_files_image_loader.jpg\" alt=\"WPFolio\" width=\"586\" height=\"199\" \/><\/p>\n<p>Navigate to the images you wish to upload and select them.<br \/>\nYou can select multiple files.<\/p>\n<p>Watch the images as they upload. It will be quick if you have broadband.<br \/>\nClick &#8220;Save All Changes&#8221; and the screen will refresh in the Gallery  tab.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/is\/wp-content\/uploads\/wpfolio_install\/35_images_loading.jpg\" alt=\"WPFolio\" width=\"600\" height=\"437\" \/><\/p>\n<blockquote><p>NOTE: I have noticed a glitch. If you are uploading large files or many files at the same time, the gallery tab does not appear. Try uploading one image first. Then repeat the process selecting multiple files from your computer. This method seems to force the software to create a gallery.<\/p><\/blockquote>\n<p>Leave the other gallery options, as is.<\/p>\n<p>You may want to change the number of Gallery Columns depending on the layout of your page.<br \/>\nYou will return to this screen later to add more information like title, media, size to your images.<\/p>\n<p>Click &#8220;Insert Gallery&#8221;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/is\/wp-content\/uploads\/wpfolio_install\/36_gallery_1.jpg\" alt=\"WPFolio\" width=\"577\" height=\"626\" \/><\/p>\n<p>After returning to the post page Click &#8220;Publish&#8221; on the right side of the page.<br \/>\nClick &#8220;View Post&#8221; to check the page.<br \/>\nYou should see a page with several rows of thumbnails cropped to 150 x 150 pixels.<br \/>\nClick the thumbnails and see the lightbox in action.<\/p>\n<h4>Adding the title, media, date and size of each artwork<\/h4>\n<p>In the admin section of WordPress return to the post you just created.<\/p>\n<p>There are 2 ways to access your uploaded images.<\/p>\n<p>1) In the text box, click the gallery icon  and then click the image icon to edit the gallery (see below).<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"\/is\/wp-content\/uploads\/wpfolio_install\/38_select_edit_gallery.jpg\" alt=\"WPFolio\" width=\"610\" height=\"290\" \/><\/p>\n<p>OR<\/p>\n<p>2) Click the image icon adjacent to &#8220;Upload\/Insert (see below)<\/p>\n<p><a rel=\"attachment wp-att-555\" href=\"http:\/\/www.danielwiener.com\/is\/artist_website\/galleries-of-images\/attachment\/01_click_add_image\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-555\" title=\"01_click_add_image\" src=\"http:\/\/www.danielwiener.com\/is\/wp-content\/uploads\/2010\/09\/01_click_add_image.jpg\" alt=\"\" width=\"532\" height=\"99\" srcset=\"https:\/\/www.danielwiener.com\/is\/wp-content\/uploads\/2010\/09\/01_click_add_image.jpg 532w, https:\/\/www.danielwiener.com\/is\/wp-content\/uploads\/2010\/09\/01_click_add_image-300x55.jpg 300w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/a><\/p>\n<p>In the overlay dialog box click &#8220;show&#8221; next to an image.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"\/is\/wp-content\/uploads\/wpfolio_install\/39a_image_title.jpg\" alt=\"WPFolio\" width=\"576\" height=\"41\" \/><\/p>\n<p>Add title, media, size and date to &#8220;Title&#8221;. (As you get to know WordPress, you may want to use the other options. For now, leave them as is.)<\/p>\n<p>Repeat this process with all your images.<\/p>\n<blockquote><p><strong>Don\u2019t forget to do this or your titles will be lost and you will have to enter them again.<\/strong><\/p><\/blockquote>\n<p><a rel=\"attachment wp-att-558\" href=\"http:\/\/www.danielwiener.com\/is\/artist_website\/galleries-of-images\/attachment\/04_adding_title_to_image\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-558\" title=\"04_adding_title_to_image\" src=\"http:\/\/www.danielwiener.com\/is\/wp-content\/uploads\/2010\/09\/04_adding_title_to_image.png\" alt=\"\" width=\"600\" height=\"526\" srcset=\"https:\/\/www.danielwiener.com\/is\/wp-content\/uploads\/2010\/09\/04_adding_title_to_image.png 600w, https:\/\/www.danielwiener.com\/is\/wp-content\/uploads\/2010\/09\/04_adding_title_to_image-300x263.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Once you have finished click &#8220;Save All Changes&#8221;, at the bottom of the list of images.<br \/>\nBecause this is a \u201cGallery\u201d, do not click \u201cInsert into Post\u201d<\/p>\n<p><a rel=\"attachment wp-att-565\" href=\"http:\/\/www.danielwiener.com\/is\/artist_website\/galleries-of-images\/attachment\/06_save_all_changes\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-565\" title=\"06_save_all_changes\" src=\"http:\/\/www.danielwiener.com\/is\/wp-content\/uploads\/2010\/09\/06_save_all_changes.jpg\" alt=\"\" width=\"709\" height=\"137\" srcset=\"https:\/\/www.danielwiener.com\/is\/wp-content\/uploads\/2010\/09\/06_save_all_changes.jpg 709w, https:\/\/www.danielwiener.com\/is\/wp-content\/uploads\/2010\/09\/06_save_all_changes-300x57.jpg 300w\" sizes=\"auto, (max-width: 709px) 100vw, 709px\" \/><\/a><\/p>\n<p>Exit the dialog box<\/p>\n<p><a rel=\"attachment wp-att-561\" href=\"http:\/\/www.danielwiener.com\/is\/artist_website\/galleries-of-images\/attachment\/05_close_image_dialog\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-561 alignnone\" title=\"05_close_image_dialog\" src=\"http:\/\/www.danielwiener.com\/is\/wp-content\/uploads\/2010\/09\/05_close_image_dialog.jpg\" alt=\"\" width=\"721\" height=\"202\" srcset=\"https:\/\/www.danielwiener.com\/is\/wp-content\/uploads\/2010\/09\/05_close_image_dialog.jpg 721w, https:\/\/www.danielwiener.com\/is\/wp-content\/uploads\/2010\/09\/05_close_image_dialog-300x84.jpg 300w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/a><\/p>\n<p>and click &#8220;Update&#8221;.<\/p>\n<p><a rel=\"attachment wp-att-564\" href=\"http:\/\/www.danielwiener.com\/is\/artist_website\/galleries-of-images\/attachment\/update_button\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-564\" title=\"update_button\" src=\"http:\/\/www.danielwiener.com\/is\/wp-content\/uploads\/2010\/09\/update_button.jpg\" alt=\"\" width=\"289\" height=\"209\" \/><\/a><\/p>\n<p>Check your page by clicking &#8220;View Post&#8221;. The title, etc. only appears in the &#8220;lightbox&#8221;, not below the thumbnails.<\/p>\n<p>Repeat to create more &#8220;galleries&#8221;.<\/p>\n<h3>Useful Links<\/h3>\n<p><a href=\"http:\/\/wpfolio.visitsteve.com\/wiki\/instructions\/adding-content\">Adding Posts &#8211; WPFolio User&#8217;s Manual<\/a><\/p>\n<h4>Choosing the featured image<\/h4>\n<p>There is now a new, easier, better way to choose the featured thumbnail on a category page.<\/p>\n<p>On the Posts page of the WordPress Dashboard click &#8220;Set Featured Image&#8221; in the &#8220;Featured Image&#8221; subpanel in the lower right sidebar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/is\/wp-content\/uploads\/new_thumbnails\/01_set_featured_image.jpg\" alt=\"set featured image wordpress\" width=\"297\" height=\"83\" \/><\/p>\n<p>Then on the &#8220;Add an Image&#8221; screen, click &#8220;Use as Featured Image&#8221;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/is\/wp-content\/uploads\/new_thumbnails\/02_use_as_featured_image.jpg\" alt=\"use as featured image wordpress\" width=\"638\" height=\"130\" \/><br \/>\nBe sure to click &#8221; Save All Changes&#8221;  before closing dialog box.<\/p>\n<p>The featured image will appear in the lower right of the Edit Posts page. Like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/is\/wp-content\/uploads\/new_thumbnails\/03_featured_image.jpg\" alt=\"featured image wordpress\" width=\"295\" height=\"248\" \/><\/p>\n<p>You can easily remove the image and add another one, if you wish.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create a post with a gallery of images. Finally. This is the reason for all the set-up.<\/p>\n<p> <a href=\"https:\/\/www.danielwiener.com\/is\/artist_website\/galleries-of-images\"><br \/>Read More<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-136","post","type-post","status-publish","format-standard","hentry","category-artist_website"],"_links":{"self":[{"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/posts\/136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/comments?post=136"}],"version-history":[{"count":27,"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/posts\/136\/revisions"}],"predecessor-version":[{"id":770,"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/posts\/136\/revisions\/770"}],"wp:attachment":[{"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/media?parent=136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/categories?post=136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.danielwiener.com\/is\/wp-json\/wp\/v2\/tags?post=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}