add thumbnail to header in 2012
-
Hi – looked everywhere to try to find an answer – I’m sure its here but I’m suffering from overdose of CSS!
I have 2012 theme – I want to add a thumbnail/ small picture to the header right justified next to the title. This is a smal (50px tall) picture of me which I would see as right aligned with the WP page and moving with the margin when the page is resized. I’ve read all sorts of stuff, created a child theme but nothing works. Any ideas?
Nick
-
Link to your site?
First you need to fix your theme so it’s a valid child theme – your style.css file should only contain changes to the CSS which go after this:
/* Theme Name: Twentytwelve Child Description: Child theme for the twentytwelve theme Author: Your name here Template: twentytwelve */ @import url("../twentytwelve/style.css");Then you’ll also need to put a copy of the header.php file in the child theme – and make changes to that file to add the thumbnail.
Hi – cant get the child theme to work – says it can’t find the parent. I’ll look at that this afternoon, hopefully I’ll find a solution there are a lot of similar threads after all. If I do though, any idea how I get this thumbnail happening? 🙂
Thanks
Nickchild theme working – it didnt like numbers or spaces 🙂
any help on thumbnail would be appreciated
Okay, good job on fixing that. The easiest way to add the image will be as a background in the CSS – so add this to the child theme style.css file:
@media screen and (min-width: 600px) { .site-header h1 { background: url('http://image file path goes here') no-repeat right top;} }Upload the image first and then copy the file path to the url space above.
See how that works…
If you want to use thumbnails you need to know the wordpress loop.
On one of my website I have a full page made out of a 3 by 3 grid of post. Each post show the thumbnail I have for the post, the excerpt and the title. My full code for that function is bellow.
I used the multiple blogpost thumbnails to set a second smaller image on each blogpost to be displayed along with the excerpt.
The code showing my thumbnails is just that:
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>Then just style everything with css
FULL CODE:
<div id="gallery"> <?php $args = array( 'orderby' => 'post_date', 'numberposts' => 9 ); $lastposts = get_posts( $args ); foreach($lastposts as $post) : setup_postdata($post); ?> <div class="container"> <div class="beschreibung" style=" font-size:13px;"><strong><?php the_excerpt(); ?></strong> <div class="sociable"> <?php if( function_exists( do_sociable() ) ){ do_sociable(); } ?> </div> <a href="<?php the_permalink(); ?>" style="color:#11b1f4"> Read More...</a> </div> <a class="image"> <img height="200" width="300"<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?> <p> <?php the_title(); ?></p> </a> </div> <?php endforeach; ?> <div id="clearboth"> </div> </div><!--end of gallery-->thanks guys – I guess I confused things talking about thumbnail. Its not thumbnails as in file thumbnails – just one picture of me thats in the header but thumbnail size (ie small).
I added
@media screen and (min-width: 600px) {
.site-header h1 {
background: url(‘http://image file path goes here’) no-repeat right top;}
}after the import statement in style.css but can’t see any change. Surely even if the URL was wrong I would see a broken link?
oh I did put a file in there – whole style.css file reads
/*
Theme Name: twentytwelvechild
Description: Child theme for the twentytwelve theme
Author: Nick Evans
Template: twentytwelve
*/
@import url(“../twentytwelve/style.css”);
@media screen and (min-width: 600px) {
.site-header h1 {
background: url('http://ftp.managingdelivery.com/nickevans.jpg') no-repeat right top;}
}(Not your mistake – he obviously did not read the thread – I considered deleting the post earlier…)
Looks like the file path is funky – this is what shows up in the child theme style.css file:
('http://ftp.managingdelivery.com/nickevans.jpg')On the media library page, find that image and then on the right side – there’s the file path box – click in there and copy that URL to the CSS.
Weird – that’s not what i put there – the forums parser parsed it – LOL – but you should not have the ftp in there. I’ll try this again:
url(“'http://ftp.managingdelivery.com/nickevans.jpg'”) no-repeat scroll right top transparent
url("'http://ftp.managingdelivery.com/nickevans.jpg'") no-repeat scroll right top transparentah – I copied the path from the media library before I saw the second post 🙂
Maybe we’re getting in each others way – I’ll stop doing things – if you want me to, say so
BTW I put the ftp in there – I ftped the file manually to the server and that where the ftp client told me it was. Didnt event know there *was* a media library! 🙁
but its up there now. FYI all the files dotted around the server called nickevans.jpg are the same – I thought WP needed an absolue path name
Yes, you should use an absolute file path. And you should be using the media uploader – not FTP – it’s not visible for me – so that’s likely just because you’re on the site.
Try uploading it using the media uploader – and then inserting it per the above.
And BTW, it’s fine for you to try things :)! (Once in a while, someone will drive one of us helpers crazy, doing random stuff while we are trying to look at something – but you’re fine so far – LOL)
The topic ‘add thumbnail to header in 2012’ is closed to new replies.