Topic: Choose a Header Image for your Basket
Topic type:
Some themes can accommodate an image at the top of each page, such as an image with a logo. Here's how to put your own image in.
Originally written by Walter McGinnis, Kete Project Lead for Katipo Communications, Ltd.
Part of the How to Use Themes Guide
If your theme comes with a "header image" that sits in the background behind your site's name and the search form, you may replace it with your own header image. You can do this on a basket by basket basis. As long as it is the same width and height as that used by the theme.
Important Note: It is often preferable (in the case where all baskets should use the same image) to replace a theme's background header directly as an included file in the theme. See discussion for more details.
It's your responsibility to create or pick an appropriate image, upload it to somewhere on the web (probably your own site), and note its URL. Of course, you also need to have the legal right to use the image.
If you are a basket's administrator, after you have found or created an image and noted its URL (if it's on your site, it can be a relative URL), to set it as a header image for a basket, do the following:
- Go to a basket and click "basket preferences"
- Click the "Appearance" tab
- Put the URL for the image in the "URL for background image at the top of each page:" field
- Click the "Save" button to submit your choice
Note that setting a header image for the site basket will NOT set the default header image for all baskets that don't specifically choose one. See discussion for more information.
Discuss This Topic
There are 7 comments in this discussion.
Read and join this discussion
anonymous
Hi there,
I downloaded a theme and then uploaded it straight into my Kete. It worked and the theme showed in the list where I can choose it now.
I downloaded it again and replaced their image with mine. It looks fine, but when I try to upload it, it just doesn't show... why could this be happening? Yes, it is zipped-up.
I uploaded the image I wanted to use by itself onto my site. I gave the URL to use it as header image via the other option that can change the appareance. The image shows now, but is only as small as it is shown on the site page, even though the original file was right in width and height to fit exactly into the header-space.
How can I get the image to be displayed in the right size? I figured it must be automatically reduced to fit into the basket, so I tried to upload it elsewhere (imageshack and facebook), but the resulting URL didn't make the image show at all. Another random image on some other website couldn't show either, so apparently the image has to be in the kete itself in order to be used?
any help would be much appreciated.
thanks
merle
Tags: Themes, header image
> I downloaded a theme and then uploaded it straight into my Kete. It worked and
> the theme showed in the list where I can choose it now.
>
> I downloaded it again and replaced their image with mine. It looks fine, but
> when I try to upload it, it just doesn't show... why could this be happening?
> Yes, it is zipped-up.
Did the new theme you created have a different name for the zip file and the folder it contained than the old them you based it on? If it didn't it, it might confuse the system. Also, did it have a images/sample.jpg included? If it doesn't, it won't be listed. Basically, double check the steps here.
> I uploaded the image I wanted to use by itself onto my site. I gave the URL to
> use it as header image via the other option that can change the appareance. The
> image shows now, but is only as small as it is shown on the site page, even
> though the original file was right in width and height to fit exactly into the
> header-space.
I would double check the image's DPI (dots per inch) is 72, as is the web standard.
> How can I get the image to be displayed in the right size? I figured it must be
> automatically reduced to fit into the basket, so I tried to upload it elsewher
> (imageshack and facebook), but the resulting URL didn't make the image show at
> all.
Those services may require authentication to show the image and therefore the image fails to show up.
Can you paste in the URL of the uploaded image (not imageshack or facebook, but what you did before that) please? I suspect you may have used the image's description page (looks like your_site/site/images/show/1-the-title) rather than the image's file page (should have a .jpg in it's name), but I can't be sure until I see it.
> Another random image on some other website couldn't show either, so
> apparently the image has to be in the kete itself in order to be used?
No, any web accessible image file that can be retrieved should work generally.
Hope this all helps. Please give the above pointers a try and let us know what happens. Also coming back with the problematic URL for the header image would be good, too.
Tags: Themes, header image
Hello again,
It took me a while to find the time again, but I hope you can help me out some more!
I have talked to APNK, but their person who can answer technical questions is still on leave for a few weeks....
I have tried an available image from the web again, and it worked!
I tried my own image again, that I had uploaded to the kete-website, and I found that even though its original dimensions were 900 x 157 pixels, the kete-page automatically resized it to 200 x 35 pixels - and this is why it won't fit my header. Can I circumvent this somehow?
I checked that the folder inside my theme had the same name as the zip-file. Yes, there was an image and a thumbnail. The thumbnail was still of the look of the old theme, since I am not sure how to create a new thumbnail of the look of the theme??? is that important or should it be okay, no matter which image the thumbnail shows? Uploading this theme did not work, again.
I read on Kete that there is no feature yet that allows one to take previously uploaded themes off the list again.I had uploaded one with_header_image - the original. Now that I changed that theme, maybe the name HAS to be changed because a theme of that name is already on the list? I tried to change the name of the folder and subfolder, but then realized that there is another folder called MACOSX, which also contains the name of the folder including a file-type which is a ,-with-header-image-type file.... does that name have to be changed, too - I mean, the name of the file-type? If I chnage the file name, the file type changes to 'file' (in german 'datei' on my pc) instead of with-header-image-file..., but then I cannot change the name of the file-folder, too, because it won't allow more than one file of the same name in this folder.... the file name starts with comma and underscore, but when I try to retain this, I can still not change the name.
Sorry, this must sound utterly confusing. Maybe, if it makes any sense to you, you can advise me what and how I need to change the file names in order to upload the theme....
and maybe you know how I can retain the image-size when uploading it onto our kete? Oh yes, I just see that I can click on 'large' underneath the image, and it is scaled at 400 x 70 pixels (still to small) instead., but there is no 'extra large' button ...
Tags: Themes, header image
> I tried my own image again, that I had uploaded to the kete-website, and I found
> that even though its original dimensions were 900 x 157 pixels, the kete-page
> automatically resized it to 200 x 35 pixels - and this is why it won't fit my
> header. Can I circumvent this somehow?
Kete, by default when an image is added to the site, creates several versions of the image (small square, small, medium, large usually). However it also keeps the original uploaded image, too.
I'll use an image from Kete Horowhenua to show you what I mean. The image's "show page" or "detail page" (i.e. the page where all the details abou the image are show) is here:
http://horowhenua.kete.net.nz/site/images/show/18634-oxford-st-16-8-2011
Now, if you look on that page below where that image is displayed, you can see a set of five links divided by "|". These are the resized image sizes plus the original (the original is all the way to the right).
You want the original file. In this case that would be the following:
http://horowhenua.kete.net.nz/image_files/0000/0009/6887/Oxford_St._next_day.JPG
Now, the large version of the image is available here:
http://horowhenua.kete.net.nz/image_files/0000/0009/6887/Oxford_St._next_day_large.JPG
The only difference is that the filename has "_large" added before the ".JPG" extension.
So, if all you have is the large filename's URL, you can derive the original's URL by taking off the "_large" in the URL. Make sense?
Please let me know how that works for you.
In regards to the theme clean up. Please hold off for the moment. You'll need the tech person at APNK to clean out the old themes and I think it is just confusing the matter right now.
Tags: Themes, header image
Hi Walter,
oh great :) it hadn't occured to me to look at the topic again to see if you would reply. Once I thought of it - I couldn't remember under which topic I had asked you my question and had to look around a fair bit, until I had the idea to use my name as a keyword.
Would be convenient, actually, if one could get an automatic email copy of any message that is posted in response to a discussion-topic one has started.
thanks, the tip with the original image works. thing was, the original image wasn't actually selectable, but only downloadable and i didn't have the idea myself that i could just doctor a bit of the file address. so wow, now that works, cool!
i still have not been able to insert my own image into a theme or even just change the colour scheme of one (i.e. change the html colour code on the css-file) wondering where i am going wrong....
thanks so far!
merle
Tags: Themes, header image
> Would be convenient, actually, if one could get an automatic email copy of any
> message that is posted in response to a discussion-topic one has started.
>
We lean toward RSS for notifications (people sometimes reply to email notifications mistakenly and get confused when nothing happens, etc.), though I've noted your preference.
If you want to subscribe to responses to this topic via RSS, try this feed:
For more information on RSS, check out this topic:
http://old.kete.net.nz/help/topics/show/111-what-is-rss-and-how-do-i-use-it-with-kete
> thanks, the tip with the original image works. thing was, the original image
> wasn't actually selectable, but only downloadable and i didn't have the idea
> myself that i could just doctor a bit of the file address. so wow, now that
> works, cool!
Good to hear you have something working.
> i still have not been able to insert my own image into a theme or even just
> change the colour scheme of one (i.e. change the html colour code on the
> css-file) wondering where i am going wrong....
This is hard to diagnos without seeing the zip file/theme files in question as well as what is happening on your server. It could be anything from file permissions to the background image's URL as specified in the CSS being slightly off (URLs are case sensitive, for example, or having a "/" in the wrong place).
Unfortunately very small details can make a big difference, but that is the nature of web sites generally I'm afraid.
Feel free to walk through the instruction topics for creating a theme and asking specific questions there. I'm sorry I can't be of more help.
Tags: Themes, header image
Walter McGinnis
said Setting header background image in theme itself
Important Note: This step must be done before you upload the theme to your site. In other words, download your base theme to your own computer, make your changes (including these if appropriate), zip it up as you would a new theme, and then go through the normal process of adding it to your site.
One trick, when you have background header image and you want all baskets to inherit the theme and the background image, is to include the image in the theme itself and the CSS rules of your theme.
Basically if you look at the with_header_image as an example, you can simply put in your desired background image with the name header-bg.jpg (the filename specified in the corresponding CSS rule in stylesheets/header.css) in the theme's images folder and rezip up the theme folder before uploading it to your site.
Of course the image file needs to conform to expected dimensions of the theme.
You can still do basket specific branding using the inherited theme by using a different background header image in the appearance for that basket.
Tags: Themes, header image