Support » Plugin: Responsify WP » Help with Header Image

  • Hi Stefan,

    I’m note sure how to integrate picture::create() into a complicated setup such as the one my theme uses. In header.php, this is what I found:

    <?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;
    		?>

    I have no clue where to start. I checked out the plugin’s Github documentation to see if there are any more examples of how to use picture:create(), but I haven’t really tried anything out because it seems too complicated for my skill level.

    Thanks so much for any advice you can provide!

    https://wordpress.org/plugins/responsify-wp/

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author stefanledin

    (@stefanledin)

    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.

    Thread Starter jdnn

    (@habannah)

    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!

    Thread Starter jdnn

    (@habannah)

    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;
    
    }
    Plugin Author stefanledin

    (@stefanledin)

    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;
    ?>
    Thread Starter jdnn

    (@habannah)

    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!

    Plugin Author stefanledin

    (@stefanledin)

    If you just do this:

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

    What happens?

    Thread Starter jdnn

    (@habannah)

    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!

    Plugin Author stefanledin

    (@stefanledin)

    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;
    ?>
    Thread Starter jdnn

    (@habannah)

    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!

    Plugin Author stefanledin

    (@stefanledin)

    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… 🙂

    Thread Starter jdnn

    (@habannah)

    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…

    Thread Starter jdnn

    (@habannah)

    Thread Starter jdnn

    (@habannah)

    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!

    Plugin Author stefanledin

    (@stefanledin)

    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;
    		?>
    Thread Starter jdnn

    (@habannah)

    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!!

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Help with Header Image’ is closed to new replies.