Installation and Enabling
The CERN Full HTML text format is encapsulated in a module, in order to follow the official Drupal strategy on installing and maintaining features. The module is placed in the CERN Drupal Infrastructure so you don't have to install it.
Enabling the module
The enabling process of the CERN Full HTML module does not differentiate than any other CERN module:
- open /admin/modules
- Check CERN Full HTML Format module
- Click "Save configuration"
- Done! Dont forget to clear the caches
Configuring the editor
The configuration page of the CERN Full HTML text format is located in the configuration page of the text formats under /admin/config/content/formats. In this page you can choose which roles will be able to use the text format, which buttons will be included and with what order.
Setting CERN Full HTML as default
After enabling the module, the CERN Full HTML is not the default text format of CKEditor. In order to set it as default format, you just have to visit the text formats' overview page (/admin/config/content/formats) and set the CERN Full HTML as first in the order by using drag-and-drop.
The CERN Full HTML is a complete CKEditor text format. It consists of different plugins that can be used in order to style your text. More analytically the 3 main features of the CERN Full HTML text that differentiate it from other formats are: CDS Media plugin, Text Styles and CERN Font plugin.
CDS Media plugin
The CDS Media plugin enables you to add images and videos from CDS to your articles. In order to enable it just drag and drop the CDS Media plugin from the "Available buttons" category to the "Active toolbar" buttons.
Using the CDS Media plugin
After placing the plugin in the CERN Full HTML text it appears in the available buttons. In order to use it, just click the plugin and add the CDS record ID of the image/video or the collection ID of the collection that you wish to add.
Adding individual images/videos
CDS photos are placed in cds.cern.ch. The record ID of each image is placed under the image when you visit the image's collection. In image ... you can clearly notice the record IDs under a CDS collection.
CDS videos are stored in videos.cern.ch. The video record ID is placed on the upper right corner of the video description. Just click the box and the ID will be copied.
After finding and pasting the record ID, you will be prompted to fill some fields regarding the record that you are about to add. Most of the fields will be filled from CDS but you are welcome to fill more.
The CDS collection ID is placed on the top right corner of the collection. After finding and pasting the collection ID, you will be prompted to fill some fields regarding the record that you are about to add. Most of the fields will be filled from CDS but you are welcome to fill more.
It's a very common mistake when adding a record to fill the collection ID instead of the record ID and vice versa. If the plugin does not fetch the image, then make sure that you have added a correct record or collection ID
The CERN Full HTML offers a very useful feature in order to stylize your text without having to modify the HTML code of it.
You apply them by selecting the text you want to have a certain style, then choosing it from the drop down list in the CK editor.
If you only want some text to have a style applied, then you can use the break-columns style on the text after this or clear paragraphs and that will remove any of the styles you’ve applied.
The ‘Cleaners’ are probably the style you will use the most. They remove the paragraphs and styles applied to text or images to make sure it sits nicely.
If you are building text in columns, with aligned images or blockquotes then you need to add in the break columns to be able to continue to work with the text in a single column. This ‘breaks’ the column structure you have applied to text.
It makes sense to have lots of Break columns throughout a large piece of text, breaking it up and it means you can align some text in different ways.
If something isn’t aligning then you can use the break column to make it.
|Clear Paragraphs styles||
This removes the styles applied e.g. the columns or any blockquote. You can use it to get text to wrap around an image. E.g.
|Clear Blockquote styles||
You will require this if the blockquote sends the lines from the quote across the entire page. If you previously added an style to a paragraph or to a blockquote, it remove these styles.
|Hide paragraph in mobile view||
In the headers, often we use a few /br tags or paragraphs to try and align the text more centrally. But when you see this on mobile view it looks odd and aligns the text weirdly. Add this style to the paragraphs so that they look nice in mobile view.
The column paragraph styles are vital for putting the text into the correct width for users to scan it. ALL the text in every story and landing page should have one of these columns applied.
Right Col. / Breakout IMG
This puts the text on the right, with the image on the left breakout out of the margins You need to apply the class ‘breakout-right’ to the CDS image also e.g.
|Left Col. / Breakout IMG||
This puts the text on the left and an image floating on the right. You must also apply the style ‘breakout-right to the image on the CDS wizard.
|Right Col. / align IMG||
This positions the text on the right, with an image in a column to the left, aligned with the text. It makes the text column slightly narrower as the image is more central.
|Left Col. / align IMG||
This aligns the text on the left, with an image on the right with the CSS class ‘align-right’ applied.
You use these styles to align the blockquotes into the column structure.
|Right BQ / breakout IMG||Places text and blockquote on the right and image on the left.|
|Left BQ / breakout IMG||Places text and blockquote on the left and image on the right.|
|Right BQ / align IMG||
Places text and blockquote on the right and image on the left, while image and text are aligned.
Note: Sometimes when applying the ‘Clear paragraphs’ style it can look weird in the CK editor (see below) but as you can see from the Source code, and the image above it still renders properly.
|Left BQ / align IMG||
By selecting the text, and applying ‘left BQ/ align IMG’ you can have a blockquote next to an image. Below I ‘cleared the paragraphs’ of the text below the blockquote, which has made it wrap up next to the image.
You use these styles to align the blockquotes into the column structure.
|Small margin left separator columns||
Adds a small margin left to the paragraph (more or less 30px wide) if you want to add a margin in a column next to to another column. Useful for lists next to an image.
Like Hide paragraphs, it’s used for example in the text of headers, where you add lots of breaklines before the text, and in mobile devices it looks weird. Use this style to hide those breaklines in mobile view.
|Tags||Adds a highlight effect behind the selected texts, just like tags.|
|UPPERCASE TAGS||Add the art direction of a tag to a piece of text (use span tag). The highlighted colour is the colour set in the theme settings.|
Adds a long line into the text. Most commonly used in the hero header on the homepage to break up the questions.
These add the column style to a bullet point list.
|Right UL / breakout IMG||Breaks-out an image on the left when the bullet point list in on the right.|
Left UL / breakout IMG
|Breaks-out an image on the right when the bullet point list in on the left.|
|Right UL / align IMG||Breaks-out an image on the left when the bullet point list in on the right and aligns the image with the list.|
|Left UL / align IMG||Breaks-out an image on the right when the bullet point list in on the left and aligns the image with the list.|
CERN Font provides a set of icons which can be added through typing.
In order to use the CERN Font, you need to just expand the font selection and choose the icons font (it's most of the times the last on the list.
After selecting the font, you can use your keyboard to type icons instead of letters. In this way you are able to add icons in your text. You can find a table of the available icons below.