Comments on: Graphic/Design Heavy Post In Wordpress?

Question: Graphic/Design Heavy Post In Wordpress?

ISeemToBeAVerb — Mon, 19 May 2008 19:36:36 -0800

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!

By: Fuzzy Skinner

Fuzzy Skinner — Mon, 19 May 2008 20:04:53 -0800

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.

By: ISeemToBeAVerb

ISeemToBeAVerb — Mon, 19 May 2008 23:11:31 -0800

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?

By: kalessin

kalessin — Tue, 20 May 2008 05:38:25 -0800

I may be old school, but I thought that ALT tags were what were for making image content searchable by modern search engines.

By: fishfucker

fishfucker — Tue, 20 May 2008 08:32:46 -0800

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.