Community Forums › Forums › Archived Forums › Design Tips and Tricks › adding the header as an img tag in the html rather than a css background
Tagged: header img responsive
- This topic has 2 replies, 2 voices, and was last updated 9 years, 10 months ago by Mana193.
-
AuthorPosts
-
June 18, 2014 at 10:56 am #110374Mana193Member
When uploading an image in appearance>header using the genesis framework, it uploads the image as a css background.
When you upload a header using a theme like wp twentyfourteen, it uploads the header image in the html code with an img tag.
I would much prefer my header to upload the same way as the twentyfourteen theme as I will have a multisite, and would prefer users to be able to upload a header then for that header image to respond to all screen sizes. It also has other benefits that will work great for the type of themes I am creating.
So far I have kind of managed to achieve this - but its done by adding a header image as a widget.
Basically I created a new widget area and hooked it in genesis_header something like this:genesis_register_sidebar( array( 'id' => 'header-widget', 'name' => __( 'Header', 'reccoa' ), 'description' => __( 'Use this widget area to upload your header image(s) / header content', 'reccoa' ), ) ); add_action( 'genesis_header', 'andym_header' ); function andym_header() { genesis_widget_area( 'header-widget', array( 'before' => '<div class="header-widget widget-area">', 'after' => '</div>', ) ); }
I then added a plugin called 'image widget' where users can simply drag the image widget in the header widget area, upload an image and works perfectly with the header responding.
The header image now works the same way as if you added an image to the primary or secondary widget area (image in the html) and this works perfectly but the only problem is it has just made it a little complicated as users have to go to appearance>widgets to upload their headers.
So I would prefer it if users can go to appearance>header, upload a header, crop it, then for it to go in the html code as an img tag rather than a css background.
Hope someone can help me with this
June 18, 2014 at 10:50 pm #110496nciskeMemberTry adding this to functions.php
remove_action( 'wp_head', 'genesis_custom_header_style' ); add_action( 'genesis_header', 'andym_header' ); function andym_header() { echo '<img src="'.get_header_image().'">'; }
Tweak the image tag as needed for your theme.
Nick Ciske | https://luminfire.com/ | @nciske
Did I help you? Say thanks: http://bit.ly/1lahwy0June 20, 2014 at 11:47 am #110800Mana193MemberThanks Nick this worked great, much appreciated.
I would also like to link the header to the user homepage.
Does anyone know the best way to do this. I thought I could do this with:
echo '<a href="<?php bloginfo('url'); ?>"> <img src="'.get_header_image().'"> </a>'; }
but got a syntax error, unexpected T_STRING, expecting ',' or ';'
Managed to get it to work with this though:
echo ' <a href="'.get_home_url().'"> <img src="'.get_header_image().'" /> </a>';
I don't really know php well (only css) so I don't know if the above is ok to use.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.