Image positioning within post

  • Resolved Cultivate

    (@dpc036)


    18 years, 2 months ago

    I am in the process of creating myself a theme for wordpress, and have come across a problem i cant solve.

    I’d like to achieve this:
    https://www.paulburrows.com/postsetup.jpg

    the title, date category and body text i can format as shown. its the image position that is causing problems.

    i think this is because when you create a post within wordpress you add/link the image within the body text, and therefore the image is within the same <div> as the text.

    Can anyone suggest how i can solve this?

Viewing 5 replies - 1 through 5 (of 5 total)

  • If the image has the class imagelink and I want to align it to right, I add float: right; to the class definition .imagelink in the CSS. If the image hasn’t the class imagelink I want to align it to right, I add the class="alignright" to image (in the HTML source) and define the class .alignright in the CSS with the same line float: right;.

    You could solve this by using some javascript, like this site:
    https://stichtingsobibor.nl/index.php/inhoud/home/

    Thread Starter Cultivate

    (@dpc036)

    inteli6encia, i have tried using floats, but ive found because the image is in the body text of the post its difficult for me to align it as it is in the link i orginally posted.

    Thread Starter Cultivate

    (@dpc036)

    could you use the optional excerpt to link the image, then style that to position it as shown?

    Sorry, I made two mistakes:

    1 – The class imagelink is included by WP in the anchor when you use a thumbnail with a link to the original image. The class alignright I mentioned before I include in the img tag. Ex.: <img class="alignright" ... />.

    2 – This align the image to right but only at body text level. I see again your example and now I note you need the title and meta are left-aligned like the body text.

    It appears to be difficult to do so… I can suggest you try creating two “sub container” div’s under the post-X div: post-left (floating to left) for all the title, meta and body text; post-right (floating to right) only for the image.

    Then, you’ll need delete the image reference in the body text (to avoid the image appears with the text) and use a function (*) to obtain the attachment link or the _wp_attached_file meta key. If _wp_attached_file meta key exists for the post, then the post has an image attached and you can load it in the post-right div.

    (*) Maybe one of this: the_attachment_link() or get_the_attachment_link() or get_post_meta(), is the more adequated to obtain the attached file URI.

    Hope this help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Image positioning within post’ is closed to new replies.