Need help? Check out our Support site, then


Any way to get wordpress to frame images I use in posts?

  1. I'm not sure if this is possible at all, or if it is based on your theme.

    While manually inserting a frame/outline isn't hard in a photo editor, it is a hassle especially when I'm not at home (I don't touch paint). Preferably if it possible to insert nicer looking ones like in this blog I'd like to know how:

    http://neregate.wordpress.com/

    Appreciate any help in advance.

    The blog I need help with is shane3x.com.

  2. If you have the CSS upgrade you can add something like the line below:

    .post img {padding:4px; border:1px solid #ccc;}

    If you don't have the upgrade you will need to edit the HTML for each image you add into your post so it looks like the example below. The "style" declaration is the bit that will need to be added into each tag.

    img src="URL" alt="DESC" title="TITLE" style="padding:4px; border:1px solid #ccc;" />

  3. Cheers.

    Is there also a way I could add shadow via html?

  4. Not as far as I'm aware. You could add a frame with a drop shadow to all your images before uploading them, but otherwise you'd have to use a theme that has that as a default; in this case, Mistylook.

  5. I think the drop-shadow effect is an image in Mistylook (????)
    But:
    This style will add a drop shadow in html:

    <img src="URL" alt="DESC" title="TITLE" style="border:1px solid #000000;background-color:#ffffff;box-shadow:4px 4px 10px #00f;-moz-box-shadow:4px 4px 10px rgba(196,196,196,1.0);-webkit-box-shadow:4px 4px 10px rgba(196,196,196,1.0);margin-top:1px;margin-bottom:1px;padding:1px;" />

    Note though that not all browsers support this code (especially IE). There is probably a way to add this via CSS, but the code is from CSS3 so it may not work with wordpress???

    Illustrated in a post of mine:
    http://1tess.wordpress.com/2009/12/05/lobster-and-shrimp-miso-soup/

    info from here:
    http://www.the-art-of-web.com/css/border-radius/

    This is probably not something one would want to use image by image.

  6. Oh that's amazing. Thank you so much Tess.

  7. Hi Shane,

    Ah. Before you get too excited I should tell you that if you switch from the html editor to the visual editor, the code will be stripped by wordpress.

    I've used that on only one or two posts as an experiment of possibilities, but you could set up a code for how you want the borders and cut and paste images as needed using saved code snippets, but it seems a great deal of trouble. Not all browsers support the effect.

    You might experiment with other sorts of borders, to simulate a sort of custom frame effect. These codes will survive both versions of the editor, and will be effective in all browsers:
    http://wpbtips.wordpress.com/2009/10/14/borders-pt-1/

    You could have a thin solid border on the left and top, then a different wider border of another sort on right and bottom.

    Good luck!

  8. I've had similar experiences with other stuff so I knew about the first bit. As long as the image is still visible (without the border) in IE I wouldn't worry too much.

    I'll play around with it some more, thanks again.

  9. Great, I'm on Macs so I have no idea about what IE does! I do know that it will display rounded borders as square, and skewed or rotated things as unmodified…

    It would be ideal if you could do it via CSS, but since I know nothing about that, maybe Luke will chime in with an answer…

  10. It is definitely possible to add dropshadow borders with the CSS upgrade. Check out Josh's amazing photography blog to see them in effect around the main content area. Here's a small example of what you might use with the CSS upgrade:

    .post img {padding:4px; border:1px solid #ccc; box-shadow:4px 4px 10px #666; -moz-box-shadow:4px 4px 10px #666; -webkit-box-shadow:4px 4px 10px #666;}

  11. The blog I linked to above even uses text-shadow too if you hover over the navigation links and your browser supports it. Another effect which can be quite cool if you use it in moderation.

  12. @hallluke
    I see the text-shadow on navigation links, but do not see the box shadow effect in safari. ??

  13. It only uses the -moz prefix so its FF only on that site. I don't think this is wordpress stripping code out though, just a case of not including the alternate declarations in the CSS.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.