Post Format How To: Tall image on left, text to right

  • gdmnw

    (@gdmnw)


    9 years, 11 months ago

    Hi,

    I’m setting up a new site which will revolve around print posters for movies. Each post will feature a poster, sometimes from a new/current movie, other times from an old movie. The posters are nearly always A4 portrait orientation images, so I’d like to lay out the site around that format.

    I’m looking for a theme suggestion or ‘how to’ answer.

    The Objective:

    http://gdmnw.com/content/wp-content/uploads/2014/05/PosterLayout.jpg

    As per the image I need help laying out the three main elements of the posts portion of the site.

    A – The header
    Fixed and always visible at the top of the site.

    B – The poster
    The featured image from the post fills the screen vertically, occupying a fixed proportion of the site width. I think about 40-45%

    C – Post Content
    The post title and content then appear to the right. This area would work as per a normal wordpress site and would scroll normally while elements A and B remain fixed.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Pioneer Web Design

    (@swansonphotos)

    9 years, 11 months ago

    A: Take at look at how to create a custom header for use as desired within posts or pages:

    get_header

    B: Set the CSS of the images to a width of 45% (I use that width, then a margin left and right of 1% – this is CSS work) The key is to use percent here on the div the image is in and then let the image be resized based on browser width.

    C: The image simply needs to be set to the left. Set that when adding the image. When you add the image, do it after adding the text, click on the left of the first letter of the first paragraph, then make sure to float left that image making sure the CSS edits required to fill it half way across (or so) are also made.

    Thread Starter gdmnw

    (@gdmnw)

    9 years, 11 months ago

    You’re suggesting I edit the single-post template? Essentially creating two main divs. One for the image, floated left, the other for the rest of the post content?

    I don’t feel too confident doing that. My current theme includes featured images and I’d like to be able set my site templates up so that users can write the content for the post, including any images, upload an image for use as a featured image and then publish, knowing that the theme will do the rest.

    Or have I misunderstood what will be achieved by what you are proposing?

    G

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Post Format How To: Tall image on left, text to right’ is closed to new replies.