Teaser Anchors in Section Page Previews

CUE can generate teaser-specific section page previews – previews that automatically scroll to a selected teaser. This can be very useful when working on publications with very long section pages. Instead of having to search for the teaser you are interested in after displaying the preview, you just select the teaser in CUE before you generate the preview: the preview then automatically scrolls to the correct location in the preview.

CUE generates a teaser-specific preview by including a fragment identifier in the URL passed to the preview tab:

http://mywebsite.com/#ece-12345?poolId=104&token=-1361898978

This URL will cause the displayed preview to scroll down to the teaser marked with the anchor <a id="ece-12345"></a>. CUE only includes a fragment ID in the preview URL if a teaser is selected in the section page editor when the preview button is pressed. The fragment ID has the form:

prefix content-item-id

where prefix is by default ece- and content-item-id is the internal ID of the selected teaser.

You can change the prefix that is used as follows:

If necessary, switch user to root.
```
$ sudo su
```
Open /etc/escenic/cue-web/config.yml for editing. For example:
```
# nano /etc/escenic/cue-web/config.yml
```

Add the following setting:

previewAnchorPrefix = "your-preferred-prefix"

Save the file.
Enter:
```
# dpkg-reconfigure cue-web-3.12
```
This reconfigures CUE with the change you made.

Required front-end configuration

In order for this feature to work, you must configure your front end application (i.e the CUE Front Waiter) to add matching HTML anchors to section page teasers. The Waiter application in the Tomorrow Online demo supplied with CUE Front 1.9 or higher includes a Twig template for this purpose called anchor.twig:

<a id="ece-{{ articleId }}"></a>

If you want to know more, download the Tomorrow Online demo and look in the Twig templates to see how it is used.