How do I put a picture in the banner area

That is a tutorial I need to write up for the theme…however, so you do not have to keep waiting, here is how you do it:

First thing, crop and size your image to the size you want, keeping in mind that the banner curved graphic will cover part of the bottom of your image. For the Front page, it’ll take up about 200px, so when you size your image, account for that.

Upload it to your Media Library and then click on the “Edit” link after it uploads. In the upper right area, should be a field titled “File URL”. Highlight that URL in the field, and copy it.

Go to Appearance >> Widgets >> and then drag a text widget into the “Banner” sidebar box. Inside the text area, type this:

<img src="your file URL here" alt="a short description" />

**Replace your file url here, with your copied File URL.

To manage what pages to show this widget (banner image) on, follow this tutorial

To hide the widget title that you would have on your widget, use a plugin called “Remove Widget Titles”. This is done by placing an ! before the title.

I had this issue as well. I don’t understand why you don’t have that as an option in your theme. I like the stock photo that you use in the theme demo. Where can I find that photo?

Hi @cindykoen….there’s also another method that can load an image without a text widget; there are some image or banner widgets (plugins) that will do it as well, although I’ve found they not as easy to allow flexible changes.

As for the image used in the demo, you can find that info in the theme’s license.txt file. But the free image used is This Photo which I added the orange hue with an image program.

Hi, I’m having issues with the banner picture on my template as well. Could you please advise me on the best format in height and width for the pictures to be displayed properly? As the original pictures are too tall for my liking (54.86 cm x 36.58 cm). I have tried cropping them to 38.61 cm x 15.85 cm but they do not appear on the live site. Could you also please confirm whether or not it is possible to add multiple pictures that will change periodically, or change when the page is refreshed, and if so, how to do that in advance.

With my thanks,

Pierre

@cfcenrgy….this might help on sizing:
https://www.shapedpixels.com/setup-longevity/how-to-add-a-banner-image-to-your-page

As for dimension type, for any online usage, it’s best to keep to px (pixels) and not cm.

Regarding changing pictures, you are not stuck using a static image in the banner area, you can also use slider plugins that give you slideshows and rotating images. There are probably image plugins that will do nothing but random rotation.

@ShapedPixels, thank you very much for your prompt reply. I have successfully managed to upload the shots I wanted to. I am still new to all this, so where would I be able to download the slider plugins and where do I install them?

With my thanks,

Pierre

@pierre….No worries about being new to all of this, many are.

There are many slider and slideshow plugins available (both free and paid). I would recommend checking out the plugins directory here at www.remarpro.com, but also do a Google search for “WordPress slider plugins” or “WordPress rotating image plugins”.

@ShapedPixels thank you again for all your help. Just one last question. I’ve been able to find a few sliders and download them. But I haven’t been able to successfully apply it to the banner. Could you possibly recommend a slider that is compatible with your theme and possibly provide additional information as to recommended size, etc…? Again, thank you for all your invaluable help.

Pierre

@cfcenergy Most should be compatible, if not all. However, for sliders, they either have shortcode you can use or they have their own widget. If you experience any issues, you may want to contact their support. However, I’m curious which sliders you tried and what was the issues?

@ShapedPixels I have tried EasyRotator, Huge-IT Slider, GIGA Slider & Smart Slider 2. I have been able to install all of these (FYI, feature-wise the best seemed to be Huge-IT Slider) however, when I entered the shortcode into the banner widget (as none of these have their own widget), nothing appeared on the live site. I got the same result as when I entered a picture of the wrong dimensions. I’m guessing that I’m either not inserting the shortcode correctly, which would be odd as I have managed to display the static image correctly as per your instructions, otherwise, I’m guessing the dimensions aren’t right?

However, with regard to dimensions, I’ve tried to apply both 2560×720 pixels and the plugin’s default settings in case what I entered was incorrect.

Again, thank you for your help.

Pierre

@cfcenergy…I probably wouldn’t use EasyRotator, and the only one I did setup on my test was the Smart Slider 2 which has some learning curve because of all of it’s settings, but I got a slider in the front page. Worked pretty good actually. I would say take some time, go through their documenation, and try it once again.

Unfortunately, for any support relating to anything outside the theme itself, will have to be directed to the plugin’s developers if you run into any problems or need help. Try Smart Slider 2 again, unless you are using that now. Make sure your slides are all the same dimensions and match the slider dimension you set as well.

@ShapedPixels thank you again for looking into this and for all your help. I’ve tried to set it up again, but I haven’t been able to successfully apply it to the live site. I was able to get a functioning live preview within Smart Slider 2 (at 2560px x 720px), but once I copied the shortcode into the text box within the banner widget, it didn’t appear on the live site. Is there anyway you could talk me through this? I am aware that I should be asking this to Smart Slider, but seeing that you’ve been able to do this successfully, I was hoping that you might be able to help me once again.

With my thanks,

Pierre

With a shortcode, I used this in my text widget when I setup my slideshow, but your slider number might be different:

[smartslider2 slider=”1″]

There is also a widget that is part of that plugin, so you can use that instead of the shortcode in a text widget.

If you still run into problems, it’s best to submit a support request to the plugin’s developer.

@ShapedPixels, I have finally managed to get it to appear properly. I had to go through the widget as the shortcode didn’t work. Thank you ever so much for all your help and kind advice.

Best Regards,

Pierre

@ShapedPixels,

How do I set a different banner for each page? In a nutshell what I need is a banner for homepage and another for each of the pages.

Thanks
I.