Help with Header Image

The Picture::create() function wants to know the ID of the image/attachment, so that’s what we need to find out.
By looking at the first row, $header_img contains the src to the header image first. Can you find where that variable comes from?
Or, you could do this:

die(var_dump($graphene_settings));

…and paste the output here.

Hi Stefan,

I found this in theme-functions.php:

<?php
if ( ! function_exists( 'graphene_get_header_image' ) ) :
/**
 * This function retrieves the header image for the theme
*/
function graphene_get_header_image( $post_id = NULL ){
	global $graphene_settings, $post;
	if ( ! isset( $post ) ) return;
	$header_img = '';

	if ( ! $post_id ) $post_id = $post->ID;
	if ( ! $post_id ) $header_img = get_header_image();

	if ( ! $header_img && is_singular() && has_post_thumbnail( $post_id ) ) {
		$image_id = get_post_thumbnail_id( $post_id );
		$image_meta = wp_get_attachment_metadata( $image_id );

		if ( $image_meta && $image_meta['width'] >= HEADER_IMAGE_WIDTH && ! $graphene_settings['featured_img_header'] ) {
			$image = wp_get_attachment_image_src( $image_id, 'post-thumbnail' );
			$header_img = $image[0];
		}
	}

	if ( ! $header_img ) $header_img = get_header_image();

	return apply_filters( 'graphene_header_image', $header_img, $post_id );
}
endif;

I hope that’s what you were looking for!

I just saw this beneath that other code I gave you and now I think maybe this is what you need…

/**
 * Get the attachment ID from the source URL
 *
 * @package Graphene
 * @since 1.9
 */
function graphene_get_attachment_id_from_src( $image_src ) {

	global $wpdb;
	$query = $wpdb->prepare( "SELECT ID FROM {$wpdb->posts} WHERE guid='%s'", $image_src );
	$id = $wpdb->get_var($query);
	return $id;

}

Try this:

<?php
	$header_id = graphene_get_attachment_id_from_src( $header_img );
	if ( ! is_front_page() && $graphene_settings['link_header_img'] ) {
		$header_img_tag = '<a href="' . apply_filters( 'graphene_header_link' , home_url() ) . '" id="header_img_link" title="' . esc_attr__( 'Go back to the front page', 'graphene' ) . '">';
		$header_img_tag .= Picture::create( 'element', $header_id );
		$header_img_tag .= '</a>';

		$header_img = $header_img_tag;
	}
	echo $header_img;
?>

Thanks for that, Stefan. I tried replacing the first code I gave you from header.php with the code you gave me, but it didn’t work. The url of the original image file displays instead of the actual image.

Let me know if maybe I should be putting the code elsewhere…

Also, I made a mistake — the third code I gave you came before the second one in theme-setup.php — sorry!

If you just do this:

<?php
	$header_id = graphene_get_attachment_id_from_src( $header_img );
        die(var_dump($header_id));
?>

What happens?

Hi Stefan,

I’m sorry, I don’t know where to put that!

In case it helps, here’s the whole header code from theme-functions.php (NOT theme-setup.php — I made a mistake above):

<?php
if ( ! function_exists( 'graphene_get_header_image' ) ) :
/**
 * This function retrieves the header image for the theme
*/
function graphene_get_header_image( $post_id = NULL ){
	global $graphene_settings, $post;
	if ( ! isset( $post ) ) return;
	$header_img = '';

	if ( ! $post_id ) $post_id = $post->ID;
	if ( ! $post_id ) $header_img = get_header_image();

	if ( ! $header_img && is_singular() && has_post_thumbnail( $post_id ) ) {
		$image_id = get_post_thumbnail_id( $post_id );
		$image_meta = wp_get_attachment_metadata( $image_id );

		if ( $image_meta && $image_meta['width'] >= HEADER_IMAGE_WIDTH && ! $graphene_settings['featured_img_header'] ) {
			$image = wp_get_attachment_image_src( $image_id, 'post-thumbnail' );
			$header_img = $image[0];
		}
	}

	if ( ! $header_img ) $header_img = get_header_image();

	return apply_filters( 'graphene_header_image', $header_img, $post_id );
}
endif;

/**
 * Get the attachment ID from the source URL
 *
 * @package Graphene
 * @since 1.9
 */
function graphene_get_attachment_id_from_src( $image_src ) {

	global $wpdb;
	$query = $wpdb->prepare( "SELECT ID FROM {$wpdb->posts} WHERE guid='%s'", $image_src );
	$id = $wpdb->get_var($query);
	return $id;

}

/**
 * Get the alt text for the header image
 *
 * @package Graphene
 * @since 1.9
 */
function graphene_get_header_image_alt( $image_src ){

	$image_id = graphene_get_attachment_id_from_src( $image_src );
	if ( ! $image_id ) return;

	$alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
	return $alt;
}

Thanks!

Oh sorry, I’m talking about header.php and this part (around line 64):

<div id="header">
<?php
	$header_img = '<img src="' . $header_img . '" alt="' . $alt . '" width="' . HEADER_IMAGE_WIDTH . '" height="' . HEADER_IMAGE_HEIGHT . '" class="header-img" />';
	if ( ! is_front_page() && $graphene_settings['link_header_img'] ) {
		$header_img_tag = '<a href="' . apply_filters( 'graphene_header_link' , home_url() ) . '" id="header_img_link" title="' . esc_attr__( 'Go back to the front page', 'graphene' ) . '">';
		$header_img_tag .= $header_img;
		$header_img_tag .= '</a>';

		$header_img = $header_img_tag;
	}
	echo $header_img;
?>

Try to replace that with the following:

<div id="header">
<?php
	$header_id = graphene_get_attachment_id_from_src( $header_img );
	if ( ! is_front_page() && $graphene_settings['link_header_img'] ) {
		$header_img_tag = '<a href="' . apply_filters( 'graphene_header_link' , home_url() ) . '" title="' . esc_attr__( 'Go back to the front page', 'graphene' ) . '">';
		$header_img_tag .= Picture::create( 'element', $header_id );
		$header_img_tag .= '</a>';

		$header_img = $header_img_tag;
	}
	echo $header_img;
?>

Hi Stefan,

Thanks! I tried it and the same thing happens — just the text of the image url shows up instead of the linked header image…

I can try that dump code if you want… But tell me where I need to put it because I’m too scared to just stick it anywhere. Lol! Also, how does it work? I just paste it in and click “Update file” and that will do something different?

I’m trying to learn php but the progress is slow — thanks so much for being so patient with me!

Cheers!

I downloaded the Graphene theme and played around with it myself. The graphne_get_attachment_id_from_src() function doesn’t seem to work, it just returns null.
RWP has an internal, similar function but that doesn’t work either.
I don’t really know any good solution to this actually. The problem in this case is rather the way the theme is made than how RWP is working.
However, by hard coding the ID of the selected header image I got it working perfectly. It’s just the hard coding stuff we don’t want… ??

Ok, thanks Stefan. I’ll post a link to this thread over at the Graphene forums, and hopefully someone from over there will be able to help us figure this out. I’ll get back to you as soon as I can…

FYI, here is the thread over at Graphene…

Hi Stefan,

Well, it doesn’t look like I’ll be getting any real support over at Graphene! It would appear that their best suggestion is to get a mobile theme (and of course they sell one!).

So, what is the hardcode method you found that works? Also, why do you say that’s not the best way to do it? Just wondering if your answer will affect my decision to give this method a try…

Thanks!

Hi Julie!
I might have found a solution that we could try.
First, if you go to line 40 in the theme-functions.php file and replace ‘guid’ with ‘post_content’.

$query = $wpdb->prepare( "SELECT ID FROM {$wpdb->posts} WHERE post_content='%s'", $image_src );

Next, go to header.php and paste this from line 53:

<?php
		global $post;
		$post_id = ( $post ) ? $post->ID : false;
        $header_img = graphene_get_header_image( $post_id );
        $header_img = graphene_get_attachment_id_from_src( $header_img );

        /* Check if the page uses SSL and change HTTP to HTTPS if true */
        if ( is_ssl() && stripos( $header_img, 'https' ) === false ) {
            $header_img = str_replace( 'http', 'https', $header_img );
        }
    ?>
    <div id="header">

        <?php
			#$header_img = '<img src="' . $header_img . '" alt="' . $alt . '" width="' . HEADER_IMAGE_WIDTH . '" height="' . HEADER_IMAGE_HEIGHT . '" class="header-img" />';
			#if ( ! is_front_page() && $graphene_settings['link_header_img'] ) {
				$header_img_tag = '<a href="' . apply_filters( 'graphene_header_link' , home_url() ) . '" id="header_img_link" title="' . esc_attr__( 'Go back to the front page', 'graphene' ) . '">';
				$header_img_tag .= Picture::create( 'element', $header_img );
				$header_img_tag .= '</a>';

				$header_img = $header_img_tag;
			#}
			echo $header_img;
		?>

Hi Stefan,

So sorry it took me so long to get back to you! Thanks very much for working so hard on this for me! Unfortunately I tried this out and it didn’t work. I double and triple checked everything to make sure. What happens is that no image is displayed at all — just a blank space in its place. The header image home link is still there, though.

Before we try to move forward fixing this, though, I think I want to try to find a way to serve an entirely different header image to mobile users. Would you mind if I come back to this thread if that doesn’t work out for me?

Thanks again for helping me so much!!