Help Moving Featured Image

not get the problem yet

What I mean is its currently showing above the body text but I want it to show in place of the page title. In the sample page I’ve given that would be where the word “Children” is.

Try something like this:

if ( has_post_thumbnail() ) {
    the_post_thumbnail();
} else {
    the_title();
}

It worked!! Is there a way to keep the page title from appearing if a featured image is being used on the page? I plan to put the name of each page within the featured image graphic if one is being used.

Also, when I delete the code to take away the original featured image (below title, above content) I get an error.

Thanks so much for your help! I’ve been trying to solve this for about a week!

Chips spot on but I would personally go in a slightly different direction.

Have you considered creating a page template just to handle the type of page where you want to display the featured image rather than the title?

That will give you some flexibility for when you might want to display a title or an image or both and not lock you into an either/or situation. For more on this topic…

Once you’ve got a page template to handle your image/title page type you might try the following:

<div id="content">
                    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
                                              <h1 class="hidden"><?php the_title(); ?></h1>

                                                <?php
                        //get the post thumbnail for this post
                        $image_id = get_post_thumbnail_id();
                        if ($image_id != ""){ ?>

And set your css .hidden to { display: none; }

That will preserve the markup <h1> element for screen readers and compliance purposes while still visually suppressing the element. Just a thought.

pearluvsapple – That sounds like a good idea and I’ll give it a try. So would I copy and paste my current page.php code into a new template then add the code you provided to it? If so, what line would I add this under?

Thanks!

Whew.. Okay the easiest way to do this would be to create a category specifically for your pages. In this example I’ll call it Featured Image and set the category slug to ‘featured’.

Cut and paste your page.php in it’s entirety into a new file called ‘category-featured.php’ (note that the name of the file after the hyphen is the same as the slug, this is important!).

On line 21 of this new file change the h1 class to ‘hidden’ and then at the bottom of your CSS file create the following line of code:

.hidden { display:none }

Save everything and then open a page where you want this change to take effect, in the checkbox to the right move the page into the category ‘Featured Image’ by selecting the checkbox and hit save. The page template for that category should then automatically be applied and the title should be hidden according to the CSS rules.

Make sense?

That makes sense, except I only see the category option on posts not pages. But from your previous suggestion, I’ve created a new file called image_page.php so that my “default” page template won’t change and I can choose this new template for pages that need the featured image.

I copied my page.php into image_page.php and then added the code for the featured image. But when I create a new page its not showing as an option to use under page templates??

Again thank you so much for your help! I’ve made more progress in the last 20 minutes than I have in the last 5 hours! I’m not the greatest but learning quickly. ??

Oops…I forgot to include the page template code at the top.

I’ll give it a go now…

Okay, everything’s coming together–the image is in place of the title. The last thing is preventing the featured image from also appearing above the content. When I delete its code the page won’t load. Something between div id=”content” and div class=”visual-content” needs to be changed or deleted.

<div class="block-holder">
					<?php if ( has_post_thumbnail() ) {
    the_post_thumbnail();
} else {
    the_title();
}?>
					<div id="content">
			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
						<h1 class="title-content"></h1>

						<?php
                        //get the post thumbnail for this post
                        $image_id = get_post_thumbnail_id();
                        if ($image_id != ""){ ?>

                        <?php
                        $image_url = wp_get_attachment_image_src($image_id,'full');
                        $image_url = $image_url[0];
                        ?>

						<div class="visual-content">

Figured it out. I needed to remove the code:

<div class="visual-content">
<img src="<?php bloginfo( 'template_directory' ); ?>/thumb.php?src=<?php if (is_multisite()){echo get_current_site(1)->path; echo str_replace(get_blog_option($blog_id,'fileupload_url'),get_blog_option($blog_id,'upload_path'),$image_url); }else{ echo $image_url;}?>&h=272&w=604&zc=1" alt="article_image_full" width="604" height="272" />
</div><!-- /visual-content end -->

Thanks for all the help!!!

Glad you got it working! And you’re right, I was giving you instructions for posts not pages. My bad!