Logo in Heading are of Banner

  • 1
  • Question
  • Updated 6 years ago
  • Answered
I am trying to put my logo in the heading area of the banner. I have put Page heading text goes here into the page heading area of page properties but when I try to browse or upload my jpg image the file is in shadow i.e. not able to be selected. What am I doing wrong?
Photo of liz

liz

  • 9 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Liz,

You can do this by adding some HTML for your logo image into the header field:

<img style="margin: 4px; padding: 0px;" src="resources/{optional folder}/image-name.jpg" alt="your alt text here">

This can also be added to by adding your header text without problems:

<img style="margin: 4px; padding: 0px;" src="resources/{optional folder}/image-name.jpg" alt="your alt text here"> Your heading.
Photo of liz

liz

  • 9 Posts
  • 0 Reply Likes
Sorry false alarm. The file format on the png was slightly different to the jpg. I have it in the header as a transparent image now but it is huge. How can I reduce the size of the image - don't seem to be able to drag and resize
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
See below:
Photo of liz

liz

  • 9 Posts
  • 0 Reply Likes
I tried both options which leave me with ? in the heading area. When I click on the ? it takes me to a screen where I can upload or browse for image. When I go to pick up image it is not highlighted (it is in shadow) so I can't select it
Photo of liz

liz

  • 9 Posts
  • 0 Reply Likes
do you mean you would convert the jpg file into one with a transparent background?
Photo of liz

liz

  • 9 Posts
  • 0 Reply Likes
Sorry false alarm. The file format on the png was slightly different to the jpg. I have it in the header as a transparent image now but it is huge. How can I reduce the size of the image - don't seem to be able to drag and resize
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes and yes.

png's aren't automatically created with transparent backgrounds from another file type., they have to be edited for such. (it's dependent on a few other things as well)
Photo of liz

liz

  • 9 Posts
  • 0 Reply Likes
I have a transparent background I just need to know how to reduce the size of the image when I import it. Currently it is taking up half the page
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
There are two ways that come to mind

  1. Reduce the image size to the final size you wish to display. Here I suggest that you create a duplicate of the image but give it a different name. This allows you to recall the original from the file manager if you need to in future. The system I use is simply "logo-filename.png"


  2. The second way is to define the image size when displayed which means adding an extra statement to your code line: using width=



<img style="margin: 4px; padding: 0px; width= 50px;" src="resources/{optional folder}/image-name.png" alt="your alt text here">

You can use height as well but if you only use one then your image will keep its proportions as the original. if you include both the width and the height you can easily screw skew the image.