WordPress.org

Ready to get started?Download WordPress

Forums

Move title and date below starting image? (3 posts)

  1. superfunfun
    Member
    Posted 6 years ago #

    Hi,

    I'm trying to have my blog start with an image and then have the title sit under it.

    How do I make this work since the images are included in the post I write in the admin panel?

    This is the code I have from another theme....

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

    <?php the_date('','<h3 class="dadate">','</h3>'); ?>

    <div class="post" id="post-<?php the_ID(); ?>">
    <h3 class="storytitle">" rel="bookmark"><?php the_title(); ?></h3>

    <div class="storycontent">
    <?php the_content(__('(more...)')); ?>
    </div>
    </div>

    <?php endwhile; else: ?>
    <?php endif; ?>

    </div>

    Any tips would be helpful.

    Thanks so much.

    Mark

  2. searchen
    Member
    Posted 6 years ago #

    Mark...

    I want to do the same! Did you have any success?

    The only way seems to be to use the Custom Field Images plugin, which allows you to place an image anywhere outside the Loop.

    Unfortunately, this adds a bunch of steps, and I'd really like to streamline so I don't have to add image locations into the custom fields.

    Let me know!

  3. adamrice
    Member
    Posted 6 years ago #

    This could be done in CSS, probably with some trial and error, if you have a fixed image size.

    You may need to delete the <div class="storycontent"> (and its closing tag) for this to work--not sure.

    In your stylesheet, find the rule for .post and add the line "position: relative;"; if it doesn't exist, then create something like this:

    .post {
    position: relative;
    }

    This actually may not be necessary.

    Next, add the following to your stylesheet (definitely necessary):

    .post h3 {
    position: relative:
    top: 345px; /* this actually needs to be the known height of the image */
    }
    .post img:first-child { /*this should match only the first img in a post */
    position: relative:
    top: -345px; /* this actually needs to be the known height of the image */
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.