Adapt Learning Community: Image use with the Authoring Tool

Working inside the Authoring Tool, I've managed to change the page header backgrounds on individual pages in the Vanilla theme by using Custom CSS/LESS code in course's Project settings, however, I'm unsure of the best way to go about adding the page header images into the course.

If images, uploaded into the Asset Manager, aren't directly used in a course (e.g. as a component's asset) then they don't get processed by the Authoring Tool on previewing or downloading the course. Manually adding the images to the course/asset folder in the downloaded archive seems to get around this, but is there a better way?

Stephen

P.S. If anyone's interested, I'm happy to document my method for changing page background colours and header images within the Authoring Tool.

Hi Stephen

Good question! I was thinking about this same problem.... maybe building a seperate page or set of components and setting them to hidden?

I would be really keen to check out the steps and method for changing the bg colours and header images :)

Many thanks in advance

Nick

Show parent | Reply

Cunning thinking Nick!

I just added a new page and then added an image as part of a Graphic Component. When I previewed the course I copied the absolute URL of the image before returning to the Authoring Tool and setting the new page's availability to false (i.e., hiding the page).

Finally I added the relative path to the graphic to my custom CSS in the Project's settings, so the background image url looked like: '../../course/en/assets/xxx.jpg'. When I saved and previewed the course, the page containing the graphic was hidden, but the image was successfully rendered in another page's header.

So I think we can say your idea works.

Show parent | Reply

Win!

Glad it worked :)

Show parent | Reply

My method for changing the page header background is as follows:

In the Project settings of a course add the following to the Custom CSS/LESS code:

.page1-header-image {
.page-header {
background-image: url('../../course/en/assets/xxx.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
}

where xxx.jpg is the filename of your header image (you may need to change the filename later if you decide to store your image on a course page--see later). Edit the page on which you want the header image to appear and add your new class name, i.e., in the above example it'spage1-header-image (without the leading period) to the Classes text box in the page's Settings. You can also change the page header colour by adding:

background-color: @red;

or whatever colour you have defined in your colors.less file (see Chuck's wonderful How to test background colors using "_classes" thread for more).

To change the font colour (in cases where the default font colour is unreadable against your new background) add:

.page-header-content {
color: @inverted-background-color;
}

between the last two curly brackets of the custom CSS code above. Again, you can use any Less colour variable defined in your colors.less file or any of these built-in theme variables.

Note that at this point your page background image will not be rendered when you preview the course (although any colour changes will be). The final step is to make sure your new page background image is available to your course. You can either:

manually add the image file to the course/assets folder in the course zip archive once you have downloaded the course, or
use Nick's cunning idea and add your images to an unavailable/hidden page (as detailed in my post above).

If you have multiple pages on which to add header background images you'll need to replicate the code with a unique class name.

What other simple customisations are people using with the Authoring Tool?

Show parent | Reply

Hi Stephen,

I am trying to work out how to make changes to the vanilla theme, and I found your post very useful. I tried the method you have detailed, and it worked, I was able to change the header image on page 1. What's confusing me is how to find the id's and classes in the html, so that I can target them with custom CSS, as you did with the page1 header image. I can't seem to find any html source code, is it in a .js file? My apologies if this is a basic question.

I am used to building web pages, assigning id's and classes in the html, then styling with css. I am using the authoring tool, not sure if this has limitations for what I want to do.

Many thanks

David.

Show parent | Reply

Glad you found it useful David. My method involves a high degree of trial and error once I discover the appropriate CSS selector using the browser developer tools (press F12 while previewing the course). Matt posted some browser-specific references in another thread.

Show parent | Reply

Stephen, I wonder if you could help. In preview I can get an image in the header using absolute url (see image)

how do I find the relative file location / name? for the custom less?

Thanks

Chris

Show parent | Reply

Hi Christian

I'm certainly no expert, but I store my custom header images in src/course/en/images/ so you want to target ../../course/en/assets/ i.e.,

background-image: url('../../course/en/assets/my_image.jpg');

Note that the headers won't display on previewing and you'll need to add your custom images to this folder in the course zip file every time you export. Alternatively I guess you could upload the images in the AT, add the image to a page and hide it, then discover the unique filename generated on building and exporting the course. Finally you'd add that filename to your custom LESS. I find it more convenient to just drop my header images (with human readable filenames) into the archive after the fact.

Hope this helps

Show parent | Reply