Page-class specific img tag

[EamonnMac]

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

Code:

img.thumbnail { width: Xpx; height: Xpx; border 1px solid #000; etc…}

But when on the single template, using a body class of, say, ‘.singleclass’, I would use

Code:

.singleclass img.thumbnail { width: Ypx; height: Ypx; etc…}

I tried something like this before and it didn’t work. Didn’t really jiggle it about, but before I try using it again I said I run it past ye and see if I’m just barking up the wrong tree…

[apostrophe]

In theory I don’t see why not. How are you generating the thumbnail class? PHP? Could you not maybe write a conditional statement to generate a different thumbnail class depending on the body class?

[EamonnMac]

Something like

<?php if (body_class(‘singleclass’)) { ?>
<img class=" xyz " />

<?php if (body_class(‘singleclass’)) { ?>
<img class=" abc " />

<?php } ?>

Would that work? (forgive my Dreadful effort at PHP, i can barely spell it, let alone write it!) I hadn’t thought about it – was going to do it through css, PHP didn’t even occur to me.

[apostrophe]

Seems you can alter img classes from the admin back end http://faq.wordpress.com/2008/07/24/image-settings-titles-descriptions-captions-etc/

[EamonnMac]

Cool, I’ll have a look at that and see what happens. If I can get it to work (or not! :D ) I’ll post up the details…

Thanks Ap!

[EamonnMac]

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:

Code:

.singleclass {
padding: 50px;
}

.index img.thumbnail {
border: 1px solid #ccc;
height: 68px;
width: 68px;
float: left;
margin: -28px 10px 0 0;
}

.singleclass img.thumbnail {
position: absolute;
top: -220px;
left: 15%;
border: 1px solid #ccc;
padding: 10px;
max-height: 200px;
height: inherit;
}

.singleclass #content {
position: relative;
top: 220px;
}

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

You can view the result here http://www.oldkitbag.com/sonta

[Author]

Posts