Vertically align floated image to top of content

  • I’ve set up a WordPress site as a CMS and have several static Pages, like About, Contact, History, Schedule, etc.

    I’m floating an image to the left of the <h1> tag, and can’t figure out how to get the image aligned to the top of the <h1> content. If I edit the page in Write > Manage > Page, the image will appear below the top of the <h1>.

    How can I vertically align the image to the top of the <h1>? I will have a different image floated to the left of each of the static pages. Since the <h1> is generated in the page.php code, does that mean I need to add some conditional code for selecting what image goes on what static Page?

    Is there some way to allow the image to be modified/added within Write > Manage > Page?

    I’ve seen other WordPress sites float an image next to the <h1>, but I don’t know how they did it. Here’s the code I’m trying to create within WordPress:

    `<div id=”content”>
    <img src=”https://www.mysite.com/images/group.jpg&#8221; alt=”The Family Group” width=”200″ height=”400″ class=”floatleft” />
    <h1>About</h1>’

Viewing 1 replies (of 1 total)
  • Thread Starter Deborah Edwards-Onoro

    (@redcrew)

    Found the solution, thanks to a fellow WordPress user on another forum. Using the custom field plugin, I can create a custom field for each page named ‘leftpic” and assign the value as the image file name.

    In the page.php file, before the <h1> code is generated, I can add the call to the <img> code that uses the plugin to add the specific image for each page. The custom field plugin can be found at:
    https://coffee2code.com/wp-plugins/get-custom-field-values/

Viewing 1 replies (of 1 total)
  • The topic ‘Vertically align floated image to top of content’ is closed to new replies.