Skip to end of metadata
Go to start of metadata

This documentation provides a basic overview for adding Basic Pages (and links, images and PDFs) to most Franklin sites. The theme shown in the example is the Franklin theme. Your site may look a little different, but the steps are the same. 

We also have a video series on working with sites.  

If you get stuck working on your unit site, please put in a helpdesk ticket via helpdesk.franklin.uga.edu.

Guide

Logging in to Your Site

To manage your site append /user to your URL.

Example:

Icon

Your user name is your MyID and your password is the password you use with your MyID. 

 
As a logged in user on your site, you will see an administration menu at the top of your site. Depending on your permissions, your toolbar might look a little different-- you might not see "Dashboard" or "Appearance," for example. That is ok for this basic overview. You can use this menu to Add Content or Find Existing content.

Once you are logged into your site, you will see tabs that say View and Edit in the content area on any editable page. Click the Edit Tab on any page you wish to edit, and you will have the ability to edit the content on that page. Make sure to click "Save" to save any changes you make. There are more specific instructions about how to edit pages later in this document.

The remainder of this document will tell you how to customize your new site and provide instructions on each step.


Managing Site Pages

Editing an Existing Page

You can edit the content on any page by viewing the page within your browser as if you were a regular user, and clicking the "Edit" tab. See Image below.

Add A New Page

To add a new page, click "Add Content" from the Drupal menu. See Image below.

 
Then choose whether you want to add a Basic Page, a News Article, or a Slide for the slideshow.  Just enter the information in the appropriate fields and save.
This tutorial will walk you through adding a new Basic page if you need additional assistance:
https://www.youtube.com/watch?v=JFbHGBhWk8M

Adding Images to a Page

There are several steps to adding an image to a page.  Please follow these steps outlined below.

Step 1 Deciding where you want the image to go

When you are in the "editing" mode for a page, place your mouse cursor where you want an image inserted. 

Step 2 Opening the (IMCE) file browser

Click the button that looks like a picture frame. See image below

 

Step 3 Adding an image to the file browser

A file browser pop up will open. Click the "upload" option in the file browser. See image below:

Step 4 Finding the image on your computer that you want to upload

Clicking "upload" will bring up a box where you browse to find the image on your computer. See image below:

 
Click Browse and find the image on your computer. I recommend choose the checkbox for "large" to have the system automatically create a smaller size image for your page. 180x180 is a pretty good size for an image embedded in a web site. If your original image is exactly the size you want it, you do not need to check any of the thumbnail options.
Next click "upload".

Step 5 Inserting the image you just uploaded

After you upload the file browser will show you the image you uploaded in the file list highlighted Blue, and the preview of the image you uploaded. To insert that image into your page, click the "Insert File" button at the top. See image below.

Step 6 Save your page with image

Then you will be taken back to your edit screen and you will see the image placed in the page where you had placed your mouse cursor. See image below:

 

Step 7 Add Alternative Text Tag

New laws require you make your Website accessible. One aspect of creating an accessible site is to label all images with descriptive text that screen readers will read to visually impaired users. To add an alt tag to your image, "right-click" on the image while you are still in the "edit" view of your page. Then choose "image properties".  See image below


Then on the Image Properties pop up, enter a description of the image as if you were describing it to a friend that wasn't looking at it. Please note the other properties that you may set for images.

Click OK.


Step 8 If desired, align your image

You can also align the image so the text wraps and add spacing between the image and the text.

 

Right click on the image and select "Image properties," just like you did when you added alternative text.

 

There's a drop-down option in the bottom left for alignment.

 

I'm aligning this image to the right.

 

I can also put spacing between the image and the text that wraps around it.

To add spacing to the right and left, I use the "HSpace" aka Horizontal Space field. 

To add spacing to the top and bottom, I use the "VSpace" aka Vertical Space field.

In this example, I'm adding 16 pixels of padding or space between the image and the text to the right and left. 

I can see a preview of the amount of space in the preview box.

 

My image is now aligning right, and the text is floating to the left with a padding of 16 pixels.

 


Then make sure to save the page with the newly inserted image. Click the "Save" button at the bottom of the page.

Step 9: If the image appears squished, remove the width and height values.

If the image appears squished after saving the page, you will need to remove the Width and Height values under "Image properties" – remember, you get to this by right clicking on the picture.
 

In the below screenshot, the Width and Height are 429 and 572 pixels.

Simply delete those values; don't replace them with anything. When you save the image and save the page, you image should no longer be squished.

Embedding video

Your video will need to be with a publicly hosted video service, like YouTube or Vimeo. If there are spoken words, it will also need to be captioned, even if the video is not owned by you. Please also remember copyright laws before embedding videos.

You can embed a video in any text editor (CKeditor) field that has the Embed Media icon.

 

In the below example, I am going to embed a video into the body of an article. 

Step 1 Put your cursor where the video should appear

First, I will put my cursor where the video should be embedded. This is similar to how I start to add an image. 

I'm embedding the video beneath sentence.

Step 2 Click the embed icon

Next, I click on the media embed icon, which I showed previously:

 

A prompt appears:

I must get the embed code for my video.

 

Step 3 Get the embed code and copy it

In this example, my video is hosted on YouTube.

 

To get the embed code, I click on the "share" link near the bottom.

 

This gives me a few options, but what I really want is embed.

By clicking the "embed" tab, I now have some code I can copy and paste into my Drupal site. 

 

Step 4 Paste the embed code and click on the dialogue box

I've copied the embed code, now I'll go back to my site and paste it into the embed box.

When I click "OK," I see a box outlined where the video will appear, once I save my content.

Step 5 Save your content

After saving the content, I will see the video preview.

Done!

Adding links to a page

Highlight the text that you want linked. As a best practice and to comply with accessibility law, this text should be specific-- no links that say only "click here" or "read more." When a link only says "Click here," it doesn't make sense out of context.

Look for the icon with a chain. When you mouse over it, it says "Link."

You can add links to other websites, like www.uga.edu, or to your own pages within the website, like /our-programs. 

When adding links to internal pages, you must NOT use the whole url, say, https://unit.franklin.uga.edu/our-programs. You only need the part after the .edu, so /our-programs.

If you use the whole url and your unit name ever changes, every link across the site will break.

Once you've added your link, be sure to save your page and check your links to be sure they work. 

Inserting PDFs

We'll use both the link icon and the image browser to insert PDFs.

Highlight some text and click on the link icon, as if you were creating a link to an external site or a page within your site.

Instead of typing in a url, we're going to click "Browse Server." This takes us to the same uploader that we use for images.

Upload your pdf from your computer. Ignore the create thumbnails option. Click insert. 

Click ok.

You now have a link to your PDF within your document. 

Deleting PDFs permanently

To remove PDFs and other files permanently, select a File and click on delete, or follow my instructions here: How to delete files in Drupal 8 or Drupal 7

 


Organizing the Menu Structure

When you create a Basic page, there is a section at the bottom of each page where you have to enable the page to show in a menu. See Image below.

 
The checkbox for "Provide a menu link" is not checked by default, because sometimes you may want to add a page that doesn't show up in the navigation.
If you click that checkbox you will be presented with a screen that looks like the one above. The Menu Link Title will automatically be set to whatever you have entered in the Title field in the main content area.
You will also need to choose the parent item. If you are trying to create a top level page leave it as <Main menu>. That will place the page name in the top navigation bar, assuming you don't have too many pages listed already. There is a limit to the number of pages you can have in the top level bar. If you want it to be under an existing page, choose the page in the pull down menu next to "Parent item." This new page will then be listed in the left hand navigation panel when you navigate to the page you placed it under, or any other page under that same parent.

Note: Only Basic Pages should go into the menu structure.

Content made by content templates like Article, Personnel, etc., are set to automatically show up in designated places on the site. Adding them to the menus will needlessly bog down the menus.