Forums

Add class to image (20 posts)

  1. webbhelp
    Member
    Posted 3 months ago #

    Hi!

    Is it possible for me to add a class to an img tag.

    You know, I want to add a background image behind the picture BUT the background image will resize automatics if the image is smaller.

    Så... Can I add a class to the image?

    Thanks //WebbHelp

  2. pboosten
    Member
    Posted 3 months ago #

    Is it possible for me to add a class to an img tag.

    yeah sure, why not?

    Peter

  3. webbhelp
    Member
    Posted 3 months ago #

    Yes, but how.

    I thougt I was going into the code, but I donät know the file...

  4. pboosten
    Member
    Posted 3 months ago #

    Let me try then. How would that background image be? Because I suspect resizing could be a real problem, without using lots and lots of (for instance) jQuery stuff.

    If the background is a tile of some sort, a div around the image could do the trick:

    <div class="imgdiv">
      <img src="..." />
    </div>

    and in css:

    .imgdiv {
      background: url(...);
      overflow: hidden;
    }

    Peter

  5. Otto42
    Moderator
    Posted 3 months ago #

    What's wrong with simply <img src="..." class="whatever" />?

    I guess I don't understand the original question. You can add a class to anything.

  6. webbhelp
    Member
    Posted 3 months ago #

    yeah but where can i find that in code?

    Beacause everytime the owner will send a new blog post. I want it to be a class before the img tag like:

    <div class="">

    <img src=".../"></img>

    </div>

    How can I add that?

    I am new with Wordpress and I got no idé how to add an class so I can create a resizable background, with classes.

  7. pboosten
    Member
    Posted 3 months ago #

    That complicates it a little.

    I think I would solve this by using custom fields, but to explain that here would be too lengthy.

    There's a good screencast on css-tricks.com, where Chris explains the usage of custom fields very well.

    Peter

  8. webbhelp
    Member
    Posted 3 months ago #

    Ok, so it is that difficult to get a background of an image.

    You know I want to get an image that is behind the image, lika a frame, and the frame will resize it self if the image is bigger...

    Thanks :)

  9. Otto42
    Moderator
    Posted 3 months ago #

    I'd say that you're doing it wrong. You don't want to style your site such that the author has to put special code into every post just to make the theme work properly.

    Rework your style to address the image in the content directly instead of requiring some weird class.

  10. webbhelp
    Member
    Posted 3 months ago #

    I don't really understand now.

    I don't want that author will be writing html code and that stuff, I want the picture to get a frame behind, automatically, nut I don't know how and it seems to be very difficult!

  11. webbhelp
    Member
    Posted 3 months ago #

    Wait wait, This must be easier:

    If I got only one frame that don't need to be resizeable.

    How can I put it behind the pictures.

    OBS: It don't need to be resizable!

  12. Otto42
    Moderator
    Posted 3 months ago #

    webbhelp: Why is it difficult?

    http://www.google.com/search?q=add+a+frame+to+images+css

    Seems easy enough to me.

  13. webbhelp
    Member
    Posted 3 months ago #

    Sorry, but I am new with WP.

    I now in CSS how to bring the frame behind the picture, but where shall I put the code?

  14. pboosten
    Member
    Posted 3 months ago #

    I'd say that you're doing it wrong. You don't want to style your site such that the author has to put special code into every post just to make the theme work properly.

    That's a matter of opinion and possibly jumping to conclusions as well, since we didn't hear from the OP whether the background image would be the same for all foreground images or not.

    Anyhow, those custom fields were designed to put some additional power to authors, and the site builder can decide whether or not to react to a missing custom field.

    Peter

  15. webbhelp
    Member
    Posted 3 months ago #

    I am not that good at english but I try.

    Have we confirmed that the user/author will add the code for the image frame or?

  16. pboosten
    Member
    Posted 3 months ago #

    You know, I want to add a background image behind the picture BUT the background image will resize automatics if the image is smaller.

    • Will these background images be the same for all pictures?
    • If you refer to 'the picture', are those pictures in one or more posts, or also (or even exclusively) outside posts?

    Peter

  17. webbhelp
    Member
    Posted 3 months ago #

    It is like this.

    It is not my blog, so... When the author is writing a new post, AND add an image, then I want that it automatically adds a frame behind the image.

    The frame doesn't need to be resizeable (automatically), I can use only one frame.

    So every time the author adds a picture in the post, it will be a frame behind the picture.

    Thanks :)

  18. pboosten
    Member
    Posted 3 months ago #

    You could put something like this in your stylesheet:

    .post img {
      background: url(path/to/your/frame-image);
    }

    but that would depend on how the site has been structured.

    Peter

  19. webbhelp
    Member
    Posted 3 months ago #

    But if I use background, I need to put som width and height, and that change the image width and height to.

    Thanks for helping me, very nice :)

  20. pboosten
    Member
    Posted 3 months ago #

    If you put this in one of my sites:

    .post img {
    background-color:#FF0000;
    padding:10px;
    }

    then I get a nice red 10px wide border around my images, regardless of how big my image is. It just puts a red background color behind the picture, and adds 10px on each side padding to the picture.

    The trick here would be to create an image for a frame, that is a bit larger than the picture that's going to be inserted, and add the padding to the picture.

    If you want it to look like a real frame, then you might face the problem of the inserted picture: it has to be specific in size (but you could do that with width and height).

    Peter

Reply

You must log in to post.

About this Topic

Tags