Muschamp Rd

Images in WordPress posts

September 12th, 2012
Chris Lytle

My blog is old. It has been online since 2005. Muschamp.ca has been online since 2002 and some of the HTML dates back to 1995 or close to it. I kept the old HTML online just for laughs. Before I went to Japan I adopted the still in-use pure CSS tab layout. I’ve tweaked it over the years, it used to validate but with all the PHP I’ve been adding and all the information I pull from other sources, I’m not sure what still validates. Browsers have definitely gotten a lot better at supporting web standards.

The theme used by this blog, I built myself and I’ve been updating it as necessary since 2005. At some point WordPress started letting you upload images inside the UI. I still do things my own non-standard way. Sometime later WordPress started adding default CSS classes to align images. I’ve stuck with my own naming conventions for CSS classes, but finally decided to take the time to add the four rules WordPress seems to favour. This post lets me test those rules.

Greg Valentino

Update: I added support for featured images and made Chris Lytle‘s face the featured image for this blog posting. I then stopped using alignleft because some people think it makes your post hard to read which is a good reason not to do it. So I recommend aligning images to the right or entering them if they are big.

This post also lets me test the Facebook for WordPress plugin further. So far it has been a big disappointment. I’m not sure it adds a single useful feature I didn’t already have or that I couldn’t get elsewhere and potentially for less overhead than the hoops and performance hit the official Facebook for WordPress plugin requires.

One thing I did learn is people are still sharing silly images I posted online to tempt hotlinkers. If they share my blog post then everything works, if they try to just share the image or to hotlink to the image they’ll find it doesn’t work and they possibly get a 404 page not found error. I’m going to make a more unique and amusing 404 not found page for my blog. But first I wanted to test the new CSS rules and show at least two of the images that are popular on Facebook. For the other two, I’ll have to try resisting choosing one of Hitomi Tanaka who became an adult move actress as I feared she might. She was a regular Idol at first. Think Pamela Anderson before she did playboy and a sex tape…

Hitomi Tanaka before she became and AV Idol

The first photo is of Greg Valentino who appears in a documentary on TLC which I watched and blogged about in 2006. For years that was the most popular post I’d ever written. Yes Greg took steroids, he also injected other substances directly into his biceps to get them to look like that. Freakish pictures are popular online. I found this picture on a forum. It got so popular I had to rename the image file while I devised a better anti-hotlinking solution. The image uses the alignright rule.

The order the rules appear in your CSS file matter. I actually have two CSS files, one for the website as a whole and one specifically for the WordPress blog, the second won’t work without the first. WordPress obviously has some default CSS rules somewhere outside the themes.

The third image is of Hitomi Tanaka and two other Japanese idols or models. I don’t know their names. Hitomi may have posted this picture to her blog. This wasn’t the photo that was popular with hotlinkers and bandwidth thieves. I took that image down. This image used to use the alignnone CSS rule.

Animated gif of Japanese Dole banana TV commercial.

Also popular with bandwidth thieves, social network sites, and the Facebook Recommendation Bar are animated gifs. The one to the right is an actual Japanese television commercial for Dole bananas. I didn’t make it. I found it somewhere in the blogosphere and then posted it to tempt people and to test my anti-hotlinking solution. It isn’t as popular as the Chris Lytle image according to the Facebook Recommendation Bar, but it was once recommended to me by the bar, so it was used to test the aligncenter CSS rule, before I switched to mostly showing images to the right of the text on my blog.

It shouldn’t need repeating, but if you carefully choose an image it can really help with enticing people to share your blog post on social networks and assuming you name the file intelligently, something Tumblr does not do, it will help with your search engine performance, assuming you want traffic to your blog for “smashed face”, “Greg Valentino”, and “Hitomi Tanaka”.


Posts on Muskblog © Andrew "Muskie" McKay comments not necessarily so...
CFA Institute does not endorse, promote or warrant the accuracy or quality of Muskblog. CFA® and Chartered Financial Analyst® are registered trademarks owned by CFA Institute.