Graphic/Design Heavy Post In Wordpress?

May 19, 2008 7:36 PM

Is there a way I can integrate graphic-type web content into a Wordpress page/post? I'm not talking about just adding an image to a post/page, I'm looking to add photo/graphic content with clickable links similar to something like this. In other words, something similar to what you could do with a normal web page. I know you can add HTML to Wordpress posts/pages, but I'm not sure I understand how to design something in Photoshop/Dreamweaver and then translate that over to Wordpress. I'm using Wordpress 2.5.1. I know Photoshop and I also have a copy of Dreamweaver at my disposal if needed. Bonus to anyone that can tell me how to make the resulting graphic page SEO friendly. Thanks!
posted by ISeemToBeAVerb to computers & internet (4 comments total)

What you need is an image map. Here's Google results for image map in wordpress.

This link might have promise. I haven't tried it though.
posted by Fuzzy Skinner at 8:04 PM on May 19, 2008

Thanks for the links Fuzzy Skinner. They seem to point me in the right direction. Does anyone know the SEO implications of using something like this? It seems as though the search engines would have no way of knowing the content of the post if it is embedded in an image. Is there some way around this?
posted by ISeemToBeAVerb at 11:11 PM on May 19, 2008

I may be old school, but I thought that ALT tags were what were for making image content searchable by modern search engines.
posted by kalessin at 5:38 AM on May 20, 2008

I haven't used an image map in a loooooong time. I typically use some of the layering aspects that are possible with CSS elements to build up a graphic heavy layout.

A fixed height/width piece like the one you link to is easy to create by dropping all non-clickable assets to a single div background image, and then layering any buttons or HTML text as div contents (I've also used display:block on anchor tags in order to make background areas clickable). You may find it necessary to make use of absolute positioning in order to get your div contents just right, so read up on absolute/relative positioning. I'm willing to bet that this is exactly how the one you link to was done as you can see a couple bits of HTML in there ("Assumptions", "or call 1-866....").


Can you do that in WP? Of course. Just write your HTML, create a new page, switch to HTML only, and paste it in. If your WP template is interfering, create a new page template and use it just for that article.
posted by fishfucker at 8:32 AM on May 20, 2008