WordPress 3.x admin window showing duplicate images created for a blog post.

WordPress v3 works well and has attempted to think through everything. When it comes to images though a bit more is needed. WordPress automatically creates duplicate images at different sizes whenever you upload an image for a blog post. The idea behind this is great, it saves you the trouble of manually creating multiple sizes for thumbnails, feature images, post snippets, and the like. It also makes short work of linking everything; it’s all there done for you.

The problem lies in the fact that WordPress neglects to embed the color profile or the metadata in the duplicates. There’s not much you can do about the metadata (if that’s a concern then you should create your own image variations) but there is an easy way to re-embed the color profile associated with the original image file.

First off, what am I talking about and why do this? The web runs on sRGB when it comes to image files. sRGB is a background color space and is the lowest common denominator. Its gamut reflects the original CRT monitors and the bulk of the displays still in use (even LCD’s.) There are certain web browsers which are more color sophisticated (they display an image accurately if it has any embedded color profile) but there’s no guarantee that people are using them or that they have configured them properly. There are also differences in operating systems. Mac, despite of its reputation for graphics, assumes your monitor’s profile if none exists in an image file where Explorer assumes sRGB.

What all of the above means is that all bets are off when your images are viewed online and the only way to get accuracy and consistency is by having the correct color profile embedded in your image files.

1. Start off with an image in the sRGB color space and have that setting embedded in the image file. If you are converting from raw files then your raw convertor will allow you to select the color space of the processed file, if you are using Photoshop’s Save for Web there is a check-off box to convert to sRGB and embed it in the image file.

2. Go about your WordPress business as usual, make your blog post, upload your image files.

3. Go to your Mac OS Library (sorry this is Mac based info. only) and open the Scripts folder. Inside that open the ColorSync folder, and within that you will find the Embed script. Copy the Embed script to another location (e.g. your desktop and you can rename it if you like.)

4. Open your ftp client, navigate to your WordPress folder and open the Uploads folder (most likely blog/wp-content/uploads.) In Uploads go to the current year and month and in there you will find the image file(s) you just uploaded and the duplicates which WordPress created. Copy the duplicates to a folder on your desktop.

5. Open the duplicates folder, select all, and drag the files onto the Embed script. You will be prompted to select a color space, select sRGB. The sRGB profile has been reinserted into your files.

6. Upload the files back to where they came from in the WordPress Uploads folder on your server and you are done.

It sounds like more work than it is. It saves you having to open and re-save each file and it’s still less work then creating your own duplicate versions of files and having to manage and link them. It ensures that all of the duplicate images on your blog (thumbs; small, medium, & large versions) will look like the original you uploaded.

Since the question will come up – with color profiles there are always two options -> to assign or convert a color profile. In this case, by re-embedding the sRGB profile you are essentially assigning it. This is because it has been inadvertently left out, you are replacing what is missing.

Black-hat services - who will you hire? What will they do?

Just over a year ago I published a post called, A Conspiracy of Blog Comments. I had had my WordPress blog only a month or two but I could already detect a trend – odd comments leading to similarly designed shell web sites which pointed to under-the-radar products at Amazon. Engine lifts, electric cellos, etc. It made me wonder who would put the time, effort, and money into setting these up for such obscure items.

In this morning’s NYT Business section the lead story, The Dirty Little Secrets of Search, pries back the lid just a bit on what the industry calls black-hat services – SEO companies which are hired to stack the deck in terms of Google rankings. The article deals on a larger scale, JC Penney and its search rankings, but the fingerprints are similar to what I saw happening with blog comments, products, and Amazon.

I find this seamy underbelly interesting. It makes one think of dark alleys, persistent rain, and Blade Runner-esque visions of the future. Large corporations hiring questionable companies in corporate backwaters to set up bogus sites, seeding the Internet with links to those sites, all with the goal of funneling traffic. It’s a lot of work, the scope is huge, and it doesn’t appear that it can be completely automated like email spam. Who is doing this and where are they located? Are there blog comment sweatshops out there? The black-hats…

How’d it work it? Neither here nor there. It saw a bit of use by readers but not enough to justify keeping it on the site. Overall, having looked at number of these services, I think they all suffer from overkill. Most don’t let you edit the number of links provided. So, it’s common for them to present 30-50 links, the majority of them being too obscure to warrant inclusion. I also think that many in the heavy social media user crowd will already have plug-ins for their web browsers negating the need for sharing buttons.

In other blog news, I’ve made some updates this morning:

• The sidebar links and information now appear on every page.
• The sidebar now scrolls with the page (this allows it to be visible via scrolling if the browser window is shorter than the sidebar column and it means the sidebar will not overlap the blog footer.)
• Posts viewed singly now have navigation at the bottom allowing for easy movement to the next or to the previous post.
• I got rid of that pesky, tiny, smiley face which was showing up in the footer. Turns out it appears when you use the WordPress.com Stats widget. The smiley face is seen by everyone except the admin (IOW, for the admin to see it the admin must view the blog when logged out.) There’s an easy way to get rid of it – the WordPress.com Stats Smiley Remover widget.

–

12/5/09 – Already going back on my word.  Trying a Share/Save button (different service from ShareThis.)

–

12/6/09 – The flirtation continues… I tried the AddToAny Share/Save button. It’s nice and configurable, it can be anything from text or just an icon to a large horizontal button. I was impressed that it learns which services a person uses and puts those front and center. I also had some questions and its author sent me two emails this weekend. Impressive but the button wouldn’t play nice with my WordPress theme when viewed in Safari. This is a fault of Safari’s not the AddToAny code.

So, in one of those weekend sidetrack projects I’m known for – I made my own links that get added automatically on Learning to See’s home page and when individual posts are viewed. The code was cobbled together from suggestions on two sites (Anidandesign.com and MichaelMerrell.com) along with some reverse engineering of sites I’ve seen online. It’s very simple as you can see below, just text based links, but the advantage of doing it this way is that it can fit within the style of your WordPress theme. It won’t call undue attention to itself (a problem with the rows of colored icons many folks use.)

I’m not big on social media myself beyond having a blog but I can see the usefulness in helping those that are and in giving this a longer test run.  Since, ’tis the season, here’s Jon’s make-your-own text based social media bar:

ShareLink: <br> <a href=”mailto:?subject=<?php the_title(); ?>&body=Check out this post:%20<?php the_permalink(); ?>” title=”Email a link to: <?php the_title(); ?>”>Email</a> • <a href=”http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>” title=”Tweet This” target=”_blank”>Twitter</a> • <a href=”http://www.facebook.com/share.php?u= <?php echo get_permalink() ?>” title=”Share on Facebook” target=”_blank”>Facebook</a> • <a href=”http://del.icio.us/post?url=<?php echo get_permalink() ?> &title=<?php the_title(); ?>” title=”Bookmark on Delicious” target=”_blank”>del.icio.us</a> • <a href=”http://www.stumbleupon.com/submit?url= <?php echo get_permalink() ?>&title=<?php the_title(); ?>” title=”Stumble This” target=”_blank”>StumbleUpon</a> • <a href=”http://digg.com/submit?phase=2&url= <?php echo get_permalink() ?>&title=<?php the_title(); ?>” title=”Digg This” target=”_blank”>Digg</a> • <a href=”http://www.linkedin.com/shareArticle?mini=true&url= <?php echo get_permalink() ?>&title=<?php the_title(); ?>” title=”Share on Linkedin” target=”_blank”>Linkedin</a>

I’ve dubbed it ShareLink but you should feel free to call it anything you want. A title may not be needed at all. If you want it in your single posts then add it to the single.php file, if you want it on your index page then add it to your index.php file.

–

1/26/10 – It’s been just over seven weeks since adding the ShareLink links mentioned above. In that time my site and blog had over 10,000 pageviews. With all those views ShareLink was used only ten times (1/10 of 1 Percent of pageviews.) Five times for Facebook, four times for email, and one time for Twitter. Given that, I’ve deleted the links for Del.icio.us, Stumbleupon, Digg, and Linkedin.

I see an iPhone enabled site looking at me.

One change with new web site and blog is the ability for both to format themselves on the iPhone and on other touch-type smart phones. This makes for quicker loading and painless viewing of both sites when seen by those on the go.

JonRoemer.com on the iPhone:

Learning to See on the iPhone:

For JonRoemer.com this is a feature built into the web site’s structure. It replaces my hand built, hand maintained, iPhone site which ran concurrent with the old JonRoemer.com.

For the blog, being on a WordPress platform, flexibility is the name of the game. I tried three mobile versions of the blog, each promised a simple design, but only one delivered on design, ease of use, and worked out of the box. The mobile theme I’m using is WPtouch iPhone Theme. It has many options built-in, all accessed via WordPress’ settings menu, it couldn’t be easier. If I had to change one thing with WPtouch iPhone Theme, I’d want the ability to not have the calendar month and day as an icon with each post on the homepage. That’s it. This WordPress Plug-in is incredibly well made and well documented.

The two other iPhone mobile themes I tried were Carrington Mobile and Wapple Architect Mobile Plugin. The former looked to be even simpler in feel than WPtouch but it did not reformat blog photos for smaller phone screens leading to half of each image being cropped out. The latter promised to automatically create a site that mimicked Learning to See but other than orange links it looked nothing like Learning to See and it too had image problems. It dropped many images when viewed on the phone leaving placeholder icons instead.

–

Apologies to Eric Carle and Bill Martin Jr. of children’s book fame. If you have kids or grandkids, if you ever babysat kids who are in the board-book stage, you know their work. Hopefully, I won’t have an angry author and illustrator looking at me.