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.10This 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.