Creating a ModX website part 5: Further masthead development

After the last post (Creating a ModX website part 4: Improving the masthead) you should have two pages which will display different names depending on which page you visit.

Now let us look at how the masthead image can be changed per page as well!

Changing the masthead image

In order to change the masthead image for each page we will need somewhere to store the file path to the image we wish to use. For this purpose we are going to use something that ModX calls Template Variables.

These are variables that can contain a range of data such as text, images etc which can be added to a page depending on the value that has been set. Each page resource can hold it's own value for a Template Variable (or TV).

Creating the Template Variable

First of all make sure the Elements tab has been selected. Under this you should see a Template Variables line with a + to the right of it. Click on the +.

In the Name field type mastheadimg and enter a short description of what this variable is for in the Description field.

Now click on Input Options and change the Input Type to Image. In the Default Image field click on the icon on the right, navigate to the assets/img directory and double - click on the image that is there. Now change to Allow Blank field to No.

On the Template Access tab make sure to put a tick in the Access box to the right of the BaseTemplate. If we don't do this then the BaseTemplate will not have access to the variable.

Click on Save.

Setting the variable on each page

Now we need to tell each page what the value of the variable should be. If we don't then it isn't an issue as we have set the default image that will be used.

On the Resources tab click on the Home page then on the Template Variables tab. You can see that the default image is already present but, by clicking on the icon to the right of the mastheadimg field, you can select another image if desired.

If you do make any changes make sure to click on Save.

Now click on the second page for the other person you added and you will find the same defaults and options as for the Home page.

Telling ModX to use the Template Variable

So far we have set up the ability to use different images in our masthead depending upon the page we are viewing. However, we have not yet told ModX where, or how, to use this template variable.

To do this we need to go back to our Elements tab then find the masthead Chunk that we created earlier.

Inside the code for this chunk you should see the following line

<img class="masthead-avatar mb-5" src="assets/img/avataaars.svg" alt="..." />

Change it to read

<img class="masthead-avatar mb-5" src=[[*mastheadimg]] alt="..." />

What this does is replace the hard - coded value for the image with a reference to the Template Variable. ModX will see this and replace it with whatever the variable value is for the page you are viewing.

Further changes

Under your name you can see that there is some text listing some roles this person possesses (i.e. Graphic Artist - Web Designer - Illustrator).

Whilst I am not going to explain how to alter these here it can be done either by using chunk properties or Template Variables. Feel free to experiment yourself using the information in this and the previous post (Creating a ModX website part 4: Improving the masthead) should you wish to have a go at updating this section.