Theoretical question here guys, I’m working on a wp site, where the index, page, and single templates all have different classes to their body tags.
Further to this, I have a thumbnail class which I attach to any image I want to insert into a post specifying width, height, border, etc. This is really geared towards the appearance of those images on the index page.
Is it possible, therefore, to ‘overide’ that thumbnail class and give it different values depending on which body class is currently active? i.e. the one image would appear as a small thumbnail on the index page using
Ok, got it to work using CSS – the back-end solutions offered by WP weren’t suitable for what I wanted…
For the benefit of others:
I wanted to upload an image into my post and have it show as a thumbnail on my index page, but at near full size when someone clicked to view the post on a single page.
The first thing I did was give the index page and the single page their own classes – ‘.index’ for the index page and ‘.singleclass’ for the single page. Note, I tried this without giving the index page its own class and it didn’t work…
I then put the following styles into my stylesheet:
When making my post, I start by uploading an image into it using the normal WP procedure, the alignment and size I choose at this point is unimportant. Viewing this in the HTML WordPress editor, I delete the generated class given to the image and replace it with ‘thumbnail’. I also delete the width and height values altogether – these are specified in the CSS. Now, when viewed in my index page, this image is positioned and scaled as a small thumbnail floating to the left of my post. (Some fiddling around is required with margins etc. to move the post title out of the way and so on…)
In the single page, the ‘.singleclass img.thumbnail’ takes over and in this case I have the image at full size sitting at the top of the page. Note it must be absolutely positioned, or the textual content will still leave room for it within the post-content area. Again some fiddling around with margins and positioning is required to suit your own style – I’ve moved the entire content of the post down 220px from the top of the page, then removed the image from the flow by absolutely positioning it, and then given it a -220px top margin top bring it back to the top of the screen. To future proof it a little, i’ve also given it a max height value of 200px so that any image can be used and not upset the layout.
I’m still trying to figure out a way to center the image though, so any ideas would be appreciated! :D