Welcome to the official WideRange Galleries blog, written by Jack Brauer, owner and lead programmer at WideRange Galleries. This blog is meant as a resource for clients to keep track of latest features and tips to maximize the potential of the gallery software.

Comments, Anyone?

Lately I’ve been implementing features into the WideRange v.5.0 software to enable some more blog-like functionalities within the galleries and other pages.

One such feature is the ability to easily add the Disqus commenting system to any gallery, product, or other page of the website! You can activate commenting on a page simply by toggling a button for that page in the admin. Here’s what it looks like on my site:

disqus-screenshot

For some live examples, I’ve activated commenting on my recent Trip Report galleries; here’s an example. These kinds of journal or article pages are well suited for encouraging comments, feedback, and discussion.

By enabling comments along with a combination of “journal menu” and “large photos” gallery formats, you can set up a layout similar to a blog – all within the WideRange Galleries software, and it’s so much simpler and easier to manage than WordPress.

All you need to do to activate commenting on your website is to sign up for a Disqus account and then enter your Disqus “shortname” into the WideRange admin settings. You can find detailed instructions in the WideRange admin at the Settings > Comment Settings page.

Another recent feature that can be used effectively to create blog-like articles is the new and improved text editor. The new editor allows you to easily insert images from the database (or upload new ones), all within the text flow, along with captions as well. If you haven’t tried this yet, be sure to play around with it; it’s a subtle but powerful feature if you take advantage of it.

While these features don’t constitute a fully functional blog, they do make it a lot easier to create and manage a simple “blog-like” presentation in your gallery website, without having to slog around in WordPress. Enjoy!

Introducing WideRange Galleries Admin v.5.0!

I am pleased to announce the launch of the new WideRange Galleries Admin verson 5.0! This version of the website administration software looks similar to 4.0 on the surface, but under the hood I’ve reprogrammed the entire thing from the ground up, rewriting literally every single line of code. The new software provides a much more efficient and powerful code foundation which will be easier to manage and build upon in the years to come. While I was at it I also improved many of the features and added some new ones as well. Here I will explain some of the more noteworthy new and improved features, along with some screencast videos to show them in action.

Improved Text Editors

The new admin has vastly improved text editors, making it easier to manage your text content and providing useful tools for inserting images within your paragraphs. These modern and streamlined text editors do a great job of keeping your text data clean and correct. The text boxes also expand on the page as you enter more content, making it convenient to read and edit a long page of text.

A great new feature of these text editors is the ability to insert images within the text without needing to manually insert any HTML code. You can choose a new image to upload, or you can select existing gallery images to insert.

Improved Prints Management

In an effort to make the Prints and Products more intuitive and easier to manage, I have completely overhauled this section of the admin. Whereas before the prints and products where managed together in one giant products list, I have now separated them into their own sections. You can now manage all your print sizes on one page, and all your print display options on another. Changes made on either page will automatically update all their corresponding entries in the pricing list. Overall this new system makes it much clearer and easier to add or modify prints sizes and/or display options.

Additionally, you will see that the print sizes are now labelled with automatically calculated aspect ratios, and so are the photos. This aspect ratio labelling is handy for quickly identifying which print sizes should apply to photos when you upload them.

Finally, there is now a much more robust “Assign Photos to Prints” page which provides numerous tools for quickly batch applying many photos to their applicable print sizes.

Drag-n-Drop Sequencing and Nesting

Another big improvement in the 5.0 Admin is the widespread implementation of drag-and-drop sequencing for galleries, prints, products, searches, and more. Using this new tool you can quickly and easily drag and drop your galleries into the order you prefer. You can also drag galleries into a nested position underneath another gallery, in order to easily create a hierarchy of galleries and sub-galleries.

More New & Improved Features

  • Improved “quick edit” functionality: In various data tables in the admin you can click directly on the data to edit and save it without leaving the page. The new version of this feature functions as a pop-up overlay and doesn’t disturb the page flow or scrolling position on long pages.
  • Photo list filtering: On the photo modification pages when you’re trying to find a photo in a long list of gallery photos, you can now use the “Filter results” box to enter a search term and quickly narrow down the photo list.
  • Browser Anti-Aliasing option: At Photos > Settings you now have the option to turn off the browser anti-aliasing effect on your photos to increase apparent image sharpness. Read more about this option on that page.
  • Contact form reCAPTCHA Spam Prevention option: At Pages > Contact Page you now have the option to implement a modern “reCAPTCHA” human verification technique to add more protection against spam coming to you through the contact page form.

The new features above are the biggies, but throughout the redevelopment process I combed through every page of the admin to add little improved features, improve the useability flow, and update older components to more modern versions. The end result should make managing your photo galleries and print products even easier and more intuitive than before. I hope you like it! As always I welcome your feedback and any suggestions you might have for new or improved features.

If you are currently using an older admin version, please contact me to discuss upgrading your website to the latest version!

Responsive Images!

I am happy to offer a new feature for WideRange Galleries clients with responsive-designed websites: Responsive Images!

Summary

• Responsive images allow you to upload larger images.
• The larger image files will be served to large or high resolution screens. Images will look sharper on retina screens.
• Smaller image file versions will be served to mobile devices with small screens, saving bandwidth and loading times.
• Recommended sizes for new responsive image uploads would be between 1200-1600px on the long side.
• Existing website photos will stay how they are; new larger images will be responsive.
• Instructions for uploading and updating images files are listed below.

What are responsive images?

Traditionally when an image is embedded in a page, there’s just one image file and the browser loads it. With responsive images, for each photo several different image sizes are provided, and the browser will automatically choose the best one to load based on a variety of factors including browser size, screen resolution, and internet connection speed.

Why responsive images?

The responsive images feature has two major benefits: it provides higher resolution image files for large monitors and retina screens, and conversely it supplies lower resolution image files for small devices that don’t need to load a big image file.

The first issue mainly involves retina screens. Retina screens are the newer high resolution screens like you’ll find on iPhones, iPads, and the newest iMacs and MacBooks. Before retina screens came along, all websites displayed at 72ppi resolution, and images looked just fine at these fairly low resolutions. But because retina screens have over twice the resolution of normal monitors, webpages and images viewed on retina devices are automatically upsized by 2x in order to maintain the same relative visual size. This means that web images that look fine on a normal monitor will look soft and blurry on a retina screen.

Responsive images solve this blurry retina problem by providing an image that’s twice the resolution, which will look much sharper on retina devices. Similarly, people using large desktop monitors with big browsers will also get to see larger versions of your photos.

On the other end of the spectrum are small mobile devices, which often use slower wireless internet connections. Since more and more people are accessing the internet with these small devices using slower internet speed, it’s important to also provide smaller image files that will load quicker. There’s no need to load a huge 1600px image on a screen that’s only 320px wide! Responsive images solve this problem because the browser will be able to load a small version of the image file rather than the big version, thus saving valuable bandwidth and loading time.

In short, responsive images allow your website to cater simultaneously to both large and small screens, rather than needing to compromise on either.

Demonstration

To see responsive images in action, I’ve provided an example below along with a normal image to compare. To fully appreciate the responsive image, you really should view those photos on a larger retina screen such as an iPad or retina iMac or MacBook. On a normal monitor you won’t see any difference, while on a retina screen you can really see the difference in sharpness.

900px non-responsive image

A normal 900px non-responsive image. This will look fine on a normal screen, but a bit blurry on a retina screen.
Responsive Image example

A responsive image. On a normal screen this will load the same 900px image as above. But on a retina screen it will load a 1800px image which will look much sharper. Also, try resizing your browser smaller and see how it loads a smaller image file instead. (You might need to refresh the page to see the effects).

What’s happening in this case with the responsive image is that there’s actually four different sized jpg files at 600, 900, 1200, and 1800 pixel widths. In the code we’re telling the browser that there’s these four images available and what sizes they are, and the browser is automatically choosing the best one based on the screen resolution and browser size. It only chooses the one that’s as big as it needs, thus saving bandwidth for smaller devices resulting in faster loading times. For high res retina screens the browser knows it needs to load one of the larger images to display sharper.

How to start using responsive images

Once I activate the responsive images feature for your website, you will start uploading your new photos at larger image sizes. Previously, clients would upload web photos at sizes around 700-1000px widths. With the responsive images feature in place, you will upload your photos at larger sizes in the 1200-2000px range.

That’s all you have to do! The admin will automatically create all the various smaller thumbnail sizes.

Note that if your website is an older non-responsive website (meaning the content doesn’t scale to fit smaller screens/browsers) we will need to upgrade your site to a responsive version in order to utilize the responsive images feature. I highly recommend this, since more and more people are using the internet on phones and other mobile devices, so it’s becoming more important to have a responsive, mobile-friendly website.

Read more below about recommended photo upload sizes and how to replace existing images with larger versions. Continue reading

WideRange Photo Insert – WordPress Plugin

WideRange Photo Insert screenshotIn addition to our renowned gallery websites, we also provide services to install and integrate a WordPress blog so that it looks like a seamless part of your website. A blog is a great supplement to your gallery website, as it provides a more informal area to post frequent photos, articles, or just random thoughts. By updating a blog on a regular basis you will encourage visitors to return to your website frequently. People can also comment on your posts, giving your website another level of interactivity.

We have also developed a very useful WordPress plugin – “WideRange Photo Insert” – that makes it much easier to manage your blog in conjunction with your gallery website and serves to elegantly integrate the two together. This plugin allows you to easily insert photos directly from the gallery website into your WordPress blog post. When you insert a photo this way, you also have the option of including the photo’s title and caption information, along with a “purchase print” link back to the print ordering page on your gallery website.

Read more about how this ingenious plugin drastically improves your blogging workflow and see a screenshot below. Continue reading

Quick Edit and Batch Edit

I’ve recently added a couple useful features to the WideRange Galleries 4.0 admin control panel to make it even more powerful and user friendly to manage your photos, prints, and products!

Edit in Place

The first is “quick edit” – also known as “edit in place” – which allows you to edit photo or product data directly from the data list. When you’re looking at a list of gallery photos or the list of products, instead of needing to go into a secondary editing page to modify a particular photo or product, you can simply just click on whatever data you want to change. That data will instantly switch into an input form where you can enter your new data and save it – all without leaving the page! This is a much faster and easier method of editing your data.

I’ve implemented the quick-edit feature for the photos and products – the two sections of the admin where you’re dealing with lots of data and where the quick-edit ability will prove most beneficial. The pages that are quick-edit enabled are labeled as such, and as you roll your mouse over the data you’ll see a blue rollover color that signifies the editable data. Just click on anything and edit it!

The second new feature is a photo batch-edit tool, where you can select however many photos you want and edit their location, keywords, and/or search tags all in one swoop! This could save a huge amount of time if you want to add certain keywords or search tags to an entire gallery of photos at once, without having to edit each photo individually.

Print Sales Statistics

Print Sales Statistics
Print sales charted by month and gross income.

Today I am super excited to announce a major new feature for the WideRange Galleries 4.0 admin program: Print Sales Statistics! If you sell a substantial number of prints through your website, statistics with visual charts and graphs can provide valuable insight into which photos sell, when they sell, and where they sell. Not only is this information just interesting to see, it can help you make more informed marketing decisions.

With this new integrated statistics tool, you can chart your print sales by history, years, months, photos, print sizes, display options, customers, countries, and states – and for any of those you can sort the data by number of prints sold or gross income. A variety of interactive charts and maps are provided to help visualize all this data. Better yet, by adjusting a couple settings in your Paypal account (see below), the statistics program will automatically keep track of your print sales from now on. Continue reading

Generic Payment Page

Generic Payment pageJust in case you weren’t aware, if you’re on version 4.0 of the admin you’ve got a generic payment page! The address is at http://www.YOURSITE.COM/payment/ So, for example, mine is at: http://www.mountainphotography.com/payment/

This comes in handy when you need to receive money from a customer for something that doesn’t have a set price on your website and thus can’t be put into the shopping cart. Most commonly this is useful for image licensing, which almost always involves a variety of pricing numbers depending on the client and the image usage. You can send the customer an invoice along with a link to your generic payment page, making it easier for everyone involved!

What to Know about SEO

google-result

Search Engine Optimization (SEO) is a very broad term that covers basically everything involved with the process of getting website pages to rank well in search engines’ organic (natural, non-paid) search results. SEO involves the technical aspect of building the website code properly (my job), the publishing aspect of entering good content and keywords (your job), and the salesman aspect of actively promoting your website (also your job). In this post I will talk about all three aspects of SEO in a practical sense and will answer some common questions about it.

How do Search Engines Work Exactly?

Search engines use special algorithms to crawl your website, analyze the content, and rank your pages relative to every other website on the web. These algorithms are secret, and therefore SEO in general is somewhat of a voodoo science. There are some things we do know though: Continue reading

Google Sitemaps

sitemapI am pleased to announce another great new feature for the v.4.0 gallery sites: Google Sitemaps! You can find this in the admin control panel under Settings > Sitemap. In this post I will first explain a little about what a sitemap is, and then I’ll explain how to use the new feature.

A sitemap is basically an XML-formatted file that lists all of the pages on your website. Google and other search engines have spiders, which are automated programs that periodically crawl through your website to evaluate and index the various pages for their search engines. The spiders can only index pages that they can find through links on your site (or from other sites). This is where the sitemap comes in handy, because it makes it easy for the spiders to see ALL your pages, even if some of them are buried deep in your site or not linked at all.

A sitemap won’t improve your pages’ rankings in the search engines, but they can help to increase the number of your pages that are indexed in the search engines. Another potential benefit is that the sitemap will list all your photos, along with the corresponding title, location, and caption information. This could be beneficial for image search results because it’s telling the spiders the specific information about each image – something that spiders have a hard time doing themselves since they cannot “see” the photos like we humans do.

Here’s how to start using this feature. The sitemap feature is set up to function manually; in other words, you have to select to generate the sitemap for the first time, and each successive time. You can do this in the admin control panel by going to Settings > Sitemap. Continue reading

External Gallery Links

Did you know, the gallery URLs can accept external links? Here’s how this works:

When you add a gallery, you enter a URL code for the gallery – normally it’s just one or two words to describe the gallery in its page address. So for example a gallery URL of “aerial-photos” would correspond to a gallery page address of “http://www.yourWebsite.com/gallery/aerial-photos/”. With this standard usage of the URL codes, all the gallery pages will be contained within your website.

But what if you want to link a gallery thumbnail to a page outside of your website? In that case, just enter the full website address in the URL field, including the entire “http://www…” part of the address. The program automatically checks to see if a gallery’s URL code includes a full website address, and if so, it simply links to that page rather than creating the usual internal gallery link. So to continue the above example, instead of a simple URL code such as “aerial-photos“, if you enter the URL code as an entire website address like “http://www.someOtherWebsite.com/aerial-photography” then the gallery thumbnail for that gallery will simply link to that external website page. In other words, that gallery won’t display photos at all; it will simply exist as a placeholder to link to that external link.

A practical example of how I use this feature myself can be seen on my Trip Reports gallery page. That page is set up as a gallery with each entry existing as a sub-gallery. However, many of the sub-galleries there are actually empty of photos and simply link out to pages on my blog website – which is a different website than my gallery site (even though it looks similar). Thus, I’m able to maintain a gallery of all my trip reports, each of which might link to another internal gallery, or they might link to an external blog post.

Here are some other possible ways to utilize this feature:
• Maybe you have another relevant website, such as a stock archive on some other stock photography website. You could add an external gallery link to this within your main galleries list.
• You could include gallery links to blog posts, like my trip reports example above.
• You could create a gallery of favorite Links, an have all the formatting and thumbnail options that the gallery structure offers, rather than the simple format of the standard Links page.