How to Add a Red Dot to Sold Art in WordPress

Artbiz receives the odd request asking if there is a way to put a red dot in the description of their images. Unfortunately NextGen Gallery doesn’t have that option and you’ll hard pressed to find a WordPress gallery plugin that does.

By the way, the red dot tells people who the work is sold. 

The reason it’s not a feature is probably because – unless you’re an artist or involved with the fine arts you’ll have no idea what the red dot means. That’s why writing sold or private collection or in the collection of... is standard practice for website image galleries.

But for those of you who really, really want to know how to do this I have this solution.

Using HTML to add a red dot to image descriptions in NextGen Gallery. Here goes…

First we need a dot. The best dot to use is a bullet created by keyboard command “alt + 7″ and gives you a bullet ” • ”

Once we have our ” • ” we need to style it. Make it red and make it bigger. This bit of code does just that, copy it from the screenshot below, highlighted in yellow.

Copy the above and paste it into the image description box inside NextGen Gallery as shown below and you’ll have the red dot.

red-dot-nextcellent-gallery
Screenshot of description box

Here’s a screenshot of the image as it will be seen by your site visitors once the thumbnail is enlarged.

red-dot-nextcellent-gallery-eg

If you feel strongly about knowing how to add a red dot to sold art then this will work. Otherwise writing “sold” or “private collection” is perfectly fine and doesn’t need explanation.

Share

A New Kind of Home Portfolio Page

Jan Boydol Photography

After writing the post “You Don’t Need a Home Page Per Sa”, which basically says that with WordPress, you can set any page to be the landing page of your site; I have been wondering why we need a specific page called HOME or WELCOME at all.

By the way, more often than not, there isn’t any text on the “home” page, just an image (BIG Mistake). So why not send site visitors straight to the goods? It’s why they came to your site in the first place; to see your work.

In this tutorial we’re going to do something completely different; we’re going to create a new kind of  “home” Portfolio page and set it as our landing page. This technique has been implemented at Jan Boydol Photography. Go there to see it in action (opens in a new window).

We are going to use the Media Library to upload and insert our images.

We are bypassing the use of NextCellent’s album in for this new home page for two reasons…1. I want more control over the size of the image. NextCellent’s album thumbnail size is set in the plugin’s files which makes it difficult to change for the average user. And even if you could make it larger it would be distorted and you will need to go through the process of creating new thumbnails for all your galleries.

2. I want more control over the entire page’s formatting. Using the extended version of NextCellent’s album will provide text if you enter it into the gallery’s description but it shows the galleries stacked vertically. I want mine left aligned horizontally.

The goal here is to show a larger image to represent the gallery with text under the image, not to the side. Hence providing left aligned images with text underneath.

STEP 1 – Check your media settings under Settings > Media

WordPress will create three sizes of images when you upload them. The default sizes are shown in the image below. Choosing Medium size will insert an image of the max height of 300 pixels while maintaining the aspect ratio and shows the entire image. Since showing the entire image is what I want to achieve, I’ll use the medium size image. 

wordpress-media-sizes

If you’re happy with the media sizes there’s nothing you need to do here. However should you change the sizes it is important to note that this will only size images to the new size on future uploads. Any images currently in your Media Library will remain as they are.

STEP 2 – Open your existing portfolio page in the editor.

If you don’t have one, create one by going to Pages > Add New. If your existing portfolio page is named “Gallery” or “Galleries” change it  so that people aren’t confusing it with your list of galleries that represents your work. Portfolio, Artwork or Images are good page names.

STEP 3 – Insert one image to represent the work within each of your NextCellent Galleries.

Upload your images on the page using the “Add Media” button. These images will now be stored in the Media Library, not NextGen gallery. There’s a tutorial on how to Upload a single image at the school.

add-media-button
Add Media Button is just above the editor in WordPress

To keep all your images left aligned with text below is to use the image caption. Not using the image caption feature and inserting text below the image in the editor, will result in alignment challenges that can be over come by using a horizontal rule but it is not ideal and your images may end up stacking vertically.

wordpress-image-caption
Image dialogue box – note the yellow highlighted areas, make sure to fill these in.

Once you insert the image you can open it again for further editing by clicking on the landscape icon when clicking your mouse on the image.

Apply the following attributes to your image…

  1. Select the radio button to Left align the image
  2. Here’s an opportunity to add a search engine friendly title and alternative text if you haven’t already done so.
  3. Fill in the caption with a short sentence and series / image gallery name. As seen on the example above I placed a hyperlink on the word “Heels”. This link is optional if you’re uncomfortable using HTML.
  4. Add the Link URL to the image gallery page. The easiest way to find the URL is to go to your live site and navigate to that page, then copy the URL from the browser address bar and paste it into the line as shown. By adding the Link URL the image will be clickable. 

Save your page and preview. Make any required changes. On my site I decided after inserting all my images at 300 pixels high that they were a bit to big for my liking. To change the image size all I did was open the image again in the page editor and reduced the size by percentage. By reducing them all by the same percentage I maintain a consistent height.

Here’s another site that we just finished that uses the new kind of “home” portfolio page idea, but just on the portfolio page. Jan wanted a home page with her most popular image.

Jan Boydol Photography
When you click-through to any one of Jan’s portfolios you will be greeted with sub-portfolios set up the same way.

STEP 4 – Set your new home portfolio page as the landing page of your site.

Easy – go to Settings > Reading and select it from the drop down menu and save. If you want more precise instructions there’s a tutorial on that.

I like my new Home / Portfolio page. What do you think? Questions and comments are welcome.

 

Share

Why Add Image Meta Data

A new client said “The re-sizing is working, I am not sure about why I am doing the metadata template.”

There’s no denying that resizing, renaming, optimizing and filling in the file info, also known as metadata, is a time-consuming process.

Why Add Image Meta Data? It is worth the time; this is why…

1. Images of your artwork will travel, either by email for submissions or uploaded to your website. Any file info that you provide goes with the image, in other words, it’s embedded. This includes copyright notices, keywords and the works description (name, size, medium).

File Info task pane in Photoshop
File Info task pane in Photoshop

2. Visitors to your website may pin your images to Pinterest. When pinning an image with file info, that info is automatically extracted and fills in the caption. You do not have to rely on people to do the right thing and give credit or take the time to look for it.

3. Now here’s the best thing about filling in metadata templates for your images. You only have to do it once! AND when you upload them to NextCellent Gallery the Alt title, image description and keyword fields are filled in automatically. Copy or move images between galleries; the file info goes with it.

Descriptions in Nextgen Gallery
Fields are auto filled in NextGen Gallery

A little work will go along way to brand and protect your images.

Any questions on why add image metadata? What has your experience been like when adding the metadata file into in Photoshop?


Share

Resizing Images

Resizing Images article has been updated with new information

The first thing you have to do in preparation to add content to your site is to optimize your images. Optimizing is a term used to indicate a change to a photo or a graphic, to reduce it in both visual size and file size, for use in other programs.  For use in an Artbiz website I ask clients to resize to no larger than 800 – 1024px in any one direction and no larger than 100 to 150 kbs.

Photoshop or Photoshop Elements

  1. Choose  “File” > “Save for Web & Devices” (Photoshop)
  2. Choose “File”>”Save for Web” (Photoshop Elements)
  3. Use the Save For Web dialog box to preview the effects of different optimization options on a photo you want to share on the web. The process is simple: Open a photo in the Editor and choose File > Save For Web. Then choose a format from the file format menu (GIF, JPEG, PNG-8, or PNG-24) and set options as desired. (The file format menu is directly the Preset menu.) This saves a copy of your file, without overwriting the image.

More information and visual aids


Resize your images online

Online free photo editors that you can use for free to resize your image and add a watermark.

Canva

shrink pictures

Pic Monkey/

Pixlr

iPiccy

Share

Let’s Talk Image Quality

Since the art world is moving more and more toward website submissions it is very important – no – it is paramount – that your images are high quality. That does not mean that they are large file size and 300dpi. That would take forever to load and your visitors will leave your site before the image finally gets there.

What is does mean is that your original digital photograph is of high quality because when it is reduced in size and made web ready it will hold that same quality even though it is a smaller image (around 72dpi).

Here are 5 tips:

  1. Read my article on re-sizing images for the web
  2. Always resize your images to be the same height by their proportional width. The next and previous links will be in approximately the same position making it easier for your visitors to find and advance.
  3. View your images and website on different computers with different monitor sizes. What looks good on your gigantic screen make not look so good on a 14″ monitor.
  4. Group like genres together in the same gallery.
  5. Have a read through these photography resource sites on how to photograph artwork.

http://www.dallasartsrevue.com/resources/How-to-Photo-Art.shtml

https://mgreerphoto.blogspot.com/2008/06/how-to-photograph-artwork.htm

If the gallery or collector is interested in your work they may request higher resolution images. Then you can send them that 3MB 350dpi image.

Share