Here is how you can add Facebook “Like” and “Recommend” buttons to your gallery:

Why both? Well, I find it useful to use the “Like” to connect someone to my Facebook artist’s page (or my main page). That way, they can continue to get messages from me on their Facebook page. I use the “Recommend” to connect to the page they are looking at, the gallery itself. That entry in Facebook will quickly scroll down their Facebook Wall, and be lost.

You will be adding these buttons to the “Statement” field of your gallery. You could also put them elsewhere, but be careful. Do not put them into the “Description” field, because your page won’t look right! There is something about Facebook’s code that breaks other pages.

Here’s what the operation will look like:

Step 1: Facebook “Like” Button

For example, I decided to use “Like” to connect to my Facebook page, which is here: https://www.facebook.com/pages/David-Gross/110616302378037

I got the following code from Facebook, on this page: https://developers.facebook.com/docs/reference/plugins/like/

<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=244748862233963&xfbml=1″></script><fb:like href=”https://www.facebook.com/pages/David-Gross/110616302378037” send=”false” layout=”button_count” width=”100″ show_faces=”false” font=”verdana”></fb:like>

See the bold-faced URL? That is what you need to replace with your own URL. Go to your Facebook page, copy the URL (from the top of your browser’s window), and replace the bold-face URL with your own.

Put this code into the “Statement” field of your gallery.

Step 2: Facebook “Recommend” Button

I decided to use “Recommend” to let the view recommend the page he/she is looking at. The recommendation appears on the viewer’s Facebook “wall.” You do not have to change this code at all…it will “Recommend” the page it finds itself on.

<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=209517742441628&xfbml=1″></script><fb:like href=”" send=”false” layout=”button_count” width=”100″ show_faces=”false” action=”recommend” font=”verdana”></fb:like>

Step 3: Put code into the Statement field

1. Go to your gallery administration, e.g. www.mygallery.com/admin.php
2. Click the “Galleries” tab, and edit a gallery.
3. Put both pieces of code into the the “Statement” field. Be sure to change the URL in the first chunk of code to be your Facebook page. The URL in the “href” after “fb:like” is the one to change.
   
4. If you want some extra space between the two chunks of code, you will have to put “<br><br>” between them. That means, put the “<br><br>” in that empty line, in the example below.

Here is how to prepare your pictures for uploading to the galleries.

Summary:

• JPEG format, but not “progressive” jpeg. Either “standard” or “optimized” are just fine, choose “optimized” if you can.
• Save with the Adobe RGB color space profile
• Display only: 1500 pixels on the largest side for display only, e.g. 1500 by 1000 pixels for a 35mm film sized photo
• Display and sell: original picture size, e.g. 4368 by 2912 pixels from my EOS 5D camera
• Captions: Not necessary, but for best results, caption completely. That includes creator, headline/title, caption, date created, city, state, and country.

Picture Size

What is size? It does not refer to how much space your file takes on the computer, which is the “file size.” “Picture size” means the number of dots (or “pixels”) wide and tall the image is. The file size doesn’t matter to us here, as long as it is less than 10 mb (and that is plenty big for any JPEG file).

What size should you save your pictures, to upload them to your gallery? There are two answers….

To show a picture only…

The best picture size to show pictures in an exhibition is 1500 pixels on the largest side. That means, a horizontal picture should be exactly 1500 pixels wide. A vertical picture should be 1500 pixels tall.

The “dpi” (dots per inch) does not matter at all, and it can be anything. If you’re a worrying type, set it to 72 dpi.

Resize to pictures to 1500 pixels on their largest side.

To show a picture and automatically sell fine art prints…

If you want the system to sell your pictures, and you want the system to automatically send printable files to the printer, then you should upload such pictures at the original resolution you took them.

Or, you can make them smaller, if you only want to sell at smaller sizes. In the example below, the picture is sized to 20 inches wide . The system uses 150 dpi as the minimum dpi, which looks good photographs. Most people still think 300 dpi is necessary. It isn’t and never was, but you can use it if it makes you feel good.

Do not resize your picture larger, please, unless you are making the artist decision to have a “rougher” looking image. Enlarging a computer picture does not make sharper at larger sizes.

In case you are wondering, we can handle pictures up to 10MB in size, which covers even 21 megapixel images in JPEG format.

And, yes, “JPEG” is the same as “JPG”.

Keep your pictures to sell at full size, or resize to the largest size you want to sell.

File Format

Always prepare your pictures as JPEG files. Do not used “Progressive” JPEG because the system cannot read them!

Correct file format settings for saving a picture from Photoshop.

Quality = 75 (if, instead of offering 1-100 for quality,  the program only offers 1-10, take 7 or

More Information

The system resizes pictures that you upload for exhibitions. It does a very nice job, and we display unusually large picture files for an Internet website. Why? Because it is your gallery, and it should look good!

We accept files up to 10MB in size, which covers even 21 megapixel images in JPEG format, and much higher. Higher than anyone really needs. The upload may brag about handling bigger files, but it is lying for various technical reasons that would bore the socks off an ethernet data-packet compression engineer.

There is no advantage to using TIFF files, unless you are producing the highest possible quality images, at your fine art printer’s studio, on glossy papers. Yeah, JPEG is “lossy”, but at high quality values, the variation in the paper surface, humidity, and ink is greater than any stray dot that is 1% off the original. If you are really concerned about this, have your printer store your TIFF files, and mark the checkbox on the image information page.

What if you want to add a box with a message, or a graphic, to a page? You can do it, because the system allows you to write HTML on your pages. For example, Lisa wanted to announce her new award on the front page of her gallery, but was not sure how. Here’s how we did it.

First, make a JPG graphic:

Log into the administration system.

1. Upload the graphic: click on the “Files” tab and upload the graphic. Note, in this example our graphic is named “mcc_accounce.jpg”.
2. Click the “Galleries” tab.
3. Click “Edit” (on the right) to edit the gallery front page.
4. In the “Statement” field, enter  [[mcc_announce.jpg:my picture]]

So, this worked well. It showed the graphic where the Statement text would go. But Lisa wanted the graphic nearer to the bottom. Here’s how we did it:

In the “Statement” field, we add positioning HTML code around the file insert command we used above. Here’s what it looks like:

<div style="position: fixed;bottom: 10%;">[[mcc_announce.jpg:my picture]]</div>

Now, the graphic appears exactly 10% of the window height from the bottom. Here’s what it looks like:

If you want to have an exhibition dedicated to multimedia, here’s how you can do it. In a previous post, I wrote how to show a video in an exhibition.

1. Create a new exhibition, called “Multimedia”. (You can change the name later.)
2. For each video in your exhibition, find a small picture that you can upload. It does not matter what the picture is! It is just a trick to create a new picture in the exhibition.
3. Upload the fake picture. This will create a new picture. Now, follow the instructions on  how to show a video in an exhibition to connect the new picture to your multimedia video.
4. Repeat for each picture in your exhibition.
5. When you’re done, navigate to your new exhibition. You should see your videos, ready to play. Now, get the ID number of the exhibition. At the top of your browser page, where you see something like “http://mywebsite.com/gallery.php?ProjectID=29″, write down that last number. In this example, write down “29″.

Now, let’s say you want a menu item to link to multimedia. By this, I mean a link in the same menu that says, “New Exhibitions” or “About (my name)” or “Blog”. That menu is set in the “Gallery” tab, as an “Advanced Feature.”

1. In your list of exhibitions, click on the
2. Click on the Galleries tab.
3. Click on “Show/Hide Advanced Features”.
4. Be sure the checkbox “Use custom menu bar”, next to “Menu Bar (Top)”, is checked.
5. In an unused, blank entry in “Menu Bar (Top)”, choose “custom 1″.
6. In the “Menu Bar Custom Items” area, further down, write this code into field, “Custom Item 1″
   <a href="http://milosbicanski.com/gallery.php?ProjectID=XXX">Multimedia</a>
7. Remember the ID number we wrote down, above? In place of “XXX” in the code, put that number. In this example, we chose “29″, so you would end up with:
   <a href="http://milosbicanski.com/gallery.php?ProjectID=29">Multimedia</a>
8. Click the “Save and Close” button to save your changes.

Go to your front page, and you should see the new “Multimedia” menu entry.

You can show videos in the place of pictures in galleries. The videos must be hosted on a video sharing website, such as Vimeo.com or YouTube.com.

Since the video should be the same height as other images in a gallery, try to create your video 300 pixels high. The width doesn’t matter. However, since the videos resize well, if yours is large it will work just fine.

Here’s how to work with Video on Vimeo.com (YouTube.com works almost exactly the same way).

(Vimeo has updated to HTML 5, so the code is much short!)

Get an account on Vimeo. Log in to your account. Upload your video. After the website has processed your video, you’ll be able to watch it, and there will be a link titled, “Embed.” Click on it, and you’re given some code in a box.

Method #1: Using the New Code (use this)

Vimeo has updated their system to use the HTML 5 coding. The new code, for new browsers, iPad, and iPhone, looks like this:

<iframe src=”http://player.vimeo.com/video/16018192?portrait=0″ width=”400″ height=”225″ frameborder=”0″></iframe><p><a href=”http://vimeo.com/16018192″>Athens fish & meat market</a> from <a href=”http://vimeo.com/user4946941″>milos bicanski</a> on <a href=”http://vimeo.com”>Vimeo</a>.</p>

Copy the code. When you click on the code, all of it will automatically be selected, so you can simply choose “Copy” from your edit menu.

Now, go to your gallery website. Log in, go to the exhibition that will show the video, and upload a new image. It does not matter what the image is, so make it small! Really…the uploading just creates a new place-holder which we will use to hold the video. This is not the best way the system could work, but it will do for now. Once you have the new image, edit it. The third checkbox down is titled, “This is a video, not a picture.” Check it, and a new text box appears.

Paste the “iframe” code, above, into the text box. The only part you want is the “iframe” definition .That means starting from, and including, “<iframe” and ending with, and including, “</iframe>”. Erase the extra code, starting with the “<p>”. Here’s what the code looks like after I’ve deleted the extra stuff at the end:

<iframe src=”http://player.vimeo.com/video/16018192?portrait=0″ width=”400″ height=”225″ frameborder=”0″></iframe>

Now, skip down to “Set the Size,” below.

Method #2: Using the Old Code (don’t use this unless you have a good reason to)

Vimeo has updated their system, but the older code for older browsers is still available, if you want to use it. The old code, for older web browsers, looks like this:

<object width=”400″ height=”225″>
<param name=”allowfullscreen” value=”true” />
<param name=”allowscriptaccess” value=”always” />
<param name=”movie” value=”http://vimeo.com/moogaloop.swf?clip_id=12505507
&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1
&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1″ />
<embed src=”http://vimeo.com/moogaloop.swf?clip_id=12505507&amp;server=vimeo.com
&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF
&amp;fullscreen=1″ type=”application/x-shockwave-flash” allowfullscreen=”true”
allowscriptaccess=”always” width=”400″ height=”225″>
</embed>
</object>
<p><a href=”http://vimeo.com/12505507″>Antoine Goff</a> from <a href=”http://vimeo.com/user1988155″>David Gross</a> on <a href=”http://vimeo.com”>Vimeo</a>.</p>

Copy the code. When you click on the code, all of it will automatically be selected, so you can simply choose “Copy” from your edit menu.

Now, go to your gallery website. Log in, go to the exhibition that will show the video, and upload a new image. It does not matter what the image is, so make it small! Really…the uploading just creates a new place-holder which we will use to hold the video. This is not the best way the system could work, but it will do for now. Once you have the new image, edit it. The third checkbox down is titled, “This is a video, not a picture.” Check it, and a new text box appears.

Paste the “Embed” code, above, into the text box. The only part you want is the object definition .That means the <object> </object> codes and everything in between them. Erase the extra code. Here’s what the code looks like after I’ve deleted the extra stuff at the end:

<object width=”400″ height=”225″>
<param name=”allowfullscreen” value=”true” />
<param name=”allowscriptaccess” value=”always” />
<param name=”movie” value=”http://vimeo.com/moogaloop.swf?clip_id=12505507
&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1
&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1″ />
<embed src=”http://vimeo.com/moogaloop.swf?clip_id=12505507&amp;server=vimeo.com
&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF
&amp;fullscreen=1″ type=”application/x-shockwave-flash” allowfullscreen=”true”
allowscriptaccess=”always” width=”400″ height=”225″>
</embed>
</object>

Set the Size

Now, we need to set the size. Since pictures in your gallery are probably 300 pixels height (only custom installations would be different), you want your video to be 300 pixels height. So, we need to calculate a proportional width, this way:

(width / height) x 300 = new width

Using the example above, I can see from the code that the width is 400, and the height is 225 pixels. So, I calculate like this:

(400/225) x 300 = 533 wide

You may need to the fix the code itself, too. In this example, you would replacing the value following “width=” with “533″, and the value following “height=” with “300″. If you’re using the old coding, remember to change the values both at the top of the code, and at the bottom of the code.

Now, on the picture page in my gallery, just above where I pasted the “embed” code, I put 533 into the first box (“wide”) and 300 into the second box (“high”).

Save your work by clicking the “Save” button or the “Save and Close” button.

Your video should appear in your exhibition. You can use the “Organize” exhibition editing page to move it around in the exhibition.

Note that not all themes support this well — flexible themes, for example, won’t work correctly. That’s because unlike pictures, a video isn’t supposed to resize.

Many people want a gallery with their own domain name (such as “www.mydomain.com”). To do this, you must “point” your domain name to our website servers. This is done by

1. Asking Mimetic Galleries to set up an account for you, and
2. Changing the “nameserver”, which you do from the website which sold you the domain name.

For example, let’s say I have the name “atelius.com”, and I want it to show a gallery. First, I order a Private or Group account from Mimetic Galleries. Please note, this isn’t the same as the Personal Account you can get when you sign up online.*

Next, after my new gallery is set up, I go to the website where I bought the name, which is www.verio.com. There, I log into my account. I see my domain name — atelius.com — and I see a popup menu of commands. One command is “Edit Namerservers”. I choose that.

Next, I see a small form, with between two and four boxes. Only the first two matter.

Into the box, “Nameserver 1″ I write:  ns1.frontine-photos.com

Into the box, “Nameserver 2″ I write: ns2.frontine-photos.com

That’s all I do. It can take 24 hours before the world recognizes the changes, but when it does, anyone who writes “atelius.com” into their browser will be taken to a gallery.

_____

* When the Mimetic Galleries creates a Private or Group account for you, you get your own server account, with email, FTP, and everything. Setting this up is a complicated, custom procedure that requires hours of back-breaking work, years of arcane training, magical incantations, and liters of coffee.

Your gallery has always allowed you to send it pictures by email. However, you had to caption the picture properly, as if you were sending it to an agency.

Now, it’s much easier! To send a picture to the gallery:

• Make a new email message, and attach your picture (it must be a JPG format picture, not Photoshop or TIFF).
• Write the nickname of the exhibition in the email Subject (if blank or unrecognized, the picture will go into your portfolio exhibition).
• Add any information, such as the title or caption (see below).
• Send the email…
  • Private gallery: If you have a private gallery in your own domain (e.g. yourdomain.com), then email the picture to pix@yourdomain.com.
  • Public gallery: If you have an account at mimetic.com (or another shared, public gallery), then email the picture to pix@mimetic.com (or the name of your public gallery).

You can set the nickname of your exhibition by editing your exhibition, then clicking on Show/Hide Advanced Features. Below the title is the field, “Nickname.” Use a simple word you can remember — if your exhibition is called “Fishing in Afghanistan,” you might write “fishing” for the nickname.

I’ve created an exhibition called “Snapshots” where I can send pictures from my camera phone (it’s an iPhone). Take a peek at www.davidgrossphoto.com/gallery.php?ProjectID=156.

About Security

Can anyone send a picture this way? No. The gallery only accepts pictures from email addresses it recognizes. If you send a picture to the gallery from an email account that isn’t the one in your profile, the gallery won’t accept it right away. Instead, it will look inside the picture, for IPTC caption information. If it can’t find a match for the credit/byline/author, it dumps the email message.

Adding Title, Caption, Date…

You can also add information to your picture. In your email message, you can write any IPTC field information you want. In particular, you can add a title, caption, date, city, and country to the picture. Just write the field name you want (e.g. “Caption”), followed by a “:”, then your text.

Below are the fields you can use. You can use one, or all, as you wish. Extra text in the message will be ignored, so don’t worry about your email signature.

Fields You Can Use:

Title: The title of the picture. You can also use the word, “Headline”.

Caption or Description: The caption or description of the picture.

Date: The date the picture was taken, written this way: YYYY-MM-DD. For example, write “2009-07-05″ for “July 5, 2009″.

Author or Byline or Credit: The creator of the picture, usually your name.

City: City where the picture was taken.

State: State or province where the picture was taken.

Country: Country where the picture was taken.

Example:

To: pix@mimetic.com
Subject: fishing

Title: Man Fishing in River
Caption: An Afghan man fishes for catfish in the Wazir river at sunset.
Date: 2009-07-05
Credit: David I. Gross
City: Kabul
Country: Afghanistan

From my iPhone....

Anyone can subscribe to your RSS feeds and be notified of any changes to your exhibitions. Simple send people to

feed://yourdomain.com/rss.php

and they’ll see your RSS feed. What’s really cool is that it works on the iPhone, too. Anyone with an RSS app, such as Free RSS, can see your new pictures right away.

You can also have an RSS feed for a single exhibition that shows the latest entries. You will need the ID number of the exhibition. Look in the URL for your exhibition, after “ProjectID=”. For example, if an exhibition is at http://www.yourdomain.com/gallery.php?ProjectID=156 then the ID number is 156, and your feed is:

feed://yourdomain.com/rss.php?action=project&ID=156

Be careful: “ID” is uppercase.

We’ve added three new themes for gallery pages, featuring big resizing pictures: Big Picture Left, Big Picture Across, and Picture Right. These themes are designed for gallery listings. They match the default theme, but they show a large picture from the gallery that will resize to fit the screen. It’s a nice compromise with the Picture Background Resizing theme, which fills the whole screen but can obscure text.

We’ve turned on live editing for the #container setting, so you can start messing around with margins, padding, and other aspects of the main area of a theme. Give it a try.