Skip to end of metadata
Go to start of metadata
Complexity Level: Advanced

The is an advanced topic. You will need to possess a good understanding of HTML, and have significant experience with Drupal content editing.

Permission Level




Overview

This page is part of a series of how-to's on creating a special section for your site, such as one used for a conference, program, or other reason. The first steps detailed how to create a section to hold your pages.

These next steps cover creating an optional custom block with an image and telling where to show up. It's an intermediate to advanced topic for our content editors. Note, you may need your permissions upgraded to create the block needed to make this happen. 

If you need additional help on inserting images, or other aspects of your site, please see our Drupal 8 Support page.

Table of Contents


Steps

In our example from creating a special section for your site, we imagined we are creating a special section for an upcoming conference. You have the option to add a banner to appear over all these conference pages. To make this happen, we're going to create a custom block. It's helpful if you have already updated the url paths of your pages

Step 1 - Create a custom block to hold your custom image or banner

In the admin tool bar under Manage, to Structure >> Block Layout.


Now you are on the Block layout page. You can do a lot of damage here, so be careful.

Each bold area represents a section on your site's pages.


Look for the section called "Upper Content." 

This is where we want to place our banner.

Select "Place block."


A prompt will come up with a list of existing blocks.

We don't want any of these. We want to create our own block.

Click the blue "Add custom block" button. 

Now you'll get an option to add a custom block. 

Go with "Basic."


You'll notice that the screen for creating a basic custom block looks a lot like the editing screen for creating a basic page, or other type of content.

The text editor toolbar is the same. We can add text, links, images, etc. 


We can put anything here. But I think the best thing to do is to add an image that will look like a banner above all the conference pages on my site.

From the text editor toolbar, look for the image icon. Click it. 

If you need extra help with adding images, see our Adding Images to Content documentation.

Select "Choose file."


You'll get a prompt to browse files on your computer.

Browse for the image you want to be your header. I've made one ahead of time to insert for this example.

Select "Choose."


The website will automatically reduce the image side if it is too wide.

Be sure to include alt text for any text in your image. 

Hit save.


Now my image header can be seen.



Step 2 - Tell the custom header image block where to show up

So now we get a message that our block has been created, but we still have to tell it where to show up.

Again, for this next part to work, you will have needed to gone through each of your pages and updated the url paths.


Look under the "Pages" side tab.

By getting the url of the conference landing page, I'm going to tell this block to show up on that specific page.


In another tab, I've opened my conference landing page so I can get the url.


In the url menu bar, I'm going to copy everything after the .edu. In our example that would be /big-conference-2021.

(I'm using a demo site, which says site15.centos.local, instead of name.franklin.uga.edu)


Now go back to your block creation page in the other tab. 

Paste that url in the "pages" section. 

This will make the block show up my Big Conference 2021 landing page. 

But I'm going to add something else to this.

I'm going to add /big-conference-2021/*. This means it will also show up on any page with /big-conference-2021 as part of its url.

Again, for this next part to work, you will have needed to gone through each of your pages and updated the url paths.



Before we save, there's one more thing we have to do.

We need to specify the region (again). It is "Upper Content."

Now save the block.


And when we view our Big Conference 2021 landing page, we see the custom block with the image we added.

Great!


And if you added /big-conference-2021 to all your page urls like I showed you how to do in creating a special section your site, the header block will appear on those pages too, automatically.

The block appears on this page too!


Repeat this process for all pages you want to have the banner block.

Next... Create a menu block with a custom title


Login

To manage any part of your web site, you will have to be logged into the Drupal CMS.

If you need help logging in, please review this login help document. 

Contact the Franklin OIT Help Desk

Hours of Operation

Monday - Friday

8:00 a.m. - 5:00 p.m.

Website Information

Homepage

http://oit.franklin.uga.edu

Directory

http://oit.franklin.uga.edu/

Service Offerings

https://kb.franklin.uga.edu/x/xgKlAg

Systems Status Information

Franklin OIT Status

http://status.franklin.uga.edu/

https://kb.franklin.uga.edu/x/BQB0

UGA/EITS Systems Status Pages

http://status.uga.edu

https://twitter.com/uga_eits

https://www.facebook.com/uga.eits

USG Systems Status Page

http://status.usg.edu