A Content Creator’s Guide to Document Authoring with Edge Delivery Services. Part 2

Previously…

In Part 1 of the content creator’s guide we covered adding simple images and text, formatting text and creating links, creating tables and adding metadata to the bottom of the page.

Continuing the tutorial

Here, we will add a large image to the top of a page that will fit any size screen: desktop, laptop, tablet or phone. This will be a ‘hero’ image.

Then I’ll show you how to preview and publish a page, and remove caching from a link.

And how to add useful navigation elements to a page, such as a link back to the top and an index.

Add a hero image

We need a big image at the top of the page that looks good on all screens to grab the reader's attention. To do this, choose an image with enough space around it so you don't lose anything vital when the sides, top and bottom are cropped. The best ratio for an image is 16x9.

Manipulating graphics can be hard if you are new to it. If you are frustrated with it, invest in a suitable tool such as Photoshop.

You can check how your hero will appear on different screens by resizing your browser window. Hover over the side edge of the window until the double-headed arrow appears, then drag the side of the window in. The image will change for a laptop, tablet or phone screen.

To inspect how your page will look, you need to be in ‘preview’ mode, the stage before ‘publish’ when your page goes live to the world.

Preview and publish

If you have Edge Delivery Services set up, you’ll find the button to preview in your toolbar:

It’s essential to use this. After previewing, the options to publish or go back to editing appear:

A red dot indicates the page has been changed since the previous preview or publish.

If you are not publishing yourself, give your doc to someone who will. Allabout.network can do this for you.

Check your image does not appear cropped on any screen size, like this:

Or this:

But with all sides intact, like this:

Remove the cache from links

To link to a page you’ve built, you need to remove the cache info from the end of the web address, otherwise the link will always go to that version of the page and not to any updates.

Caches are useful to speed up the loading of a page, but your page links shouldn’t include them.

To do this, remove the ? (query string) and all the numbers and letters after it from the link address:

https://allabout.network/blogs/ddt/content-creator-guide-to-document-authoring-with-edge-delivery-services?nocache=1720353654533

Remove this…

?nocache=1720353654533

Use this…

https://allabout.network/blogs/ddt/content-creator-guide-to-document-authoring-with-edge-delivery-services

Add navigation

At allabout.network we have built some useful navigation tools.

To guide a reader back to the top of the page. Add this table to the top:

This will create a Back to top button further down the page:

We have also built an index function.

Just add a single-column table to the top of the page and type ‘index’ into it:

When a reader opens the index, links to all the headings further down the page will appear:

If you follow this guide, you will have a page similar to this example page.

In Part 3, we’ll show you more advanced features, a special font for code examples, and fragments.

If you’d like to know more about using Edge Delivery Services, read Tom’s

A Developer’s Guide to Document Authoring with Edge Delivery Services and A Manager’s Guide to Document Authoring with Edge Delivery Services