Adding an Image to a Page

Nova 2 Tutorial Developer Resource

The concept behind seamless substitution is pretty simple: Nova will use its system default for icons, pages and Javascript files unless the same file exists in either the current skin or the base override, in which case, Nova will use that instead.

The Problem

You found an awesome image that you want to put on a page in your site.

The Solution

There are actually two different ways to accomplish this. We'll talk about both ways since the first way may not apply on every page.

Using Site Messages

Several of Nova's pages utilize a site message to allow you to quickly and easily change the content without needing to dive into code. In the event you want to add your image to the welcome page or the sim page, you can actually make the changes right from the Messages & Titles section of the admin control panel. Before you dive into that though, you need to first make sure that the image you want to use has been uploaded to either your site (remember where you put it) or an image sharing site. With that done, we can take a few short steps and put the image on the welcome page.

In the messages tab, you can see all of the available messages you can update. Let's update the welcome page message to display our image.

  1. Edit the welcome page message
  2. Use straight HTML to reference the image you want to add
    <img src="[path to your image]">
  3. Click Submit

Because the welcome page message is already called on that page, you should see your image on the welcome page now. If you don't see your image, make sure you've referenced the correct path to the image, whether it's on your server or on an image sharing site.

Using Seamless Substitution

Sometimes though, using a Site Message isn't an option (or you may be more comfortable editing the actual page). In those cases, you can use seamless substitution to accomplish the same thing.

Before you do this though, like before, we need to make sure the image has been uploaded either to your site or an image sharing site. With that done, you can find the main sim page's view file in nova/modules/core/views/_base. (For this example, we're going to ignore the fact that we can make the change through Site Messages for the sim page and do it with seamless substitution instead.)

For our example, the particular view file we're looking for is nova/modules/core/views/_base/main/pages/sim_index.php. All we need to do is copy that file and paste it into application/views/_base_override.

So how exactly do we know which view file to grab? The main part tells us that this is a page in the main section of the site and the view files are prefixed with the controller and the action. In this case, sim/index. While that's not always the case, view files are named well enough that you'll be able to tell which page it's being used for.

Now that you've copied nova/modules/core/views/_base/main/pages/sim_index.php to application/views/_base_override/main/pages, you can edit the version in the _base_override folder to be whatever you want. In our example, we're going to add an image tag on the page: <img src="[path to your image]">. Once you're done making your changes, save the file, and upload it to your server (if necessary). When you reload the sim page, you'll see your image wherever you put it on the page. Remember that view files are mostly HTML with some PHP mixed in, so any HTML you want to use can easily be used in view files.

This same process will work for any view file in Nova!

Why do I need to copy the file to another location? Why not just change the file in the _base folder? The short answer is because putting it in the application folder is the right way to do it (kinda like your Mom telling you "because I said so"). The longer answer is that the _base folder in the Nova core will get replaced with every update, so unless you want to update your views after every update, best to use seamless substitution and put your changes in the application folder.

Log in with your AnodyneID to rate this article or submit the article for review.