Blocks for content in Drupal

These blocks are available:

• Text/image
• Documents
• Links
• Promos
• Quote
• Slideshow
• Contact card
• Embedded video
• Fact box
• Table
• Video

Text/image

Text with image. You can choose between three sizes for images. Read more in the manual about images. 

Captions are added in a separate field. 

Tools menu

In the text field there is a list of tools to edit text, Links to documents, pages, e-mail links and Pubmedarticles can be created also by adding a block. Which method you choose depends on how you want your page to look. 

Under Styles, you find all headline formatting. 

Text body (P) – Paragraph

Heading 2 

Linked heading (h2) – Headline 2 that shows as a side bar menu (similar to anchor links). This will be collapsed in the phone view, so consider how you select these links. If the content is not too long, it's better to use the regular Heading (h2).

Heading (h3)

Erase formatting. When you paste text from a web page you might not get rid of all formatting. Select the text and click the formatting symbol to clean the text from code. 

Subscript characters are used when you want to lower a number or a character in the word, e.g. H2O.

Superscript characters are used when you want to raise a number or a character in the word, e.g. 1st January.

Special characters - Click on the special character icon to insert these characters in your text.

Link symbol - Creating links both internally and externally as well as e-mail links. This feature can also be used to link to an uploaded document/file in the body text. There is also a block for links.

Pubmed - To insert a link to a publication in Pubmed, click on the DNA symbol and add the link, i.e https://www.ncbi.nlm.nih.gov/pubmed/31207604 

Bullet and number list - If you use this at the end of a text block it can be tricky to add text after the list. Then you can use Source. 

Maximera fönstret - If you would like to see more text in the wysiwyg box/body, click Maximize. This expands the body text so it covers the whole screen, and you then see more content.

Contact card

Contact cards are created in the block Contact Card with the KI ID to the person. 

Catalogue - standard contact card

All employees and affiliated at Karolinska Institutet has a unique KI-ID. This is used in the standard contact cards accessible for all editors on the web site. The contact cards are connected to our ID and Access-system (IDAC). The info published in the contact cards is name, position, e-mail, phone and organisational affiliation. If the person has uploaded a portrait or a brief on themselves it can also be shown. You don't create this contact card as editor - it is already in the system. Once you are to add a contact card for someone who has a KI ID, this is what you use. 

Find a persons KI ID

The KI ID often consists of the first three letters in the name and surname. You can find it by clicking on the persons e-mail address in Outlook. 

Insert a standard contact card

Select Add Block – Contact card. Select Catalogue

Here you can choose what parts of the profile page you want to add, provided there is information in these fields. If the person for example has not added a cell phone no, you will not receive a warning. You can also add a title if you want to override the one from Kimkat. This can be useful when a person appears in a context different from their main context. Eget kontaktkort (Custom card)

You can also create contact cards when you need one for a function, rather than a person, such as Registrator. Or when a person lacks a KI ID or need a contact card before the connection to IDAC is ready. Select Custom Card and use the fields you need. 

Use the text field for extra information you might need for a function or service. This will show below other fields in the contact card.  

Fact box

A fact box can be added to highlight something important or just to list facts related to the topic. A fact box can have several different frame colors and extends across the entire width of the page.

Quote

In this block a quote can be magnified and italicized. It breaks up a page and emphasizes focus.

Table

In Drupal you can create simple tables or upload tables as a CSVfile. Drupal does not support advanced tables. The tables can be created with or without headers. 

You can change the number of rows and columns but they are added and subtracted from the bottom right. To create a headline, choose bold first row or bold first column. 

You can also create links in tables. This is tricky and you need to know some html. so we recommend you to solve the problem in a different way for example by making a bullet list in the text or made a headline and textlist.

You cannot adjust the width of the table as the system works with one hundred percent responsiveness. This means that the site adjusts in size according to browsing device; mobile, tablet etc. If you have a simple table in Excel, you can upload it by first saving it in CSV format.  

Text inserted in Caption will not be visible, only read aloud by speech synthesis.

Slide show

A simple slide show where the user can move forward to the next image.  You use the tool to select images.The images are cropped to fit the size for the slideshow. The ideal size is about 900x600 pixels. When you select existing images, you can see what size they have. You can cut the image, but with a focus on the proportions of the image, not the number of pixels - as long as the size is enough for the slide show. An image of, for example, 300 pixels is still displayed, but becomes blurred.

Embed

You can embed content from any service like Google Maps, iFrames, Twitter and Instagram and our own Tool for lists (news, events, ads, etc). It is not ideal for video. 

Embedded video

This block can be used for video services as it supports moving images better. You can also show video in a Promo regular. 

Links

The links symbol is used to create internal and external links and email links. Du kan även länka till ett uppladdat dokument/fil i brödtexten med den här funktionen.

What is a good link?

The purpose of each link should be clear enough for the user to decide whether to follow it or not. Ideally it should be possible to understand where a link leads even out of context. Never write links of the type Read more or Click here.

An example of a good link is: "You can read more about the government's travel recommendations on the page The Ministry of Foreign Affairs' travel information on the website of the government."

Types of links

Links can be external, internal or email links. External links go to another webpage and look the same as in the address window, for example https://sll.se. Internal links go to a page within ki.se and should therefore use the site's location within Drupal. This way the link is always correct and you do not need to keep track of whether the url changes.

External links

1. Select the words (preferably a full sentence or part of sentence) you want to link in the text.
2. Click the link symbol in the menu. 
3. Fill in the external link under URL.
4. Save

Internal links

If you link within ki.se, always use an internal link

1. Select the words (preferably a full sentence or part of sentence) you want to link in the text.
2. Click the link symbol in the menu. 
3. Insert the title of the content you want to link to. You should be able to put only a few letters and get suggestions. 
4. A list of options come up. They are shown in groups of pages, documents, news etc.
5. Click the blue field once you found the correct content.
6. If this is a page, the page ID or node ID is shown.
7. Save

Email links

1. Select the words (preferably a full sentence or part of sentence) you want to link in the text.
2. Click the link symbol in the menu..
3. Insert the email adress, like emailaddress@any.mail
4. Save

Documents

PDF or Word-files can be uploaded in Drupal and linked with this tool. In connection with the upload you fill in what the document should be called. A good name makes it easier to find the document in the system when you need to link it to a page.

The easiest way to upload a document is through a page, but you can also go to the black list on top and select Content / Add media / Documents to upload documents.

Replace and remove documents

When you upload a document and, for example, want to replace it with a later version, you should replace the document container with a new file - the file is replaced but the link (URL) of the document is maintained. Do this:

1. Go to My workbench.
2. Select the tab Documents.
3. Search for your document and click edit.
4. Erase the file and upload a new one.

To delete outdated files, do as above but select the Delete option. The file is deleted and is no longer searchable. As an editor, you cannot delete files or document containers that you have not uploaded yourself.

Make it easier for the user to find the document

When uploading a document, it is important to fill in the Notes field. This acts as a lead and will appear in the hit result when someone searches for your document. Use up to 250 characters to describe what your document is, and how the content can be used. If you fill in this field the chance of your document being found is increased. If you do not fill it in, only the document title will be displayed in the hit result, so a user might find it hard to tell whether it is the right document or not as suggested in the hit list.

Promos on a page

On pages, promos can be inserted into rows of one to three. If you want to add more promos then you need to create a new promo block.

You can choose to have a summary title for the row of promos if it can help a user understand what your promos have in common.

Select how you want your promos to appear on the page by selecting the symbol that corresponds to the layout you want. You can choose to have a gray or plum background on the entire row.

Accordion 

The block accordion hides a part of the page only showing the headline until the visitor actively chooses to show it. An accordion can create a good overview of your page but you need to have very clear headlines since that is all a visitor can see until they open the accordion.