assign class or id to post images

  • Sorry if this question has already been asked, but i have been searching everywhere and cant find an answer.

    I want to assign all the images in my posts a certain id or class so i can style them separately to the other images in my theme. How can i acheive this? Is there a template tag to add to the loop?

    Heres my current loop.

    Cheers.

    <div id="content">

<!-- Start Loop -->

		<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<!-- Adds "altpost" Class to Alternate Post -->

		<?php if ($alt) { $alt = ""; } else { $alt = "altpostspan"; } ?>

			<div class="postspan <?php echo $alt; ?>">

				<div id="post">

					<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

						<div class="entry">

							<?php the_content(); ?>

						</div>
				</div>

			</div>

<!-- End Loop -->

		<?php endwhile; ?>

		<?php endif; ?>

	</div>
Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi

    If you look at your HTML you see you have the_content wrapped in a Div of class entry. Thus you already have all the hooks you need to style your post images.

    (before I get into that, you have Div id=”post” inside the WP loop. That means there will be one occurrence of a div id=”post” per post displayed on the page. That will create illegal XHTML as an ID can only occur once per page and being inside a loop, the code will be executed multiple times. You should change that to Div class=”post” Classes can occur multiple times per page)

    If you add to your css
    #content .entry img { ... CSS styling here ... }
    that styling will apply only to img tags within posts, and not to img tags outside of posts

    Thread Starter martymcfly

    (@martymcfly)

    really appreciate your help stvwlf.
    ive now changed div id=”post” to div class=”post”.

    i actually wanted to assign the images its own div class so i can float it next to the post div rather than sitting inside the post div.

    is this possible with a template tag calling for any images that i can wrap <div class=” “> around?

    Hi

    i actually wanted to assign the images its own div class so i can float it next to the post div rather than sitting inside the post div.

    If the only thing that will be in the div is the one img tag, its not necessary to wrap the img in a div to float it next to the post. You assign float to the img tag and it does just that. Add margin, padding as needed. With absolute positioning you can even cause it to display as a column the same height as the post text content if desired.

    You can enter all that styling in this block
    #content .entry img { ... CSS styling here ... }

    If you only want to assign the float styling to some, not all, images, assign a class to the img in the WP visual or HTML editor and change the CSS to something like
    #content .entry img.myclass { ... CSS styling here ... }
    to apply it to all img tags in the post that are assigned to class myclass

    By assigning display: block to img, it behaves just like a Div.

    If you still want to wrap a Div around the img you have to enter the Div in your posts. A way around that is a few lines of jQuery code that insert the div around post img tags when the page displays. Let me know if you’d like to see code for that.

    Thread Starter martymcfly

    (@martymcfly)

    thanks alot stvwlf, your explanations are really helping and im learning alot.

    ive added #content .entry img {} to the css and tried positioning the image. however, because img is a child of .entry, it wont allow me to position img outside the boundaries of .entry.

    i want to separate the img from .entry so i can position the image next to .entry, rather than beneath it. i somehow got it close to where i wanted but the post title was still above the image.

    heres a screenshot of what im trying to acheive. the dark image is where it is, the greyed out one is where im trying to put it.

    https://dl.getdropbox.com/u/74686/Picture%202.png

    and heres my index.php and style.css respectively.

    https://pastebin.ca/1433048
    https://pastebin.ca/1433047

    im actually quite interested in trying that jquery code that you mentioned.

    thanks again, this is actually for a school assignment and im finding your responses really valuable.

    Thread Starter martymcfly

    (@martymcfly)

    found what i was looking for!
    https://www.ads-software.com/support/topic/209656?replies=11

    updated page
    https://dl.getdropbox.com/u/74686/Picture%201.png

    thanks!

    Hi

    Just as FYI of another approach, you could accomplish it with the CSS approach I gave you earlier by setting .entry to position: relative
    and .entry img to position: absolute

    add margin-left to .entry to move it to the right.

    position img to the actual position you want it, left of entry, using minus values left and top left: -125px for example

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘assign class or id to post images’ is closed to new replies.