New Features


To top


Dynamic content overview - Card Layout

News and Agenda items are usually displayed in what is called a Dynamic Content Overview. The news / agenda feed on your page is one as well. There are several overview templates available, but there was great demand for a template that displayed the search results in a card layout. This has now been introduced, an example can be seen on the right.

Also, check out more Card Layout display options!

Styling is determined by the available content of the result pages, as well as custom settings in the overview element. All card variations (normal, half height, horizontal, and horizontal half height) are available to choose from, as well as the number of results per row.

Because the overviews are difficult to set up properly, changing from your current template to this new template is not done by editors. Please contact your local content manager to apply for this overview template.

Unravelling how DNA is looped with DelftBlue and experiments

Roman Barth Proteins are the molecules that carry out essential functions in our cells, such as compacting long strands of DNA into a tiny structure in the cell nucleus. Experimental biophysicist Roman Barth wanted to understand this process down to the molecular level. Thanks to the DelftBlue supercomputer, he was able to compress several years of experiments into a single year. Knowing the sequence of amino acids that a protein is made of doesn’t tell you its three-dimensional shape. And knowing its shape doesn’t tell you its function and how it interacts with other molecules when performing that function.This is the challenge Roman Barth faced during his PhD at the Cees Dekker Lab in the Bionanoscience Department. “My goal was to unravel the interaction between two proteins known to be involved in the compaction of DNA via a process called DNA loop extrusion,” he says (see video ). “The first protein, cohesin, will loop DNA continuously if unstopped. The second protein, CTCF, acts as a stop sign to cohesin. That is very important for the cell as DNA, for example, needs to be accessible when read, expressed or maintained.” This is how scientists think cohesin loops DNA The interactions between proteins can’t be calculated from their amino acid sequences using first principles. AlphaFold The interaction between the two proteins depends on their shape, the parts that are in close proximity, and the forces that then occur between groups of atoms. “These can’t yet be calculated from their amino acid sequences using first principles,” Roman says. “And while CTCF is a relatively short protein, cohesin is a complex of five subunits which it can exchange – allowing for many configurations and many more interactions.” At the start of the project in 2023, it looked like a brute-force experimental approach was the only way to go. But then AlphaFold came along. “AlphaFold is an algorithm, based on artificial intelligence, that can predict the structure of proteins from their sequence,” Roman says. “It completely changed our approach. We could now make predictions about what our proteins would look like, and what may happen to them when they meet. Instead of experimentally testing all possible configurations of CTCF and cohesin, we could ask the computer to predict likely interactions and test only those.” Project storage allows multiple users from various departments to share resource-intensive installations on DelftBlue. Powerful computer AlphaFold did come with the new challenge of requiring a powerful computer to run on – a lot of disk space to store the 5 Tb database it browses and a lot of computing power to run the algorithm. “It is almost impossible to run AlphaFold on a laptop or desktop and we lacked the expertise to build our own cluster. So, our second lucky break was that DelftBlue came online.” It also turned out that another researcher, Marcel van der Broek from Biotechnology, had already installed AlphaFold on DelftBlue. Rather than having every user install their own version, the DelftBlue administrative team setup what is now called project storage. “It allows multiple users, from various departments, to share such resource-intensive installations. Marcel and I were the first to make use of this feature for AlphaFold.” Cluster newbie Roman was still pretty much new to using a computational cluster when he started with DelftBlue, but he quickly found his way. “DelftBlue has an intuitive interface, great documentation, and a very knowledgeable and helpful support team,” he says. “You can basically figure it out from there.” He avoided running into the 5-day runtime limit for jobs submitted by breaking up the CTCF protein into smaller fragments. “Still, it would be nice for DelftBlue to have even bigger GPUs or to be able to use multiple GPUs at the same time, especially for tasks involving artificial intelligence.” One thing he really appreciated was that the DelftBlue administrators were very open to users trying out new things. “Their attitude of ‘seems to be useful, we’ll give you the resources you need’ has been very helpful,” Roman says. And when he ventured into new DelftBlue territory, such as when he submitted hundreds of jobs at once, the administrators were just as curious about how the cluster’s performance. “Turns out the job allocation scheduler handled it well.” Testing everything purely experimentally would have taken us at least three times as long. Two likely interactions Using AlphaFold and DelftBlue, Roman was able to pre-screen hundreds of different combinations. In this way, two likely interactions were identified. These were validated in laboratory experiments in which he looked for how these two fragments of the CTCF protein affected the DNA looping process. “Even though any such fragment can nowadays be quite easily purified from cells, performing the necessary experiments still took about 6 months. All in all, this project took us a year from start to finish, whereas testing everything purely experimentally would have taken us at least three times as long.” Having obtained a Schmidt Science Fellowship, Roman will next undertake a postdoc in at the University of Washington in Seattle, delving much further into AlphaFold and protein structure prediction. “My time at TU Delft and with DelftBlue has been a fantastic preparation for this next step in my career. And I hope the administrators of the supercomputer over there will be just as open-minded and helpful.” Rendering of a CTCF fragment bound to a cohesin-subunit.

TU Delft Exchange Week brings educators together

TU Delft Exchange Week brings educators together This week, TU Delft once again hosted the Exchange Week, welcoming participants from higher education institutions across Europe. The event was made possible through the collaboration of four TU Delft departments: the Extension School, Teaching and Learning Services, the Teaching Academy, and the New Media Centre. These teams originally developed the concept and continue to work together annually to ensure its success. Throughout the two days, participants engaged in several insightful sessions, including: Supporting Teaching Staff in Campus Teaching – Gytha Rijnbeek en Franca Jonquière Online Education at TU Delft – Willem van Valkenburg Tour of the New Media Centre, showcasing the XR Lab and recording studio Supporting Faculties in Lifelong Learning – Sofia Dopper Workshop on Course Development – Tracey Lee Davis Quality Assurance and Microcredentials – Clelia Paraluppi Managing the Portfolio of Lifelong Learning Products – Bertien Broekhans Promoting Lifelong Learning Products – Maaike van Buul Participants gained a comprehensive understanding of how TU Delft supports campus education, blended learning, and online education. For example, on Friday, they were guided through the Extension School's course development process, learning how decisions are made regarding which courses to create, the types of courses to offer, and how these ideas progress through each stage. This also included an in-depth exploration of marketing strategies, the factors influencing course selection, and how success is evaluated. On quality assurance insights were offered on how to implement tailored quality practices in lifelong learning. Attendees were encouraged to reflect on the importance of quality assurance at their own institutions, especially when developing flexible learning pathways such as Microcredentials. The Dutch approach provided a useful example, showing how TU Delft’s Extension School maintains high standards for these innovative educational offerings. By the end of the two days, attendees had a full understanding of how TU Delft’s Lifelong Learning courses are designed, marketed, and evaluated, ensuring that all elements of the educational process are thoroughly addressed. The smaller group size fostered an intimate setting, perfect for cultivating meaningful discussions and learning from one another. This format has been a cornerstone of the Exchange Weeks since they began in June 2019, with this year marking the fifth edition. In addition to on-site activities this week, participants were encouraged to join the LinkedIn group, which connects all those who have attended the Exchange Weeks since the very beginning. This group continues the conversation, enabling participants to maintain valuable connections and share insights long after the event. The event was a resounding success, with engaged participants contributing thoughtful questions and sparking lively discussions. By facilitating this collaborative exchange, TU Delft proudly play a role in contributing to a collaborative culture where knowledge institutions work together. Thank you to everyone who took part. Impressions of Exchange Week

To top


Tabs as Grid Elements

What changed?

Tabs were difficult to manage, especially when you wanted to re-use and swap content from other pages. Therefore, the tab element has been redesigned for a more user-friendly interface, a better overview of the embedded content, and the added possibility to cut/paste and reference elements in it.

The old Tab element still exists and is not automatically replaced, but will be phased out. For this purpose, the old version has been disabled for editing. In the following weeks, we'll be changing all existing Tab Elements to Tabs Grids. Should you however come across an old Tab Element and you find yourself unable to edit it, please contact your local content manager.

How can I create a new Tabs Grid?

Tabs Grids are created like all other grids. When creating a new element, under Grid Elements, select Tabs grid. This will place a grid on your page with 5 rows, each row representing one of the tabs.

  • The Header in the first element of each tab will also be the title of that tab. So for instance, in this case, the Header of this text element ('How can I create ...') is adapted as Tab title.
  • You can select a colour theme by editing the Tabs Grid properties; under Appearance, select a theme (see fig.)
  • If you don't put any content in a tab, it will be invisible.

 

Any tips and tricks?

When you don't want to start a tab with a header (for instance, when it's an image), you still need to tell Typo3 which title to use for this tab. You can do so by creating a 'Header Only' element, and under Type, select 'Hidden'. This will not show the header inside your tab, but it will be adopted as Tab title.

 

To top


Youtube video in Header Slider

It is now possible to put a video in the Header Slider on top of any page. 

If you want to add a Youtube video to your header-slider, just paste the youtube URL in the link field of a slide; a play button will be shown on your slide, and a pop-up style video will play when the button is pushed.

Like all slides, this feature also requires you to upload an image.

To top


Full Width page template

This page combines the regular Content page with the Homepage. Its features are identical to the Homepage format in many ways, but it adds the bread crumb on top, so visitors can easily find their way back.

This layout was frequently created with a workaround (Content Page with Left Column, combined with specific element settings), which is why an official option has been included instead. 

To create this layout, go to the page properties, under Appearance, select the Backend Layout 'Content page that is full width'.
(feature renaming can hopefully be included in our next release)

This page is actually an example of this layout. Click 'To Top' to view the breadcrumb.

To top


Special Page template

This is another new page template (see: Full Width page template). This layout is designed for a long-read format, by dividing the screen in two halves; the left one is designated for images, the right one for all content. There is also a special connection between picture and content, enabling a nice scrolling experience.
Try it out!

This layout is particularly useful for magazine-style pages.

To create this layout:

  • go to the page properties; under Appearance, select the Backend Layout 'Special Page' (see fig.).

  • On this new page, create a new element; under Grid Elements, select Special Container (see fig.). This grid consists of two columns.

  • In the left column, you place a 'Special Image' element.
    This is the image that is displayed stationary alongside the scrolling content on the right; when the visitor is at the end of the content in this Special Container, the image will scroll up, and display the next Special Container.

  • In the right column, you place a normal 100% Grid element.

  • In the element properties of this Grid Element, under Appearance, select 'Used for content on special pages..' (see fig.).

  • Inside this 100% grid, you can place all elements to your liking.

The last steps, creating a 100% grid, are necessary to create the Special layout as it was designed. This element layout compresses the width of the elements within - otherwise, the text would run the entire width of the column.

 

To top


Facts and Figures element

This is a new element to display, for instance, facts and figures.

To create this, add a new Fact element inside a grid. Under Theme, select the header colour.
Then, edit the grid properties, go to the tab Appearance, and choose a background colour under 'Theme'.

Please note: the fact element only properly works in combination with this coloured grid background.

What is the coolest new feature?
Fact Element
How many features are in this new release?
40
Number of new features
11

To top


Coloured grid background

The background colour feature for grids can also be used without a fact element. It may for instance be useful for magazine-type pages, to highlight a specific text.

Two layout guidelines:

  • Dont overdo it! These coloured grids are very dominant. Don't create an abstract piece of art.
  • See if you should add top and bottom margins (under Appearance), to prevent the grid from overlapping with other elements. 

To create this, edit the grid properties, go to the tab Appearance, and choose a background colour under 'Theme':

To top


Notification element

This element can be used to draw attention to a certain part of your website, or a call-to-action (for instance, when an application deadline is approaching). You can add one or two buttons. The element is available in all TU Delft theme colours.

To create this, add a new Notification element. Enter a header, text, and theme, and, optionally, one or two buttons. The buttons can either be white or transparent.

Notification element

These are not the only release notes; they are only the new elements. Check out our improvements and bug fixes!

Improvements Bug fixes

To top


Read More-toggle

This option allows you, in a Text element, to hide paragraphs under a 'read more'-line (as seen below).

To create this, in the Rich Text Editor (RTF) of the Text element, stand in the text on the desired location. Click on 'Insert Custom Element', then 'Tudelft', then 'Insert Readmore'. An orange marker will appear in your text.

To demonstrate this, a piece of literary history:

Alice

There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and talking over its head. ‘Very uncomfortable for the Dormouse,’ thought Alice; ‘only, as it’s asleep, I suppose it doesn’t mind.’Read more

The table was a large one, but the three were all crowded together at one corner of it: ‘No room! No room!’ they cried out when they saw Alice coming. ‘There’s plenty of room!’ said Alice indignantly, and she sat down in a large arm-chair at one end of the table.

‘Have some wine,’ the March Hare said in an encouraging tone.

Alice looked all round the table, but there was nothing on it but tea. ‘I don’t see any wine,’ she remarked.

‘There isn’t any,’ said the March Hare.

‘Then it wasn’t very civil of you to offer it,’ said Alice angrily.

‘It wasn’t very civil of you to sit down without being invited,’ said the March Hare.

To top


Image side caption

An option has been added to display a caption next to an image. This was a feature in the original design, and works well in storytelling articles.

To create this, go the the element properties, under Appearance, and choose 'Image fullwidth with caption'.
On the General tab, under Description, fill in the caption text.

The caption can now be placed next to the image.

To top