WebJaguar Help Center

What Are You Looking For?

How do I change out the banner images on my homepage?

Changing out the homepage banner images is a straightforward thing to do. To do this you need to have two things: the new image asset (in .png or .jpg form) and access to your site's FTP server.

If you have never accessed your site's FTP server or do not know how to do so continue reading. If you already have access to your FTP server and are familiar with navigating around it you can skip below to the "Finding Out Where the Banner Image is Located on the FTP Server" heading.

Downloading FileZilla

There are FTP servers and there are FTP clients. To change banner images we will be using an FTP client program (FileZilla, a free, open-source FTP client) which can be downloaded here: https://filezilla-project.org/ . Make sure to click the client download and not the server download. This should detect your computer architecture and prompt you to download the correct version for your specific computer.

Connecting to Your Site's FTP Server

Once you have downloaded the FileZilla client program and opened it up you should see a screen that looks like this:

Click the button indicated by the red arrow in the top left. This will open up the Site Manager for you and should like this:

Click the "New Site" button indicated in the screenshot above. This will create a new "site" that the FTP client will remember for future use. Give it whatever name you would like and then on the right hand side you will enter the credentials needed to access your FTP server.

Either you or someone on your team should have been given these credentials by their WebJaguar administrator. If you do not know your FTP server credentials send an email to support@webjaguar.com and our support team will retrieve them and pass them along to you.

You will need three parts of the credentials: the host (generally the IP address of your site's FTP server), the username, and the password. Enter these in the corresponding fields.

Once you have your credentials entered, click connect on the bottom of the window and this should connect you to the FTP server and clear the Site Manager window.

Now, on the right hand side of your screen should be the file structure of the FTP server, and on the left hand side is the file structure of your local machine.

Finding Out Where the Banner Image is Located on the FTP Server

Now that you have successfully connected to your site's FTP server, you need to find out where exactly the existing banner image asset is located in the FTP server so that you can effectively replace it. There are best-practices for organizing images but every site is different and could have a unique location that the banner images are stored on the FTP server so it is best to use the below method to locate where exactly the image is being stored.

There are multiple ways of doing this, in this example I will show you how to find the location using chrome developer tools. On any page in Google Chrome (and almost all modern web browsers) if you right click you will have an option to access the "Developer Tools" for the browser. On Google Chrome if you right click an image on a page you will see an option to "Inspect" the image.

This will bring up the HTML structure of the web page - all of the code used to construct the page you are seeing - either on the bottom of your browser or on the right hand side.

If you look closely though, the path of the image is in the HTML code:

In this case the image is located at "/assets/img/banner/B0.jpg". This is the path we will navigate to on the FTP server to replace the image.

Replacing the Image on the FTP Server

Go back to your FileZilla client program and navigate to the path you just found out on the right hand side of the program (the FTP server side). In the above case it would be the assets folder -> img folder -> banner folder -> B0.jpg image.

On the left hand side (your local file side) navigate to wherever you have the new image located. This might be your desktop, your downloads folder, or any number of places.

At this point there are two ways to actually replace the old image with the new one: rename the new image on your local machine with the name of the old image or rewrite the HTML code in the specific section of your website to "expect" an image with a name other than B0.jpg (or whatever the image name is of the one you are trying to replace). It is easiest to just change the new image to have the same name as the old one and then, on upload, it effectively just overrides and replaces the old image.

From the left side of FileZilla, right click on your image and Rename your new image to have the same exact name as the image that exists on the FTP site. If .JPG is capitalized your local image must be as well, if it is lower-case your local image must be as well. Once it has the same exact name as the old image on the site right click the image asset and click "Upload".

Was this article helpful ?

Yes No