Adding dropshadow-png to bottom of posted pics??

You can assign a class to the wide pic of each post and then assign the border to this class in your theme’s style.css.

Is there a way of implementing this in WP, or do I have to manually alter the code in each post? It would be lovely if it could be built in…

When I post a picture in each post, this is what I get:
<img class="alignnone size-full wp-image-9" title="jul" src="https://adress/jul.png" alt="jul" width="550" height="225" />

Now, the class is dynamic, since it’s generated by WP itself, and each pic has it’s own number (wp-image-9 in this case). Is there a way of assigning a class only to pics with a certain width? So that 550px wide pics get the added dropshadow, and smaller pics inte same post don’t??

As is is now; the white padding and 1px border is made by:

p img {
	background-color: white;
	padding: 4px;
	border: 1px solid #CBCBCB;
	}

in the main css-file. What I’d like to add beneath every 550px vide pic in the post is something like this:

.picShadow	{
		background: url(images/picshadow.png) no-repeat center bottom;
		width: 560px;
		}

Not sure if that is the way to go, since css at this level isn’t my hometurf exactly.

So, I want to add this to this, so that it will look something like this (please not that this is the first thing I decided to alter in the post/sidebar-section, that’s why everything looks kinda dull at the moment.). The reason I want the shadow to snap onto the bottom of the pic is that I will use pictures with different height at times, but the width will always be 550px (or 560 with the padding+border included).

Asked this for you in IRC channel. Some replies:

[18:25] <ansimation> php?
[18:25] <ansimation> getimagesize()
[18:26] <silkjaer> the width is saved with the meta data
[18:26] <silkjaer> per image
[18:27] <ansimation> list( $height, $width ) = getimagesize( “image.jpg” ); if ($width == 550 ) { echo ‘ class=”shadow”‘; }

If you manually embed those pix into your posts, then adding a “class=picshadow” to the the code of the post should not be too hard.
I don’t use the “send to editor” function, I like to use plugins to automatically extract images that are uploaded to the post.

But you need to add some padding-bottom to the .picshadow class so that the shadow is visible. Dunno how high it is, but add something like 10 or 20px. Should work, from what I can see.

Man, that Saab is nice ??

something like this might work – it uses the existing full-size class to isolate large images, then as mores suggested increase the bottom padding.

p img.size-full {
	background-color: white;
	padding: 4px 4px 20px 4px;
	border: 1px solid #CBCBCB;
	border-bottom:none;
	background: url(images/picshadow.png) no-repeat center bottom;
	}

this assumes the background image is 20px high. You’d need to also simulate the white padding and 1px border in the bg image as well as the dropshadow.

Hey there!

I gave zeniph and mores suggestion a try. the css looks like this:

img.alignnone	{
		background-color: white;
		padding: 4px 4px 19px 4px;
		border: 1px solid #CBCBCB;
		border-bottom: none;
		background: url(images/picshadow3.png) no-repeat center bottom;
		display: block;
		}

(never mind the name, just something I use for testing to see if this thing can get solved. Anyways, so what we have here is this and beneath it we’re gonna add this. Sadly, the result looks like this. As you can see, the background overwrites the white bgcolor AND the side-border continues down on each side of the bottom-pic.

So, what to do? At first I thought about making everything a bg-image, but I suspect doing that would require me to use a fixed width AND height for all my posts, which I hope to avoid. Also, for the record: I have been able to make this work with a separate span-element beneath every image. Code looks like this:

First, the html inserted directly in the post:

<img class="alignnone size-full wp-image-11" title="mbp17" src="https://localhost/gs/wp-content/uploads/2009/01/mbp17.png" alt="mbp17" width="550" height="311" />
<span class="bigpicShadow"></span>

And then the css for bigpicShadow:

.bigpicShadow	{
		display: block;
		height: 14px;
		margin-bottom: -8px;		/* to move the post-text up closer */
		background: transparent url(images/picshadow2.png) no-repeat center bottom;
		}

This works, but I have to manually add the span-element after each picture which of course is doable, but something I’d love to avoid doing.

Anyone have any ideas? Thank you so much for your tips, really appreciate your effort trying to help me.

hmm you could

• drop the grey keyline….!
• install jQuery

With jQuery you could dynamically add the <span class=”bigpicShadow”></span> beneath every instance of img.alignnone

If you’ve got you head around selectors in CSS then you already know most of what you need to work jQuery

in this case it would be an after command

<script>
  $(document).ready(function(){
    $("img.alignnone").after("<span class="bigpicShadow"></span>");
  });
</script>

too easy

zeniph: Thanks a bunch, looks really interesting! I’ll give it a try and report back here on how it went.

zeniph: It works like a charm! The jQuery-code works perfectly, but I had to change the
$("img.alignnone").after("<span class="bigpicShadow"></span>");
to
$("img.alignnone").after("<span class='bigpicShadow'></span>");
in order to make the script read the whlole line. THANK YOU VERY MUCH!

cool – no prob. didnt quite see the change above but whatever you get the idea.

now with jQuery you can pretty much get a hook on any object you want and add more HTML before, after, inside, add classes, add show hide effects

of particular use for a designer I find are the selectors :first, :last, :odd, :even

so for example

$("#sidebar LI:first").addClass("first");
$("#sidebar LI:last").addClass("last");

Would only manipulate the first and last LIs in the sidebar code.

Basically jQuery means you can leave WP and PHP to create the clean base code and then dynamically add the extra objects and classes needed to make a design work.