How can I precisely position an image on a page or post?

  • Hello,

    I want to be able to precisely position an image on a page or post (not just left, center, or right justify) using CSS and still have the ability to edit that image in the WordPress Admin area. I know that WordPress automatically assigns a class to every image I upload/insert and I can certainly use that class to position the image exactly where I want it. But if I replace that image via upload/insert, a new class is assigned and then the CSS has to be modified to maintain the image positioning.

    I’ve looked at Custom Fields but haven’t found the answer there.

    I’ve also considered using a custom page template, but with custom page templates any image you hard code into the template cannot be changed in the WordPress Admin area.

    Surely there must be a way to do this so that the person maintaining the content in the WordPress Admin area can edit images at will without the need for someone else to modify CSS every time a change is made.

    All replies are greatly appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter wpdavid

    (@wpdavid)

    By the way, yes, I’m aware you can use the HTML tab and wrap an <img> tag with a <div>, or add a class, etc. But, I’ve seen users go in with the Visual tab and delete a block of text and/or an image, and along with the deletion goes the custom HTML code, and then your precise positioning is gone. What I’m asking is whether there is a way to do this without using the HTML tab (which, for some users, can be dangerous).

    Try using the post classes as generated by post_class(). I’d also recommend using Firefox with the Firebug add-on for this kind of CSS work.
    https://getfirebug.com/

    Thread Starter wpdavid

    (@wpdavid)

    Hi esmi, thanks for your response.

    By post classes, I think you’re referring to the classes automatically generated by WordPress for <img> tags and other HTML elements, correct? For example, an <img> tag might have something like this assigned: class=”aligncenter size-full wp-image-62″. Yes, I can certainly reference the class “wp-image-62”, but if that image is replaced with a different image by the user via the Editor, a different class is assigned (for example, wp-image-63), and then my custom CSS no longer applies.

    Maybe what I’m asking is not possible in WordPress…

    Im not realy sure im getting you correct. But if I am one way to solve this is via custom fields.

    Look at this code:

    <?php  if((get_post_meta($post->ID, "bild-lopsedel-fullbredd", true))) { ?>
			<div id="bild-lopsedel-fullbredd">
				<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
				<img src="<?php echo get_post_meta($post->ID, 'bild-lopsedel-fullbredd', true); ?>" alt="Artikelbild #<?php the_ID(); ?>" />
				</a>
			</div>
		<?php } ?>

    It display any image url that you copy and paste into your custom field with a name of “bild-lopsedel-fullbredd”. It also has a div with the same name that you now can use for absolute positioning or whatever you wanna target it with in your stylesheet.

    Regards
    yurini

    Thread Starter wpdavid

    (@wpdavid)

    Hi Yurini,

    Thanks for your reply.

    The code you supplied (which I read about under WordPress Function Reference) works great and it’s really good to know about, but I have two concerns:

    1. How do you suppress the display of the custom field name and value on the page when you use this code (all I want to show is the image)?

    2. Unfortunately, a custom field is not in the Editor area of WP Admin (where users enter their page content, upload photos, etc), which means it can’t be managed (uploaded, replaced, etc) by the user. I want a way to do what this code does, but with an image in the Editor area. Any ideas on how to do that?

    David

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How can I precisely position an image on a page or post?’ is closed to new replies.