Sep 16 2018
Sep 16

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

'There's a module for that', this applies to many use cases with Drupal. What is not possible with modules we develop tailor-made instead. But because customization is costly, it is good to keep abreast of the available modules. I try to keep track of this every month; although that does not always work, at least here is what struck me about module updates in the last month:

1. Security Kit

Has been quite some time in development and quite popular, but recently received an update. Always good to mention once again, within this Drupal module a number of measures are taken against common safety issues:

  • Cross site Scripting
  • Cross-site Request Forgery
  • Clickjacking

https://www.drupal.org/project/seckit

2. Twig tweak

Provides a number of handy Twig extensions, which makes the life of a Drupal developer / themer easier. See also this cheat sheet for the concrete possibilities.

https://www.drupal.org/project/twig_tweak

3. Field Block

For me a blast from the past, we used this module a lot in Drupal 7 installations. It offers a light weight way to position the output of your fields via blocks on a page. Blocks with relevant fields can then be placed lean via the Context module for example.

If you compare this with positioning via for example, Panels, Display Suit or Views it is very lean and mean.

However, a caveat: this approach is meant for developers, if you want to build non-technical content manager pages this is a less suitable method.

It is also possible to position fields with the Layout Builder, nowadays in the Drupal core. See this video.

https://www.drupal.org/project/fieldblock

4. Track da files

The Drupal 8 core has a good file management system, for both public and private files. But there are no statistics / reports in, this module provides for this to include the following features:

  • One list with all files
  • Number of downloads per file
  • IP address statistics
  • Export data to CSV

https://www.drupal.org/project/track_da_files

5. Heading

When you work with Paragraphs, you will understand the usefulness of this Drupal module: you simply need a simple header field which you can position between paragraphs or other sections in your page: plain text and choose h1-h6.

https://www.drupal.org/project/heading

6. File hash

An addition to the standard Drupal file system, with which all uploaded files are uniquely characterized by a hash. With this you can, for example, detect duplicate files and verify copies against original files.

A unique hash per file is stored in MD5, SHA-1 and/or SHA-256 format.

https://www.drupal.org/project/filehash

7. Smart IP

This Drupal module collects all kinds of visitor information based on the IP of the user, such as:

  • Place of residence
  • Country
  • Time zone
  • Postal code (approximate)
  • Degrees of latitude and longitude (approximate)

Please note the necessary reports regarding AVG / GDPR.

https://www.drupal.org/project/smart_ip

8. Freelinking

A 'looser' way for content managers to create links. By default you have to enter a 'hard' link to a page, but after installing this Drupal module you can also use the page title, in which case you enter: [[nodetitle:Title of the Page]].

This module automatically creates a working link.

https://www.drupal.org/project/freelinking

9. Facets

Building a relatively easy "faceted search" in Drupal 8: filtering as you may know from Marktplaats.nl. This module works with the Drupal core search or the commonly used Search API module.

https://www.drupal.org/project/facets

10. Show email

A micro module that can show the e-mail address on a user profile page.

https://www.drupal.org/project/show_email

11. Iframe

Generates an extra field, which you can use to load an external website via an iframe. You can set height and width, optionally set a title and attributes for frameborder and scroll styling.

https://www.drupal.org/project/iframe

12. Views Bulk Edit

Change bulk values of fields in nodes or other entities. This module uses the popular Views Bulk Operations module.

https://www.drupal.org/project/views_bulk_edit

13. Menu Item Extras

Do you want to add extra fields to menu items? Install this module. You can see it as 'Fieldable menus', allowing you to store and display all kinds of additional information in a menu item.

https://www.drupal.org/project/menu_item_extras

14. Redirect after login

A mini module, with which you can set which page someone ends up on after logging in.

https://www.drupal.org/project/redirect_after_login

15. Lockr

When you work with encrypted data (eg user data), Drupal always needs a key to decrypt it, otherwise you can not use that data in the Drupal platform. If this key is on the same server, a hacker would potentially still have all the data at hand. If this key is on a different server, it will be a lot more difficult. This module provides for the latter.

https://www.drupal.org/project/lockr

16. Automatic IP ban (Autoban)

Drupal security module which analyzes visitor behavior: when suspicious actions are detected, the relevant IP address is added to a black list.

There are various settings possible, so you can adjust how strict the module operates.

https://www.drupal.org/project/autoban

17. Bootstrap menu items

A fan of the Bootstrap HTML framework in your Drupal site? Then this module may be useful: make easy drop-down menu items and separators between menu items.

https://www.drupal.org/project/bootstrap_menu_items

18. Chosen

Makes the selection of items (eg Drupal taxonomy terms) a lot easier for content managers in your Drupal system.

/Drupal-chosen.png

https://www.drupal.org/project/chosen

19. Paragraphs jQuery UI Accordion

Do you use Paragraphs and want to show an accordion? You guessed it: this module can help a long way in the right direction.

https://www.drupal.org/project/paragraphs_jquery_ui_accordion

Wrap up

Ok, that's it for this month. Expect a new version next month!

Jun 04 2018
Jun 04

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

As a digital agency, we develop many platforms and websites for different clients. In the past years, we often encountered the following problem: a developer produces something on his laptop that does not work instantaneously on the laptop of another developer. We had to look for the difference in laptop software and settings. This took time, is frustrating and a complete waste of energy, because this misery can be avoided if all systems are 'containerized' through Docker.

A notorious statement is:

It worked on my machine

This problem is caused by the fact that the laptops / servers differ in, for example:

  • Operating system;
  • PHP version;
  • Database version.

A minimal difference in the settings within an application (eg PHP or MySQL) can also take a long time to discover.

Also a difference in write permissions can take a lot of time to find out.

In addition, each platform or website has its own system requirements anyway: for example, one is ready for PHP 7 and the other requires PHP 5.6.

Docker solves these problems: it ensures that a website always lives in the same persistent environment in terms of operating system, associated applications and settings. Wherever you are running the website: locally or an online server - Mac, Linux or Windows.

Advantage for Drupal product owners (website owner)

  • Faster development and test processes.
  • Higher quality in deliveries due to consistency of underlying architecture.
  • Faster and stable live deployments.
  • Consistent continuous integration, which shortens the time to live of new functions. This applies to both support issues and complete sprints.

Traditional Drupal vs Drupal in Docker containers

Put simply, within Docker the application is linked to the environment, so that it always has the right server stack.

Traditional Drupal
You can see in the above workpiece that within a traditional environment, the Drupal website is separate from the server stack. The server stack therefore differs per environment (laptop or cloud server), giving you the aforementioned problems and frustrations as soon as you want to have it working elsewhere.

Drupal in Docker containers
In the Docker scenario you see that the Drupal website is inextricably linked to the server stack:

  • A bare bone OS (operating system).
  • The required server applications.
  • Libraries and settings.

Drupal bug tracking made easier

For example, the Drupal website always has exactly the same environment and it does not matter where you install it. So independent of laptop or server: it will work the same everywhere. Or, not work anywhere which is also important so you can bug-track in your Drupal website.

Without Drupal in Docker, the latter scenario also happens too often: a bug in the Drupal website can not be reproduced because it dóes work locally.

Plug and play server applications and tools

Where it used to be difficult to install required server applications on your laptop, that is now relatively quickly arranged.

Think about

You download this and it works instantaneously within a container, where your application can connect to.

Continuous Integration (CI) of Drupal applications

Because all environments are always the same, Drupal test trajectories will take less time. Because where you traditionally had to test all environments again - now you know (almost) for sure that once the Drupal application works locally, it works on the test, acceptance and live server.

We are currently further integrating Docker into our CI street. For an interesting article on continuous integration, see here

Why Docker?

There are several variants of virtualization software to solve the 'it worked on my machine' problem.

So why Docker? 5 reasons:

1. Docker is popular

Research shows that Docker is applied on a large scale. Cloud monitor DataDog saw March 2016 13.6 percent of customers running on Docker. A year later that number has grown to 18.8 percent - a growth of almost 40 percent in 12 months time.

RightScale noted in its RightScale 2018 State of the Cloud-report that the implementation of Docker has increased to 49 percent from 35 percent in 2017.

Stats
More than 3.5 million applications have been placed in containers with Docker technology and more than 37 billion containerized applications have been downloaded. source

2. Docker is relatively easy and safe

Compared to other virtualization software, Docker is relatively quick to learn for a dev-ops engineer. In addition, the containerization provides an environment that is faster and easier to keep safe.

3. Docker loves everything and everyone

Docker is also built in such a way that it can be used on other popular dev-ops applications like Puppet, Chef, Vagrant, and Ansible. Source.

4. Embrace by the big

Docker cooperates with Google, Microsoft, Amazon, Cisco, HP, IBM, RedHat, VMWare (source), whereby the necessary standardization was also made.

5. Docker versus other Virtual Machines

There are several similar virtualization techniques, but Docker's container architecture makes the difference. Simply put, you can run multiple applications on one VPS - where other virtualization techniques require one VPS per application.

Docker containers are isolated, but share the underlying operating system and -if necessary- applications and libraries.

With Docker you can use your server resources more efficiently: you can run multiple Docker environments on one VPS - this is not possible with other Virtual Machines. For more benchmarking details herein, see also this blog.

Docker says

Docker is the world’s leading software container platform available for developers, ops and businesses to build, ship and run any app on any infrastructure.

and

No Lock-in: Multi-Linux and Windows. Multi-Cloud.

and

Increase Security, Enable portability and lower costs in 5 days without changing app code.

Source: Docker.com

There is more

Some additional reasons to use Docker:

  • Local SSL relatively easily, via LetsEncrypt.
  • People can collaborate more quickly and easily on an application, without needing all kinds of dev-ops knowledge.
  • Because your application is instant portable you can switch from hosting provider easier.
  • Large projects can be more easily split up into small teams, using CI tools like Jenkins the code from different teams is integrated.
  • Create sandboxes quickly and destroy them, so that everything stays clean.
  • Docker has a large ecosystem.
  • Complex micro-service becomes possible within a container

Misc Docker stuff

Nice fact: lmctfy

Few people know this, but most of you have been using containers for years. Google has its own open-source container technology (Let Me Contain That For You). Every time you use Google functionality (Search, Gmail, Google Docs), you will be assigned a new container. source

Docker's ecosystem

Some popular parts in Docker's ecosystem:

DockerCon

Docker conferences are held annually, this year it takes place in San Francisco. For more info, see Dockercon.com.

Challenges and points for attention

  • Consolidation of Database data
  • Live environments for customers: some customers would like to host themselves, but do not support Docker yet.
  • On MacOS, some Docker related actions are unnecessarily slow.
  • All developers have to master the technique before your organization can completely adopt.

Wrap up

The it worked on my machine problem is a thing of the past with us, but some systems have to be completed but we are almost there.

This saves everyone, including product owners (our customers) a lot of time and energy. Deliveries go faster and better, what more do you want?

Questions or additions? Let me know!

-- Cheers, Joris

Sources

May 07 2018
May 07

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

The new platform for SOS Children's Villages was recently launched, after 3 sprints with a lead time of 3 months and a team of 6 people on average, we are proud to announce this new platform. Special thanks to the SOS team and Digital Project Lead Mandy Plugge - for the award and the excellent cooperation. So, without further ado.., powered by Drupal.., a recap of the first phase:

Discovery with value

SOS Children's Villages had already built up a substantial backlog last year: desired functions for the new website. During the kick-off meeting these functions were discussed and prioritized.

After an analysis of these functionalities it turned out Drupal cms was the most suitable cms (content management system).

The kick-off meeting was part of sprint 0 (project discovery phase), this phase had a lead time of one week. Such a week ensures that all information is mapped to start production. In addition to the aforementioned kick-off meeting, the following will be included during this discovery week:

  • Sharing and submitting existing documentation (style guides, personas, wikis, analytics, etc).
  • Consult and analyze technical infrastructure.
  • Consult roles and responsibilities.
  • Inventory and audits of existing content, assets, resources, design patterns, etc.

But also:

  • Project and product limitations: politics, technical, personnel, resources and assets, brand, etc.
  • The competitive landscape of the product / brand.
  • Brand and its characteristics, visual style, values and personalities.

For more info about a valuable project discovery, check this great blog from Lullabot

Valuable discovery

So, during a discovery phase we want to immediately produce value and not get stuck in an analysis paralysis. We delivered concrete results in the form of:

  1. A concept design.
  2. Clickable wireframes, immediately developed in the cms - in this case Drupal.

Lift off: assessment

After the discovery week we had enough information to plan the project globally and start production. The following information was roughly charted:

  1. Goals: why do we do this project? What do we want to achieve?
  2. Sources: where does the traffic come from?
  3. Target groups: what kind of people come to the website?
  4. Desired functionalities

Drupal project kick-off board

A rough summary of the assessment that resulted from the kick-off meeting:

To facilitate the top goals

The new Drupal platform should facilitate the following goals for SOS Children's Villages for content managers:

  • Optimization of donations
  • Conversion optimization
  • A / B testing
  • Customer journey management
  • CRM integration
  • Mobile first
  • Marketing automation management
  • Being scalable: using future techniques relatively easily
  • Optimization of account management: implementation of a My environment for existing donors
  • Optimization of recruitment
  • Lower bounce rates

Top sources

Where does the website traffic mainly come from:

  • Search engines
  • CPC / Ads
  • Newsletters
  • Direct
  • Social media
  • External sites
  • Hard copy

Top target groups

  • Potential donors
  • Businesses
  • Foundations
  • Schools
  • Existing donors
  • Press
  • Participants of challenges and events
  • Volunteers
  • Applicants

Top site functions

1. Flexible content management
In which user-friendly work can be done on, among other things:

  • Donation forms
  • Landing pages
  • Static pages
  • News
  • Homepage

In the first version of the Drupal platform created, there were almost 300 pages with very diverse content and layout facilitated by the Drupal cms.

2. Form builder
SOS Children's Villages wanted to be able to manage flexible donation forms: create unlimited new ones, configure them and place them on all pages - at any position within that page. Given the desired flexibility, the complex data flows and external integrations, it was decided to develop this in a custom Drupal module.

The following functions were included in this form builder within Drupal:

  • Conditional fields
  • Inline real-time validation
  • Postcode API integration
  • IBAN check
  • Adyen integration
  • SOAP CRM integration (XML WSDL)
  • Personalized thank you pages -and thank you e-mail.

3. Content management workflow
Content management roles were desired so that SOS Children's Villages can determine who does what. This also determines the workflow: how does a page go from draft to published. The Drupal platform also facilitates workflows for modification of existing pages, requiring the review of an editor.

4. Testing
Not a function, but constantly a crucial part for a successful, scalable and fast website. The following test components are included in the overall plan:

  • Peer reviews
  • Functional testing
  • Load testing
  • Pen testing: we tested the platform's hack potential
  • Unit / Behat testing

5. Other desired 1st phase top functions

  • Internal search engine
  • E-commerce tracking using Google Analytics / data layer
  • News & blog
  • Vacancies
  • Press releases
  • Events
  • Project map

An explanation of the above 5 parts:

1. Flexible, consistent content management

A great deal of flexibility for the layout of pages was desired, for this it was not possible to define standard content types and templates - that would limit the content team of SOS Children's Villages too much. That is why we used the Paragraphs technique.

Currently ~ 300 pages are all created within this technique, which suits SOS Children's Villages because they are relatively free in layout, but can not be created outside the house style.

It's good for Lucius too because we do not have to help with creating pages and do not have to (re)write content types. Also code-wise, it is easier because all content goes through the same code and configuration.

Rows

Through this Paragraphs technique, content managers can add rows and add unlimited columns per row. An example of the added rows on the homepage:

Drupal rows and paragraphs

This homepage consists of 6 rows; the content managers of SOS Children's Villages can add, delete and organize rows themselves. Content managers can also set the following per row in the Drupal backend:

Drupal paragraphs content management per row

  1. Does the row have to be displayed in full width? When this option is checked, this row will occupy the entire width of the screen, such as the header image of the frontpage in row 1.
  2. SOS Children's Villages can set the color of the row themselves. To monitor house style, these are limited to a few options.
  3. Content managers can set the margins per row.

Columns in rows

Each row can have columns (paragraphs) added, below is an example of the row 'Where are we active' - this contains 2 columns:

  1. Text
  2. Image

Drupal paragraphs content management images en texts

Different types of columns

In the above example you can already see two of the 7 types of columns available: Text and Image . Currently, the following types of columns can be added to a row by SOS Children's Villages:

Drupal paragraph types content management

These columns can be added per row and removed and ordered using a drag function.

Settings per column

We are going to have a deeper content management level: the content managers of SOS Children's Villages have settings for a specific column in the backend of Drupal. These settings vary by column type (text, image, video, etc). An example of the Image column:

Drupal image paragraphs content management

  1. Make images clickable or not.
  2. Set the background and text color.
  3. The placed image can be changed here.
  4. Insert an additional image.
  5. If multiple images are placed (eg a list of partner logos): indicate how many images are placed per row.
  6. A row consists of 12 width parts, each column can have 1 to 12 width parts set. This way you can determine the width distribution of columns in a row.
  7. Add a new Paragraph (column) in this row.

2. Form builder

A big part of this Drupal platform is the form builder. The content managers of SOS Children's Villages can create and configure forms themselves and place them as a column anywhere on all pages. In this way they can create unlimited forms for all target groups, sources and campaigns. As a result, unlimited A / B tests can also be run for conversion optimization.

Data flow

Per form, content managers can determine how the completed data flows to the required CRM fields.

Conditional fields

Certain selection fields are dependent on a previously chosen option, in the example below you see that when choosing one-time payment two payment methods must be available. But when choosing monthly payment only one payment option may appear.

Drupal conditional form field

Inline real-time validation

Content managers can set how to validate each field and which error message appears. If a donor clicks away from a form element, the entry is immediately checked and feedback is displayed:

Drupal form validation inline

Postcode API

It is linked with the API of Postcode.nl, as soon as you enter your postcode and house number, the system automatically searches for the street and place name. If the postcode is not found, people can enter this information manually. This is necessary in the case of new residential areas, which have not yet been added as official zip codes.

Drupal postal code api integration inline

IBAN check

As soon as a donor enters an IBAN, a check is immediately done via iban.com. It is immediately indicated inline whether the IBAN is correct:

Drupal IBAN api integration inline

Adyen integration

The online payments are handled and linked back via Adyen. The following payment methods are integrated:

  • iDEAL
  • Credit card (MasterCard / Visa)
  • American Express
  • Bank transfer
  • One-off authorization

CRM integration

In the end, all data is processed in the central CRM system of SOS Children's Villages. This CRM is used by SOS Children's villages worldwide.

Thank you page

Once the payment is made, donors see a personalized 'thank you' page. The content managers of SOS Children's Villages can use placeholders, which are filled in for the donors with first name, address, donation amount etc.

There may be any number of 'Thank you' pages generated by the content managers. These pages can be linked to a donation form, so that a personalized thank you message appears, aimed at a specific campaign.

Thank you e-mails

Similar to the thank you pages, everything that has been put together by content managers is also emailed to the donor.

Mobile first

Given that the majority of the donors visit the platform via a mobile device, we have optimized for mobile. Exceptions like the iPad 2 and Samsung Internet are included.

For example, form elements are given a full width, so that they are easily tapable:

Drupal responsive form

3. Content management workflows

Within SOS Children's Villages there are content managers with different roles, within these roles, workflows with revision management are set up. For example, drafts for new and existing pages can be created by a content manager, which can only be published by, for example, an editor.

Drupal workflow content management

Workflows have also been configured for published pages, so that the live pages can be adapted and checked - of course without the public seeing this.

4. Testing

If it ain’t tested, it doesn’t work.

Testing: often a development is pushed under because of time pressure, but we value it a lot and provide enough space in budgets and time for this. The following tests are carried out continuously:

Peer reviews

Developers test each other's code. No matter how good you are as a developer, at a given moment you can be so engrossed that sometimes you do not see your own mistakes. A lot of code and layout is automatically screened by the correct plugins. But a manual check is also necessary, code is screened mutually among others:

  • Coding standards and syntax
  • Architecture
  • Scalability
  • Non-Dry-ness (Don't Repeat Yourself)
  • Security
  • Speed
  • Format files and folders

Functional testing

Functionalities for the end users (content managers and website visitors) are tested manually; as many edge cases as possible are invented to make all scenarios as bug-free as possible. After completion, the platform is once again tested by SOS Children's Villages themselves, their test team ranged from 2 to 10 people per sprint. In this way, the majority of the edge cases were discovered.

Load testing

A slow platform is extremely bad: visitors drop out and your SEO goes to rubbish. That's why we always perform load tests: fire up an increasing amount of traffic on the test server and see when it drops. This must be well above the number of visitors that have been discussed, in this distinction between logged in and logged out is of critical importance.

Pen testing: try hacking the server

Security, an important part, our colleague and ethical hacker Nick has performed pen tests on the server where the new platform eventually went live. This resulted in a number of issues that have been resolved, resulting in an optimally safe platform.

Unit / Behat testing

Unfortunately this was not yet feasible within the current deadline, but we will implement unit and Behat tests in the next sprint.

This way you can ensure that already completed functions are automatically tested as soon as new functions are implemented. Through this automatic testing of already completed items, we know for sure that everything remains stable and high quality is delivered. Also called regression testing. ‘Auto testing your business expectations’, as Behat describes on its homepage.

5. Other functions

Search

The previous version of the website did not contain a search function, in this first sprint we added it -including search suggestions:

Drupal search auto complete

SOS Children's Villages can indicate whether a page is important enough to end up in these search suggestions; all search results are displayed on the extensive search results page anyway:

Drupal search results page

Credential management

The Drupal platform of SOS Children's Villages talks with a total of 6 API’s, these all know log in data that you do not want in hard code - because of security reasons. We therefore store these credentials in a different, secure way.

Redirects

The URLs in this new platform may differ from 'old' URLs. To redirect via a 301 the redirect module is used, this is mainly intended to keep SEO intact and to ensure that links on external sites do not end as a page not found.

E-commerce tracking

Google Analytics was used as E-commerce tracking tool, it was implemented using the Google Tag Manager and the data layer.

It’s alive, alive! Celebrated with cake and champagne

The go live was done in stages, we first did a soft launch followed by the hard launch on 1st February.

In accordance with the agreed deadline

Drupal celebration with cake

Drupal celebration with champagne

Post-go live breathing space and the following sprints

After the go-live, 2 weeks of breathing space was scheduled for any hotfixes that might be needed. There were no real hotfixes needed, except for a few (small) 'highly desirable functions'. These were immediately implemented the week after going live.

In the coming period it will be built up considerably, among other things will be added as an extension:

  • Login section for donors
  • VWO integration
  • Cloning pages
  • Integration with Project management system
  • World map

Nerd alert

Top techniques and tools that were used for this development:

Nerd alert

Top technique used

Installed Drupal modules

In addition to the 4 custom developed Drupal modules, the following contrib modules were used:

Wrap up

Alrighty, that’s it for now. A cool project to work on: great technique, challenging and a fun, professional team. Deadline met, customer happy, what more can I say? :) The progress compared to the previous version is also not small: from a cumbersome, difficult to use, outdated content management system - to a scalable and user-friendly Drupal platform. Questions or remarks? Let me know!

Apr 09 2018
Apr 09

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

The biggest ‘module’ being updated was the Drupal core of course: Drupal 8.5.0 was released about a month ago, read more. Also, everything else what stood out to the module updates of last month, enjoy:

1. Password Policy

Drupal accepts all passwords made by users for their user account, even if it only consists of one letter. This modules refines that, you can determine the password policy of your Drupal system, for example:

  • at least 8 characters;
  • at least 1 special character;
  • can’t be the same as your username or email address;
  • can’t be a password which has been used previously.

https://www.drupal.org/project/password_policy

2. Content- Security- Policy

Content Security Policy (CSP) is an extra security layer, with Cross Site Scripting (XSS) and injection attacks, for example SQL injection. These attacks are used for all kinds of purposes, from identity theft to defacing websites or the spread of malware.

This module can automatically generate Content- Security- Policy headers for you, after you made the right settings in the Drupal backend.

https://www.drupal.org/project/csp

3. Comment Notify

Send a notification to a Drupal content manager or administrator as soon as a comment is posted by a website visitor. This can be set up for both anonymous as logged in visitors.

https://www.drupal.org/project/comment_notify

4. Rest menu items

Headless Drupal remains fresh, and rightfully so. We also use some installations enthusiastically, like this website for example.

This modules helps with setting up an endpoint to serve out the menu items. You can give them query parameters to determine how much menu level you get back in this web service.

You can use the json data to build a menu in a frontend framework like React, Angular or in an iOS / Android App.

https://www.drupal.org/project/rest_menu_items

5. Breakpoints

A website which isn’t responsive, isn’t worth much nowadays. This Drupal module facilitates breakpoint management for your responsive web design, allowing the right media queries to be set up.

https://www.drupal.org/project/breakpoints

6. Simple hierarchical select

When a content manager has to make a selection which involves categories and subcategories, this way of selecting might be useful to him.

https://www.drupal.org/project/shs

7. Block Visibility Groups

Within the block system in the Drupal core, you can determine per block where to block needs to go and who is allowed to see that block. But you can’t do it in bulk for a group of blocks.

With this Drupal module you can group blocks and configure per block group who is allowed to see what.

https://www.drupal.org/project/block_visibility_groups

8. Empty Page

Whenever we develop a system within Drupal, we always add a route and facilitate the html dynamically to the screen of the visitor of said page in Drupal via controllers, services and Twig files. It’s possible to work with blocks, ensuring that data keeps being positioned well via blocks.

If you are not a developer, in some use cases you’d want to make a page with the help of blocks alone. Like a landing page, which doesn’t need a node.

Within the Drupal core you can never put your block anywhere in such a scenario, as you don’t have a page to put the block.

This module solves this because you can make an empty page and you can leave your blocks on that empty page. This prevents you from tediously making an empty node, generating unnecessary overhead. Exactly the problem the developer of this module intends to solve.

https://www.drupal.org/project/empty_page

9. EU Cookie Compliance

Shows a notification in the footer of your Drupal site, where visitors agree to your cookie policy, or click for more information. This module makes it easy for you to comply with this mandatory notification.

https://www.drupal.org/project/eu_cookie_compliance

10. Shield

We use this module in almost every Drupal installation when it comes to test- and acceptation environments. It completely shields your website from the outside world, unless you log in of course. Anonymous visitors and search engines won’t be able to reach our test environment, but we and our customers can.

Previously we used to do this by manually making a .htpasswd, which is kind of cumbersome and is getting in the way locally as well, as you also need to incorporate it in .htaccess.

https://www.drupal.org/project/shield

11. Access unpublished

Within the Drupal core it isn’t possible to have unpublished content being looked at by anonymous website visitors. Not even when they have a direct link of said item.

It is now possible with this module, useful for content checkers and proofreaders for example: they won’t need a log in for the website, making it easy to work with and secure.

(!) please note that the page can be indexed by Google, thereby making it findable for everybody. Don’t keep a draft open like this for too long and definitely don’t share sensitive information via this route.

https://www.drupal.org/project/access_unpublished

12. Anonymous login

Previously, we developed a similar custom code in Lus to use this feature: redirect all non- logged in users to the login page.

This Drupal module offers a similar feature: it also redirects anonymous visitors, but only when they request an admin path. When someone successfully logs in, that someone will be redirected to the original admin path from where he entered.

https://www.drupal.org/project/anonymous_login

13. Simplelogin

Generates a different login page, which is more simple, more compact and potentially more beautiful. You can also add a nice background image fit it in your own house- style.

https://www.drupal.org/project/simplelogin

14. BeautyTips


Shows tips when someone hovers over a certain text with his mouse, similar to the Bootstrap tooltip.

https://www.drupal.org/project/beautytips

15. Schema.org Metatag

A great addition to your website for search engine optimization (SEO). It enriches your html, allowing search engines to better ‘read’ your Drupal system.

https://www.drupal.org/project/schema_metatag

16. Login History

Drupal core doesn’t keep a history of logins, but there are scenarios where this is necessary. Among other things, this module generates:

  • rough overview of all logins;
  • logins from individual users;
  • a block with login data for the visitors themselves: when was his last login and a link to his login history.

https://www.drupal.org/project/login_history

17. Minify JS

Drupal optimization tool, this module minifies all your JavaScript, making your JavaScript files smaller and less heavy for a network and browser.

https://www.drupal.org/project/minifyjs

18. Minify Source HTML

Similar to ‘Minify JS’, but for the generated html.

https://www.drupal.org/project/minifyhtml

19. IMCE Rename (D8)

IMCE is a popular tool for Drupal content managers to manage social media. This plugin allows names of files to be changed, ensuring better structuring and management.

https://www.drupal.org/project/imce_rename_plugin

20. Create and continue


A useful tool for when you need to add a lot of content, this module generates an extra button under your content item: ‘Save and add another’. You can continue with adding the next item immediately.

https://www.drupal.org/project/createandcontinue

21. Block Refresh

Want to keep information in a Drupal block up to date, even when the page isn’t refreshed by the visitor? No problem, this module will take care of it for you:

  • automatically refresh the content in a block after xx seconds;
  • visitors can refresh manually;
  • refresh after page refresh;
  • can optionally be excluded in Drupal’s page cache or every external cache (like Varnish).

https://www.drupal.org/project/block_refresh

22. Single Date Time Picker

Easy adding of a required date and time.

https://www.drupal.org/project/single_datetime

23. Secure Login

Forces logging in via a secure line, in order to optimally protect your visitors’ privacy.

https://www.drupal.org/project/securelogin

24. Menu target

Not available in Drupal core: specify per menu item if clicked link for visitors should be opened in current or in a new screen. Install this module et voilá: now you can specify if you want to have it opened in current or in a new screen.
https://www.drupal.org/project/menu_target

25. Persistent Login

Drupal doesn’t have a standard ‘remember me’ feature in the login screen. This module does offer that feature and some extra security measures have been taken: it doesn’t implement a standard longer ‘PHP session time”.

You can set up the following:

  • how long the users remain logged in, before they need to enter their information again;
  • how many persistent sessions one Drupal user is allowed to have at the same time;
  • determine for which pages the user does have to log in again, for example: when you want to change your user information.

https://www.drupal.org/project/persistent_login

26. CacheExclude

Without active page caching a Drupal website won’t be able to handle a lot of visitors, that’s why it standardly active. But it can happen that you want to exclude certain pages from that cache, because realtime/ dynamic data is shown. When you need a random image or changing content, you might want to check this Drupal module out.
https://www.drupal.org/project/cacheexclude

Wrap up

Alright, that's it for now. I hope that this information allows you to further enrich, optimize your Drupal site and make it more user friendly.
Questions? Let me know!

Mar 30 2018
Mar 30

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

Last week there was a Public Service Announcement done by the Drupal security team: a highly critical security update would be released last Wednesday, around 20.00h Dutch time. So we planned this release and put up a little patch party to facilitate that evening:

  • Put all sites in maintenance mode.
  • Hotfix all sites.
  • Testing.
  • Bring back to live.

It took a little while longer before the release was done, it came around 21.30u Dutch time. We had all our sites patched and back in business around 22.30u.

Tweet away

So during the waiting people started getting bored and posted a lot of tweets, here are a few cool ones:

Drupal security team hesitating publishing security patches#drupalgeddon pic.twitter.com/Y96nPfZETi

— zigazou (@zigazou) March 28, 2018

Today the web will blackout.

All #drupal sites will go in to maintenance mode for a security update, hitting 10% of the top 1M sites

In 9 month later we will see the results...

— bert boerland (@bertboerland) March 28, 2018

#drupalsecurity #drupal pic.twitter.com/1BSg7nqkhm

— James Pegram (@jamespegram) March 28, 2018

Waiting for the Drupal patch release like #Drupal #drupalgeddon #drupalsecurity pic.twitter.com/oyqjobeSAq

— Gabs (@gabstuff) March 28, 2018

When you wait for Drupal Security Release

All credits to @benfrancesco (genius)#drupal #drupalsecurity @drupalsecurity pic.twitter.com/8blRri4cZl

— Stefano Mainardi (@stefanomainardi) March 28, 2018

Me the moment the #drupal security update becomes available pic.twitter.com/SXNBWvWX3c

— Web Assistant (@_webassistant_) March 28, 2018

Yo, esperando a ver qué trae el patch de Drupal. pic.twitter.com/cWSO5DIKOO

— Blockchain professional services (@nocabeotraletra) March 28, 2018

#drupal #drupalgeddon2 pic.twitter.com/wnUgBsff7D

— Web-Beest (@WebBeest) March 28, 2018

Waiting for #drupal security update like this pic.twitter.com/gNx4KXgRPN

— Vlad Bo (@bobowka112) March 28, 2018

Refresh / twiddle thumbs / repeat. #drupal
(Also, take your time @drupalsecurity rockstars. Am patient, as long as the end result works.) pic.twitter.com/YTSsgaKYY2

— Kate B (@keb36) March 28, 2018

Pretty much all #Drupal developers/agencies around the world right now...!#drupalsecurity #drupalgeddon2 #tense #poised #Tminus30minutes #TheAnticipationIsKillingMe pic.twitter.com/AzCObJD268

— Steve Allen (@ttesteve) March 28, 2018

Pronovix is ready and fully prepared for the critical Drupal security release! :) #drupal #drupalsecurity #drupalgeddon pic.twitter.com/0A3c4HNnj0

— pronovix (@pronovix) March 28, 2018

Still waiting #drupalsecurity #drupal #drupalgeddon pic.twitter.com/161mwEcVF0

— Gabs (@gabstuff) March 28, 2018

Hey @drupalassoc! We're having a @drupal update party! pic.twitter.com/G0ti9BaKXj

— netkata (@netkata) March 28, 2018

Wachten op Drupal security update... Duurt lang!! #drupal pic.twitter.com/AZoEecBCjv

— Dominique van Gimst (@dvangimst) March 28, 2018

The entire Drupal community be like... pic.twitter.com/8oYm9zSWGY

— Dale Trexel (@DaleTrexel) March 28, 2018

Bring it on #Drupalgeddon!! #Drupal #Security pic.twitter.com/aleMynEELm

— Taco Potze˙ (@tacopotze) March 28, 2018

And we joined the party :)

#drupal patching party in full effect right now :) pic.twitter.com/LLZUIRTFQh

— Lucius Digital (@lucius_digital) March 28, 2018

Ready for #drupal #security release, all sites in maintenance | #readytorumble ! pic.twitter.com/desNITN9sS

— Lucius Digital (@lucius_digital) March 28, 2018

Mar 19 2018
Mar 19

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

Recently we produced realtime messaging platform 'Lus' in our labs, but why and how?

Background story

A few years ago we developed OpenLucius, still a popular open source Drupal platform which could be used as social intranet, project management and/ or file management.

But at a certain point we also appreciated the value of popular realtime communication apps like Slack and Trello. Even though OpenLucius also has a task board and messaging, they aren’t in realtime. Neither does it have group messaging in channels, like they have in Slack.

Optimization of communication

We wanted to use these features to further optimize our projects and communication, both internally as well as externally, with customers and suppliers.

But Slack and Trello missed some features which are crucial for our business processes and its constant optimization. For example, we’d also liked to:

  • keep our data in-house;
  • have a platform that caters to and can be expand on our business processes;
  • have one consistent system instead of multiple app islands, where info lives incoherently.

We were also very eager to master the modern realtime techniques in Node.js with help of Socket.io.

The Node.js realtime/ streaming techniques are also being used by platforms like PayPal, Spotify, Netflix and Uber by the way.

Introducing Lus: realtime communication platform

That’s why we developed Lus in our Lab. Lus has bundled all functions (well, the basics) we saw spread across other systems into one. It's a realtime messaging platform where you can optionally use:

  • projects and tasks;
  • clocking and budget management;
  • documentation (wiki).

Successful experiment turns into mature product

What started out as a lab experiment, turned into a success in the field. Customers inquired about the product. Since then it has grown into a mature platform, which is being run by its first customers.

Currently we’re also developing iOS and Android apps and the necessary API for it as well.

What’s next

We’ll keep on developing the product based on feedback, mainly making current features more user-friendly and optimising code on scalability . At some point we hope to release it as Drupal distribution, just like we did with OpenLucius.

Functional details

Check the Lus website and Lus docs website.

Teaser screenshots

Realtime Messaging

Realtime messaging in Lus

Tasks

Realtime tasks in Lus

Mentions

Mentions in Lus

Realtime file sharing

Realtime file sharing in Lus

Your thoughts matter

As said, we like feedback. So what's your take on building this in Drupal / Node.js ? This can be from a technical -or functional point of view.

Please let me know in the comments!

Mar 14 2018
Mar 14

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

Never having to remember your Drupal passwords again, how great would that be? It appears the working without passwords even is the most secure option. But how is that possible?

Lately I have been experimenting with Medium: a great blog platform with built in social functionalities. We might have even migrated our blog, because I was reading a lot of positive stories about it. Eventually we decided against migrating.

Anyway, that wasn’t the subject for this blog. What I noticed about Medium: you can’t manage a password anywhere. Logging in and registering via email goes as follows:

I recognise this from all Drupal systems we are managing: for security reasons we never register any of their passwords. So when we log in, we are never doing this through a password, but with a one-time login-link, just like Medium.

You will remain logged in for a few days, and as long as you remain active, you won’t have to ask for the login link every time.

Wake up

I told this to several people and their first reaction usually is: huh? But what if someone has access to your email? This allows that person to login? Wake up: if someone has hacked your email, he can log in to anything. Into all your accounts and into all your systems. Because all internet services work with a ‘forgot password’ function which sends a one-time login-link to your email, allowing you to change your password.

Authentication: serious business

All internet platforms want to make their login process as secure and as simple as possible, from all devices imaginable. But they are hard to remember, sometimes guessable and a lot of people re-use the same (even though they shouldn’t). They are also hard to type in on your smartphone, especially if you are required to use special characters – it’s so annoying to type those!

Wake up 2: without passwords it’s more secure

It goes against your gut feeling, but a system without passwords is more secure than one with passwords. As soon as someone hacks your password, that someone has access to said website until you change your password, usually never. It could be that you never notice that you were hacked and someone gained access to your account.

If you use an email-only-system, the following points should be taken into account:

  • Have the login-link expire quickly: after 15 minutes already.
  • Make sure the login-link can only be used once.
  • Send a notification email if someone tries to log in from an unusual position (browser or physically).

Drupal can facilitate all of those.

Shifting security

If your website works without passwords, it means that you are shifting the security aspect to the email provider and it may look like you are an easy breeder. But security at email providers should be high top utmost priority number one anyway.

Your website login is as secure as the users’ email provider.

Getting new users easier

Another marketing advantage: at email only login, registration is as easy as logging in itself. This lowers the threshold to start; not having to come up with a username and password anymore.

Password frustrations

By working without passwords you will also get rid of the following frustrations:

  • Entering it on a smartphone: ever tried to type in a password on a smartphone? Especially with special characters…simply hell!
  • Brute force attacks: mature systems are protected against brute force attacks with the help of ‘flood control’, which prevents you from logging in after 5 attempts. Necessary to keep everything secure, yet annoying for users, because they have to wait for a while before they can log in once again. It’s just waiting to receive helpdesk calls.
  • Password strength meters: these are being used to make sure that people pick strong passwords. But in reality very little users understand them, and are ignored by many.

Two factor authentication

Another good extra function for logging in is the use of Two Factor Authentication. This is an extra security measure, and the two factors are: “something you know” (a password) and “something you have” (usually a smartphone). But it seems that many users won’t enable this on supporting platforms.
It is advisable to protect the login of your email with two factor authentication anyway because

Hacked email = hacker has access to all your systems by one-time-login-link.

Hacked website? No problem

At least.. not in the password context: if you have an email-only login system, it means that no passwords will be saved on the hacked database, and no user passwords are to be found. ¯_(ツ)_/¯

Because many people use one password for all their accounts, if the database contains passwords, a hacker will gain access to a lot places.

A mature website’s database has encrypted and salted passwords, but smart robots will eventually always be able to uncover passwords anyway.

Wrap up

Right, first I’m going to change my email password and enable two-factor authentication. I can’t find any reason anymore to work with passwords on the internet. Just optimally secure your email all the time and go.

Or am I missing something here?

Mar 09 2018
Mar 09

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

Per May 25th 2018, the General Data Protection Regulation comes into effect, making it advisable to have an extra check on the security of your data. Here are some tips on securing files in Drupal:

Paris is always a great idea

When we left for Paris for new years’, we needed a cat sitter. I looked around and found Pawshake: an international platform which soon provided us with someone. I quickly realized it was a Drupal platform, so I made a profile on it and decided to test the waters: is my profile picture being protected…? And it appears it doesn’t seem that way! Anyone can see my picture without logging in. You can check it yourself, it’s not great. How they could fix it:

Public vs Private files

Generically speaking, there are two kinds of files, when you manage a website- or app: public or private. Technically speaking you will have to decide how your content management system will manage those files and how to apply the correct security on them. This depends on the kind of services you are providing with your website- or app.

Public files

These are primarily used by websites with public content, with nobody logging in (except for content managers and admins) and which are mainly used to provide information regarding products and/ or services.

Private files

These are primarily used in case of a web application such as:

  • Social intranet;
  • Online community;
  • Chat application.

For the last one you’d like all files being uploaded by a user not to be visible for just everybody – and you’ll have to design your system accordingly.

Private and public files in Drupal

Drupal contains an extensive file management system which can facilitate public and private files. You can reach the settings via the configuration screen:

As soon as you click on the File system the details will appear:

  1. Directory where the public files are being saved.
  2. The absolute URL which is put in front of all public files
  3. Directory where the private files are being saved, in this case not activated yet.
  4. Standard way how a file can be downloaded, as soon as the private files directory has been set up, you’re also able to opt for private.
  5. Time before temporary/ orphaned files will be removed permanently. This concerns all files with status 0 in the database.

Activate Private files in Drupal.

The above is a standard installation, with the files set on public. But as described, you might want to protect your files, making them accessible to users with the right permission only – instead of the whole, anonymous world. This is how to do it:

Configure the private files directory in settings.php:

In this case you opt for ../files. Makes sure this directory is outside the webroot, otherwise there might be a chance that your private files are publicly available anyway. If you empty your caches after that (Flush all caches) you can pick you pick private files as default download method:

  1. The path as set in settings.php
  2. Adjust the /tmp directory, ensuring temporary files to also be protected.
  3. Set private files as default download method.

Now, Drupal is configured to treat all files as private: if visitors want to download a file, or want to look at an image for example, it will be via a Drupal system call and not by directly invoking the file by the browser. In that call Drupal decides whether the visitor concerned has permission to download the file.

Determining yourself whether someone is allowed to download a private file or not with the help of hook_file_download().

Currently, we are building a chat application based on Drupal and NodeJS: Lus. This has channels (group chats), in which files can be shared. Of course we only want people in the channel concerned to be able to download the files from that group. For example, if you’re not in group A, it ought to be impossible to approach files in that group A.

For more information regarding Lus, see lus.digital & docs.lus.digital.

This concerns a custom web-app, that’s why Drupal doesn’t have suitable permissions to sufficiently secure this. but no worries: hook_file_download() to the rescue, here is a code which we produced in our .module file:

Drupal recognizes the hook_file_download(),making sure it will invoke this function when someone is about to download a file via Drupal’s private file system.

What this code basically does:

  1. Checking who the current user is.
  2. Checking whether that user is in the channel to which the file has been uploaded.
  3. When the user is in the channel: loading file and returning file, making it available for the visitor concerned.
  4. When the user is not in the channel concerned: provides a not found.

Wrap up

Generically speaking, there are public and private files on the internet. Determine which file system you need, before you start producing an online platform, website or app. If you deploy Drupal, I hope that you can structure the files properly and securely with the information as provided above. Any questions? Let me know!

Image Credits

Feb 19 2018
Feb 19

It took a while before I could write a new edition, I was just busy with the production of customer projects. Here again with a brand new version, what struck me in module updates in the past month:

1. D8 Editor Advanced link

A popular module that extends the standard editor in Drupal 8 with additional options for managing links. You can now add the following attributes:

  • title
  • class
  • id
  • target
  • rel

2. Password strength

Default password checks are stupid and annoying for the user: they can check the entered password meets certain rules, such as the number of characters and varying types herein (symbols, numbers, capital letters etc.).

This is a stupid way of checking because the password ‘Welcome123’ is accepted, while it is easy to guess.

This module enables a secure password policy by “pattern-matching” and “entropy calculation”. Almost every type of password is accepted, as long as it has sufficient entropy.

Source

How it works

Instead of checking strict rules, this module calculates the expected time a brute force attack needs to retrieve the password. This is calculated based on underlying patterns:

  • Words that appear in a standard dictionary, common first and surnames and other default passwords.
  • Words from a dictionary, but written in Leet / 1337. For example, where the “e” is written as a three and “a” like an @.
  • A standard sequence of letters like “abcdef”, “qwerty” or “123456”
  • Dates or years.

This module has been around since 2007, I wonder why I only encounter this now :) It is currently available in alpha for Drupal 8 and stable for Drupal 7 available — it is supported by Acquia and Card.

So if you want people to not have to bother to look for a password such as “one special character, 1 upper case and at least 8 characters’, then this module offers a solution.

3. Better Field Descriptions

In order to give content managers issues, it is possible to write an explanation of all content fields that they import. But the standard explanation in a field in the backend of Drupal are often irrelevant, to not apply these generic texts in the implemented *user story* of the installation concerned.

After installing this module you can:

  • Content managers have their own explanation text per field.
  • Set where it stands: above or below the field.
  • The explanatory style that you like.

4. Better login

Want to make the standard Drupal login screen better? Then install this module and you are good to go: through template overrides you can then do the required further tuning of the layout of the login screen.

5. Ridiculously Responsive Social Sharing Buttons

Another social sharing module, but as you see in the title: these are terribly responsive. The icons are SVG based and you need no external services such as AddThis.

Advantage: you’re less dependent and have your data in hand, downside: you have less functionality- such as comprehensive statistics.

6. Flush Cache

If you are not using Drush or Drupal console works then you can Drupal caches flush via “the ‘Flush all caches” button in the Drupal backend. But in a production environment, you will almost never flush all caches, it can cause severe performance problems.

This module solves that problem: install it and you have more control over the caches you want to flush.

7. Multiple Selects

Have your Drupal content management easier with ‘multiple selects’ administration, this image seems to me to speak for itself:

8. Neutral paths

If you are running a multilingual Drupal website, visitors can see the content in one language: the currently active language. Sometimes you would like to see pages in another language. In addition: content managers / Drupal administrators usually want English and not the backend *default language*, in our case, often Dutch.

Issue tracking for example, much easier if the backend is in English: Drupal documentation and support in English is much more available than in Dutch.

This module ensures that you can visit other pages in another language than the default. And can navigate the backend in English, while frontend is in another language.

9. Password Reset Landing Page (PRLR)

Drupal core includes a ‘password’ function: If you have forgotten your password then you can request a one-time login link that is automatically mailed to you.

If you click on the login link, you will see a screen with a login button. Once you click the ‘login’ button you are logged in and you are redirected to your profile page — that’s it.

You are in this situation where your password is lost / forgotten. You are not required to change your password. This is not usually done, so people often endlessly request login links.

This module solves this: the screen where you end up after clicking on the login link not only contains a login button, but also a function to change your password immediately.

10. Auto Purge Users

The user list in Drupal is usually not or hardly ever administered. If people have long been inactive or have not completed their registration, the account can usually be removed to avoid overhead and security issues.

This module does it for you automatically, it checks inactivity below a point and blocks users if they meet:

  • Certain time inactive.
  • Account never activated after registration.
  • Not been logged in for a period of time.

Not a popular module, but in the case of an example Drupal social intranet it can come in handy.

11. Vertical Tabs Config

Want to influence the order of the Drupal tabs? Or do you want some tabs to not show all of your content manager? To keep tabs simple and usable you can install this module: select which tabs to show and in what order.

Modules with similar functions: Simplify and Hide vertical tabs.

12. Custom Search

The default Drupal search is fine, but really standard: you have few options to tune the engine. After installing this module, changes that you can then include are:

  • Change the default label in the search box.
  • Set a default text in the search box.
  • Tune ‘Advanced Search’.
  • Change the text on the “submit button”.

And much more, see module page:

13. Persistent Login

Drupal 8 core does not have a ‘remember password’ function when you log in. You can remain automatically logged for some time, but that is based on a PHP session. This module does not, you can also:

  • How long users can stay logged in.
  • How many places a person can be logged in at once.
  • Select certain pages that the user must log in again at. These are usually pages where more sensitive information is available.
  • Allow the user to delete all his logins themself.

14. Realistic Dummy Content

Wisdom

Using the Devel module you can automatically generate content so you can see if your modules / themes work well. But it gives an unrealistic picture of the end result, this module generates more realistic images and texts.

15. Password Policy

Although I am a fan of the aforementioned ‘Password strength’ module, this can also be useful if you want to make a specific password policy on your Drupal website.

16. Mass Password Reset

This module, we often use to implement Drupal social intranet: previously, all users and content created by an administrator on a test environment, without it people were informed through e-mail.

Once the social intranet went live, we sent all users at once an email with a login link via this module; the system was live!

Wrap Up

So far that’s what I noticed last month in Drupal modules, stay tuned for more fat Drupal content!

Source header image

Feb 12 2018
Feb 12
Login or get out!

Currently we are busy constructing the production of a realtime messaging platform in Drupal and NodeJS, look at it as a ‘WhatsApp for Business’. This Drupal system works like a web app; logging in is mandatory. How do you make sure that logged out visitors must log in to Drupal 8 before they are allowed to continue?

Drupal has many out-of-the-box functionalities, as well as a powerful API, but because it has so many functions many tracks are standardly available for anonymous visitors. We’d want to make all paths unreachable, until you log in.

That means that visitors always will be redirected to the login screen as long as they aren’t logged in. You wouldn’t want an anonymous user reaching internal news on the homepage.

Redirect URL in Drupal 8

Basically, we want all url’s / paths be made unavailable for non-logged in visitors, except explicitly specified pages like:

  • Login (/user)
  • Forgot password (/user/password)
  • Login link (user/reset/login)

in Drupal 7 you could use the module Logintoboggan for that purpose. You could also easily work around it in hook_init() or hook_boot() in a custom Drupal 7 module.

Quest

This was quite a puzzle, and we soon found some examples as well as exceptions. Everytime it didn’t work how we wanted it to. This example was the most useful.

Implementation in Drupal 8

Eventually, we got it working with the help of following code in a custom Drupal 8 module:

services.yml

put this file in your module root, and format yourmodulename.services.yml:

RedirectAnonymousSubscriber.php

Put the file RedirectAnonymousSubscriber.php in folder /src/EventSubscriber/ and do your custom thing:

This code builds on symfony’s EventSubscriber, the framework on which Drupal8 has been built.

Wrap up

Alright, that’s it. I hope the information as described will help you to always redirect visitors to the login page. Questions or feedback? Let me know!

Dec 20 2017
Dec 20

We are always striving for optimal Drupal contrib modules use. Yet, in some cases they won’t meet the required standards, desires, stability and/ or security. That’s when we develop tailor made codes; sometimes with the help of other modules’ snippets.

When we have to do tailor made development, we’ll always strive to make it generic, making it possible to produce a contrib module, which can be released on Drupal.org. We’ll always do this in consultation with the client.

Such an example is the just released module ‘Conditional Redirect’: some modules were close, but just didn’t meet the requirements.

Shield Drupal with a login

It’s about the following functionality: imagine you are producing a system in Drupal meant for internal use, like a kind of intranet or management app.

This system has to be globally available, but only accessible after people logged in. In that case you would want people who are not yet logged in linked to the login page.

As extra wish: certain pages do have to be publicly accessible and should be configured as exception.

Above is realized in the released module: after installation all logged out (anonymous) visitors will be redirected to the login page. Exceptions can be configured as well:

  • Content types;
  • Specific pages;
  • Specific menu links

Download the module here

Wrap up

Alright, that’s it for now. Questions or comments regarding this module? Let us know in the comments, or shoot an issue on the Drupal.org project page.

Joris Snoek | Founder @ Lucius Digital | #Amsterdam
Dec 20 2017
Dec 20

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

Nederlandse versie van dit blog

The Popup question redirect module allows Drupal site builders to show website visitors a pop-up in which a question can be asked. If the vistor clicks "Yes" they will be redirected to a given webpage.

Examples of use cases:

  • Request for filling out a survey.
  • To offer a promotion.
  • Highlight a certain (news) page.

Drupal website visitor features:

  • A "Yes" button, visitor will be directed to desired (external) web page.
  • 'Remind me later', show the pop-up again later.
  • "Do not show this again", pop-up will not be shown again.

Drupal backend configuration options

There are configuration options in the Drupal backend:

  • Set popup title and message.
  • Text field to set the redirect link.
  • 'Remind me later' time.
  • Finally, you can enter a list of IP addresses, so the popup will not be shown for visitor from a certain IP / building.

Download here

Credits header foto

Nov 23 2017
Nov 23

Currently we are busy building a realtime chat platform called Lus. In Lus we connected Drupal to NodeJS for a blazing fast system, with realtime communication (chats, tasks & file sharing).

Within Lus, people can cooperate in ‘channels’, comparable to the WhatsApp groups. Team communication takes place in these channels. A channels works best if you organize it around a certain topic, like ‘sales’.

As soon as a new channel is being started, existing team members can be added in the easiest way imaginable: with the help of a ‘auto-complete field’: as soon as you start typing, suggestions will immediately pop up, in this case for names of team members:

This auto-complete field has been custom developed by us, in part because our Drupal installation uses custom database charts which aren’t available in Drupal 8 core. How did we do it:

1. The form element

To get started we need the Drupal auto complete form element, allowing users on the front end to pick the desired team members. We define this as follows:

Because we use #autocomplete_route_name element, Drupal knows that such a form element has to be ignored on the front end.

2. Custom route

As you can see in the form element, a reference is made to the route, from which data has to be obtained. We’ll add these in the .routing.yml file:

This routing.yml file is already in our module’s root.

3. Controller with custom query

In the route we just created we refer to a custom controller AutocompleteController, method handleAutocomplete. This one can be found in the map moduleroot/src/Controller:

This method ensures that the right data is collected from the data base and will be given back correctly formatted as well.

Wrap it up

As you can see, suggestions are being given for code corrections. In an optimization run we’ll get onto it. For now, at least the data is coming though correctly and we can create new channels with existing team members by means of a auto-complete field.

Credits header foto: ricardo Gomez Angel

Nov 14 2017
Nov 14

Our year-end rush is in full swing. Briefly looking back, we have had a good year! For the last time this year, the module updates, and what struck me:

1. Block Refresh

A block in Drupal will not change its content by itself. Perhaps you would like a block to refresh automatically: so that visitors of your Drupal website will get to see for example every 15 seconds a new article, or an urgent message coming through without people having to refresh their page.

After installing this module you can set this per block in three different ways:

  • Automatically via a timer (f.e. every 15 seconds).
  • Manually with the aid of a ‘refresh link’.
  • Once per ‘page load’.

Even when you have enabled Drupal’s block cache this module can make sure you will get to see new content.

(Drupal 7)
 https://www.drupal.org/project/block_refresh

2. Simplify

If you look at a standard Drupal form to add, for example, a new page, it looks a bit messy. There is a lot of information on the screen, which is redundant for content managers. This commonly used module cleans up that junk.

(Drupal 7 & Drupal 8)
 https://www.drupal.org/project/simplify

3. W3C Validator

A W3C validated web page means that the HTML formatting is correct according to the standards. This means that the structure is sound and that probably all browsers and screen readers can properly read the page; this is also good for your SEO. This module helps you with W3C validations:

  • It validates new pages or nodes you are creating.
  • It can generate a report of all your pages.

(Drupal 7 & Drupal 8)
 https://www.drupal.org/project/w3c_validator

4. Search 404

A standard 404 page (‘page not found’) gives rather poor information to your visitors. This popular module will change that: it does not show a static page, but will search into your Drupal system and will show your visitors results of pages they might have been looking for.

This feature will also have a positive impact on the SEO of your Drupal system.

(Drupal 7 & Drupal 8 alpha)
 https://www.drupal.org/project/search404

5. Custom Search

The default search field in Drupal is pretty straight forward: a search box and a ‘search’ button. This module expands this with more advanced search options:

Configure text:

And some config options:

There are more advanced options, install the module and see which ones are of interest to you.

FYI: The Drupal 8 version gave me an error during the installation in Drupal 8.0.1

(Drupal 7 & Drupal 8 beta)
 https://www.drupal.org/project/custom_search

6. Block by date

Let’s assume you want to place a notification at a given time within a block in your Drupal site. For example, an offer, notification or maintenance message. Then this module can come in handy: it can automatically switch a block between a specific date and time on and off for you.

(Drupal 7)
 https://www.drupal.org/project/block_date

7. Scheduled maintenance

It is preferred to announce a scheduled maintenance on a website. So users know that the site — or part of it — is temporarily unavailable. Within the Drupal core functionality it is possible to enable the ‘maintenance module’ for your website, but it is only possible to turn it off or on.

With this module you can automatically inform your website visitors (or social intranet) about a scheduled maintenance:

  • You can set a message with the announcement.
  • Specify how long up front this message needs to be visible.
  • Specify when Drupal should actually go into the maintenance mode.

(Drupal 7 & Drupal 8 alpha)
 https://www.drupal.org/project/scheduled_maintenance

8. Select2 Field Widget

A better and more useful way to enable your content managers to make a selection.

(Drupal 7)
 https://www.drupal.org/project/select2widget

9. Back to top

Very popular since the rise of responsive Drupal websites: the ‘back to top’ button. Convenient for visitors with a mobile or tablet.

(Drupal 7 & Drupal 8 beta)
 https://www.drupal.org/project/back_to_top

10. Form Bloc IP — FBIp (Drupal 7 & Drupal 8)

Maybe you encountered this problem before: a user tries to log in, but forgot his/her password. After several failed attempts Drupal blocks the user for some time. And that block cannot be made undone by an admin in the Drupal backend; only directly via the database.

This module is solving that problem and other problems:

  • An admin screen to unblock blocked users.
  • Log IP addresses of spammers and block them.
  • Create a white list of IP addresses; only those IP’s can from now on send (login) forms.

https://www.drupal.org/project/fbip

11. Safe cache_form Clear

Drupal’s cache_form table can quickly become quite large and clog the system, but with a ‘clear all caches’ Drupal is throwing away everything that can cause performance issues.

This module is solving that: it will only clear small bundles (chunks) of this cache table. Easily manageable chunks for Drupal which will avoid performance issues.

It only works in combination with database cache tables, not when you are using for example external caches likes Memcache of Filecache.

(Drupal 7)
 https://www.drupal.org/project/safe_cache_form_clear

12. Search API attachments

By default Drupal indexes only content from nodes. If you are also working with attachments in Drupal I can imagine that you also want to index the contents of those files, so that they are included when visitors are performing searches in your Drupal site.

This module is helping with that, it is an add-on for the Search API module and requires the Apache Tika Library. It also runs on Apache Solr. Solr is preferred otherwise your database can quickly become too large, which results in time consuming searches and visitors dropping out.

(Drupal 7 & Drupal 8 alpha)
 https://www.drupal.org/project/search_api_attachments

13. Navbar Awesome

An add-on for the Navbar module. The Navbar is a common used module for Drupal 7 providing easy and responsive backend navigation. It is similar to the default navigation bar in Drupal 8.
 This Navbar Awesome module gives the Navbar a more ‘clean’ and modern look.

(Drupal 7 beta & Drupal 8 beta)

https://www.drupal.org/project/navbar_awesome

14. Taxonomy unique

Do you want to make sure that all terms (keywords/tags) entered in one Drupal vocabulary are unique? After installing this module Drupal will check if that is the case. When you enter a term that is not unique, then an error will be shown.

(Drupal 7 en Drupal 8 beta)
 https://www.drupal.org/project/taxonomy_unique

15. Nagios

When you are managing many Drupal sites then central active monitoring can save a lot of work. This module integrates monitoring using Nagios. It checks, among others, the following components:

  • Is the database accessible
  • Is cron running well
  • Should Drupal core or modules be updated
  • Is PHP running well (in case PHP for some reason drops out)
  • Is the database structure (schedule) running behind
  • Is the ‘files’ directory writable
  • Other status messages, which can also be seen in the ‘Drupal Status report’.

(Drupal 7 & Drupal 8 dev)
 https://www.drupal.org/project/nagios

16. Rename Admin Paths

An additional security for your Drupal backend. With this module you can change the default backend paths such as /admin/… and /user/… into something else. So spambots, hackbots and hackers do not know which URL to use.

(Drupal 7 en Drupal 8)
 https://www.drupal.org/project/rename_admin_paths

17. Login destination

After a user logs in, you might want to refer him/her to a particular path, such as his/her personal dashboard. This small, popular module allows you to easily set this up.

(Drupal 7)
 https://www.drupal.org/project/login_destination

18. Memcache Storage

When you are managing a high performance Drupal site, then chances are that you have implemented the Drupal Memcache module. This module is only an integration and gives statistics per page about the Memcache use, but does not provide any other administrative tasks herein.
 This module is an alternative and does offer additional administrative tasks for the Memcache actions within your Drupal system, including:

  • What caches are stored where (Memcache or database).
  • ‘User sessions’ and ‘locks’ can also be stored in the memory.
  • Separate empty caches / Memcache bins.
  • Drush integration.
  • (Drupal 7 en Drupal 8 beta)
  • https://www.drupal.org/project/memcache_storage

19. User Password Reset Link Timeout

Once you create a user within Drupal you can send a one-time login link; which is by default valid for 24 hours. This period cannot be set automatically, after installing this module it is.
 We recently used it with an implementation of Drupal social intranet OpenLucius, in which we first imported users and then sent a login link simultaneously via the Mass Password Reset module.

(Drupal 7)
 https://www.drupal.org/project/user_pwreset_timeout

20. Force Password Change

For better protection of the data of your users, it is recommended that they periodically change their passwords. This is not forced by default in Drupal; this module can take care of this.

(Drupal 7)
 https://www.drupal.org/project/force_password_change

21. Dummy image

When you are developing on your localhost, then usually you do not have all images from a live environment stored on your local computer. This is resulting in lots of broken images and delays in page loads.
 This module makes sure you get to see dummy images so that it is not needed to constantly sync all images from live and yet it is possible to test them locally.

(Drupal 7 en Drupal 8 alpha)
 https://www.drupal.org/project/dummyimage

22. Stage file proxy

Another solution to the same problem described above: when you have not stored all files and images locally. When you install this module and it finds an image that is locally not found, then it copies the image from live to local. It only does this for the pages you visit locally so you need minimal disk space; especially handy when dealing with a large site with many files/images.

(Drupal 7 en Drupal 8 dev)
 https://www.drupal.org/project/stage_file_proxy

Wrap up

That’s all folks. Next month again a new ‘cool Drupal modules’ blog. Stay tuned!

Sep 19 2017
Sep 19

The holidays are over for a while now, so it’s about time for a new blog. In this article I’ll discuss 12 modules that can help you get started with a great Drupal site:

1. Max image size

A default Drupal installation can check if an uploaded image is too large and display a warning. This module does something similar but is also checking previously uploaded images that are too large and likely taking up too much space.
 It scans all the images (also already uploaded ones) and reduces the size of the original

More info and download — Drupal 7

2. User Import

Useful module to import users using a CSV file.

More info and download — Drupal 7

3. Select (or other)

Drupal’s form API knows by default a select element that allows you to offer choices to those who enter content. This element is limited to the provision of predefined terms (categories). After installing this module, this element can be expanded with an additional field: let the end user choose ‘other’ and offer a free selection field.

More info and download — Drupal 7 & Drupal 8 Alpha

4. Captcha-free Form Protection

Everybody wants to be protected against spammers, this is often done through the Captcha technology; probably you have heard of this before. This module protects you against spammers without Captcha, since this is often a barrier for visitors.

The module applies other techniques (‘behind the scenes’) such as checks if cookies / javascript are disabled, it can also check whether a certain time has exceeded. On the basis of these data it can determine whether the person who sent a form is most likely a spammer or not. The Honeypot module contains similar end features.

More info and download — Drupal 7 and Drupal 8

5. Twitter block

Simple but common used module: shows a Twitter stream from a particular account.

More info and download — Drupal 7 and Drupal 8

6. Leaflet

Leaflet is a javascript library that is quickly becoming popular and that let’s you create maps. It is an alternative to Google maps, allowing you to easily create customized maps and integrate external map services (for example Mapbox, Stamen or Thunderforest). Easy to configure, mobile-friendly to navigate and light in code.

For a detailed introduction see Drupalize.me.

More info and download — Drupal 7 & Drupal 8 dev

7. Better watchdog UI

The Drupal core has a logging module which gives great insights in errors, notices, content and user actions, etc. Install this module if you want to filter better in this log.
 FYI: Till Drupal 5 Drupal’s logging module was called ‘watchdog’, this term is still used for logging elements.

More info and download — Drupal 7

8. Check for acknowledgement

In some cases you want to know whether users of your system have read a particular piece of content. This is now possible after installing this module: it places a check mark at the bottom of a content page. Users placing the check mark are logged which is visible to you as a site administrator. This allows you to see who really confirmed they read the article.

More info and download — Drupal 7

9. IP address manager

Log the IP addresses of users logging into your Drupal site. This can be used for many things:

  • Detecting suspicious logins;
  • Identifying misconduct;
  • Detecting duplicate accounts.

More info and download — Drupal 7

10. Taxonomy container

Make the choice easier for content managers by clustering terms better.

More info and download — Drupal 7 & Drupal 8 beta

11. Date Facets

A widget for when you are using the Facet API: generates an additional block in which date-based filtering options are offered.

More info and download — Drupal 7

12. Read only mode

When putting your system in the maintenance mode in a default Drupal installation, the entire system will be temporarily put offline; the visitors will receive a maintenance message. Usually you would prefer that nobody is logged in on your site, as content can be changed during the update process. Those changes could be lost.

If you can ensure that nobody can enter/change content during maintenance, then you are also adequately covered — provided that your update is not generating errors. This module is doing just that: it places your site in the maintenance mode, so visitors can still view the site but cannot enter/change content.

More info and download — Drupal 7 & Drupal 8 beta

Wrap up

And finally, I discovered this cool site: modulecharts.org . Next month again a module update, so stay tuned! Questions or feedback? Let me know in the comments below

Sep 19 2017
Sep 19

Lately I have been hearing a lot about Laravel. This is a PHP framework to build web applications and that is quickly gaining popularity. I wanted to test it to keep up to date with this current technology. So I thought: I will build a concept in Laravel to see how it works and to compare it with Drupal 8.

My goals:

  • A static page in which the content is loaded from a local database.
  • Build a list of Blog items which is fed from a Drupal 8 RESTful API (which I had previously built for Node.js).

Overall content of this blog:

  1. Introduction to Laravel
  2. Laravel’s foundation
  3. Installing Laravel
  4. Routing in Laravel
  5. Laravel’s Migration: management of the database structure
  6. Eloquent ORM: query the database
  7. HTML templating in Laravel: Blade and Views
  8. Loading data from a RESTful Drupal 8 API

1. Introduction to Laravel

Required tools and knowledge

In order to participate you will need to have the following basic knowledge and tools:

  • PHP: intermediate knowledge
  • HTML/CSS basic knowledge
  • Good code editor (IDE), I am using PHPStorm
  • A browser, f.e. Firefox

What is Laravel

  • A PHP framework for web applications
  • Developed by Taylor Otwell
  • First release: February 2012
  • Open Source (MIT licence)

Why Laravel

According to the developers it is a ‘clean, modern web application framework’, which is built on other great tools. In addition, it is said that Laravel is ‘fun to code’.

Laravel is a MVC Framework

  • MVC = Model View Controller, a modern structure of web applications.
  • Model: application data and functionalities
  • View: the visible output, the HTML
  • Controller: interaction between user, model and view. Facilitated in Laravel by PHP.

Standard tools in Laravel

  • Routing of incoming requests
  • HTML templating (Blade)
  • Database definition and version control (Laravel’s Migrations and Eloquent ORM)
  • Authentication: login users and manage permissions.
  • Emailing with attachments

Laravel core is not a cms like Drupal 8

Laravel out of the box is not a cms. There is a cms component available (October cms), but in this regard Laravel cannot be compared with Drupal 8, which does offer in the core full blown cms functionalities. If you want to compare Laravel with Drupal, you will need to do this on the level of Drupal API and not Drupal cms.

2. Laravel’s foundation

Laravel’s foundation is built on strong components:

Laravel is a framework built on several other strong frameworks. Below an explanation of each component:

2.1 Laravel’s foundation: Symfony

Symfony is one of the main components in Laravel. The following Symfony components are, among others, used in Laravel:

Future releases of Laravel
 Laravel has announced to stay in sync with future releases of Symfony.

Symfony users
 When you are a user of Symfony you can also use Laravel components.

2.2 Laravel’s foundation: Composer

Laravel uses Composer, a PHP dependency manager. The main features are:

  • Works on a ‘per project’ basis, not global.
  • Works on Mac, Windows and Unix.
  • The dependencies are defined in a JSON file: composer.json. Composer can also be used in Drupal 8. This approach is also similar to the package.json in Node.js where NPM is ‘acting’ as Composer, see also.
  • See Packagist.org for 3rd party packages that can be used in Laravel by installing them through Composer.

2.3 Laravel’s foundation: Eloquent ORM

Eloquent ORM is Laravel’s database component, similar to the Database abstraction layer in Drupal 8. ORM is an acronym for Object Relational Mapper. It has been developed for Laravel, but can also be used outside Laraval. It is using an Active record pattern for database CRUD actions. It can facilitate one-on-one, one-on-many and many-on-many relations.

2.4 Laravel’s foundation: Migrations

Tables can be created, structured and (version) controlled through Laravel’s Migrations. All this is done via code, not configuration.

2.5 Laravel’s foundation: Blade

Blade is Laravel’s html templating machine. A Blade file is saved with the extension ‘.blade.php’. Variables in the template file can be placed as follows: {{variable}} (XSS filtered) or {!! variable !!} (unfiltered, [!] only use this when you know exactly what you are doing). You can also use PHP functionalities and codes in blade files. Blade also supports subtheming and conditional controls.

3. Installing Laravel

I am working on a Mac with OS X El Capitan. The current Laravel version is 5.1, and that is the version I am going to use. Go to Laravel docs and follow the instructions:

  • Make sure you have installed Composer.
  • Make sure the directory ~/.composer/vendor/bin is in your PATH, so that the laravel command is everywhere available. Learn here how.
  • Now you can install via the command laravel new a fresh Laravel installation. I am now going to my webroot and enter laravel new blog concept: a fresh Laravel installation will be created in the folder /blogconcept:

The created install:

  • You will get an ‘application key’. This will be used, among other things, to encrypt data, such as session data.
  • Go to the Laravel installation and run this command: php artisan serve to activate the Laravel server. Artisan is Laravel’s command line environment.

Go to your browser and navigate to http://localhost:8000. You should be seeing this:

4. Routing in Laravel

Routes are used to facilitate incoming page requests. This is similar to Drupal 7’s hook_menu() and Drupal 8’s routing system. The routes can be found in /app/Http/routes.php:

Static routes
 In routes.php you will see the default homepage defined, which you saw above in the browser. Here you can add your own routes. Below an example of a page with static information:

In a browser:

Dynamic routes
 Routes can also be built dynamically through working with variables:

Note the double quotes that are required to dynamically print out the variable. If you are using single quotes, Laravel will print literally {$person}.

In the browser:

5. Laravel’s Migrations: management of the database structure

First you will need a database, the standard used here is MySQL; I will make a database called ‘blog concept’. All the database settings are in config/database.php:

In this file you can set:

  • Fetch style
  • Type database: mysql is the standard, but Laravel also supports sqlite, pgsql and sql server.
  • The database connections, I am entering the following:

Tables can be managed manually through for example phpmyadmin, but that is not advisable. In Laravel the structure of tables/database can be programmed in code, resulting in flexibility and version control. ‘Database structure’ is also called ‘schema’.

By managing this in Laravel’s Migration developers can easily keep their databases in sync within a version control system, such as GIT. So you can also easily revert a database change.

Example: I am creating the initial migration file through command php artisan make:migration create_content_table. In the created file I am adding code that defines database tables:

This migration class exists of two methods: up and down. Up is used to create new tables, down is used to make the Up actions undone.

Execute command php artisan migrate, that will apply the migration code, and voila: the database tables are created:

More information: http://laravel.com/docs/5.1/migrations

6. Query the database with Eloquent ORM

For now I have manually filled the newly created tables with test content. Below a simple example to query this data:

  • Create a Model: php artisan make:model Content
  • Laravel creates the model in the /app folder:
  • The model is called ‘Content’ and not ‘Contents’, Laravel is smart enough to make that connection by itself.
  • Add the following code in routes.php:

$content = App\Content::find(1) => This is all it takes to query record with id=1 from the database table 'Contents', also here Laravel is smart enough to make the link with ‘Contents’. Then, all the fields from that record are stored in object $content, which can be assigned as variables to a blade template.

More information: http://laravel.com/docs/5.1/eloquent#defining-models

7. HTML templating in Laravel: Views & Blade

As previously indicated the HTML templating engine Blade is used in Laravel. The HTML files are called views, something else than Drupal Views: these are lists. An example of the use hereof can be seen immediately in the standard installation. In routes.php on line 15 the Laravel view ‘welcome’ is invoked: return view(‘welcome’);.

The views are included in the folder /resources/views, there you can also find the standard view ‘welcome.blade.php’:

An own dynamic view

Blade facilitates dynamically filling HTML pages. An example: I am creating a new view file called ‘about.blade.php’ and copy the HTML from welcome.blade.php:

I am adding the following code in routes.php:

You can see that the ‘about’ view is evoked through View::make() with an additional array included in which variables with content are defined that were previously loaded from the database.

Then I can use those variables in the Blade template:

In the browser:

FYI: more about Blade templates.

8. Data from a RESTful Drupal 8 API

As an example I am using the Drupal 8 API that I built earlier. The json output is looking like this:

First I played a bit around with Composer packages Buzz & Guzzle, both http clients. Those packages are facilitating much more than just retrieving data from a REStful API: POST requests, streaming large uploads, streaming large downloads, using HTTP cookies, uploading from JSON data, etc…

That is too much overhead, for now I can work with a standard php functionality: file_get_contents en json_decode:

  1. Create a new route: /blogs
  2. Query the json data from the external Drupal 8 RESTful API.
  3. Run through the json arrays data and create a new array where: key = url, value = blog title
  4. Render the Blade html view ‘blogs’.

Then I am copying an existing blade view and rename it to ‘blogs.blade.php’:

In this blade html view I am running through the associative array and am creating in this way a list with links:

Creating the detail page of a blog

Finally I would like to accomplish that when I click a link, the detail page of that blog appears:

  1. Create a new route with a variable
  2. Request the data from the Drupal 8 RESTful API.
  3. Look for a match in the url variable and a url in the json array from the API.
  4. When a match is found, create the variable: the title and body from the matched item.
  5. Render the html through a blade view.

In a browser:

As you can see, a lot still needs to be done concerning the styling. But as a purely functional concept, I am leaving it now the way it is.

Wrap up

Ok, that’s it for now. This is only an introduction in which I produced a concept. Many advanced components of Laravel have not yet been discussed, such as incorporating the logic code /routes.php that I placed to Models and Controllers. I would like to discuss this further in a next blog. Questions or feedback, let me know!

— Cheers, Joris

Sep 19 2017
Sep 19

We got a lot of questions last year like: can I build a new project on Drupal 8? What do I have to do with my Drupal 6 install when Drupal 8 is released? Do I have to upgrade my Drupal 7 install when Drupal 8 is stable.

We see these sorts of questions more and more, because Drupal 8 will have a stable release in the foreseeable future. And that means end of life for Drupal 6. So what to do?

Drupal 8

You want to live the future without dragging the past behind you, Drupal 8 does that very well. It’s completely rebuild from the ground up and has a lot of cool features:

Drupal 8 is not backward compatible, I think that’s a good thing: you don’t want to drag legacy stuff behind you. That’s a big bucket on your boat.

So is it necessary to upgrade your current Drupal 6 or Drupal 7 to Drupal 8? Considerations for:

  1. Drupal 6 to Drupal 8
  2. Drupal 6 to Drupal 7
  3. Drupal 7 to Drupal 8
  4. Tools for upgrading to Drupal 8

Difficult process?

Generically spoken, to what degree a Drupal upgrade process is difficult depends on the initial Drupal website builder. If that party knew what they were doing and took a future upgrade into account, than I guess you’ll be quite safe. But if that party duct-taped and Cable tied your Drupal site… then you might have a bigger challenge.

1. Drupal 6 to Drupal 8

Drupal 6 — RIP (almost)

Community support for Drupal 6 ends when Drupal 8 gets released, just like with Drupal 5. If you are running on Drupal 6 it won’t say ‘kaboom!’ immediately, but you should have a plan to upgrade to 7 or 8.

Drupal 6 site data (source):

About 20% of total Drupal sites is Drupal 6. Good to know: Drupal 6 will have 3 additional months of security support when Drupal 8 is released. So Drupal 8 modules can mature some more and an upgrade will be smoother. See also.

Simple Drupal 6 websites

With a simple Drupal 6 website I mean a ‘brochure’ website. In this website you have a couple dozens of pages with some static information and maybe a blog about your organization, company or personal activities. So there are no complex functions like an online community, webshop or social intranet/extranet. The project costs initially were 40~200 hours.

If you have such a Drupal 6 ‘brochure’ site, then Drupal 8 will probably be a good candidate, as it has a lot of features out of the box and chances are you can don’t need extra modules. So upgrade to Drupal 8 asap will probably the best step.

More complex Drupal 6 websites

A more complex Drupal 6 website would be an online community, a webshop or a Drupal social intranet. There are contrib modules installed and additional custom modules. The project costs initially were more than ~ 300 hours.

In this case you probably need extra modules in Drupal 8 to migrate your system. When those modules are not yet migrated then you can wait for them. But it’s kind of uncertain when they will be migrated and stable. A status overview of Drupal 8 modules.

When it’s clear that the needed modules will be ported to Drupal 8 in the foreseeable future then maybe it’s best to wait for that and migrate asap after those modules became stable. If they are not migrated in the near future, then take a look at what Drupal 7 has to offer (see below).

If your needed functions are also not available in Drupal 7 modules, then you have to build it custom. It’s seems wise to do that in Drupal 8.

2. Drupal 6 to Drupal 7

When Drupal 7 was released, we waited a few months with migrating Drupal 5 and 6 sites. As soon as the necessary modules were ported we upgraded the sites.

Drupal 5 data (source):

If you can’t wait until the necessary modules are ported to Drupal 8, then upgrading your Drupal 6 system to Drupal 7 is an option. Of course the modules must be available in Drupal 7, stable.

Drupal 8 is almost 5 years in development, if this continues then Drupal 7 will be supported for a long while. Including the extra 3 months security support Drupal 7 will be supported until ~ 2019. This is a rough estimate; Drupal 9 will probably not be in development for 5 years, since it will not be build from the ground up.

3. Drupal 7

Al lot of arguments described above also apply to a Drupal 7 website. It really depends on the complexity of your system: how much custom and contrib modules you implemented. The more complex the site, the less smooth an upgrade to Drupal 8 will be.

Since Drupal 7 probably will be supported for the next 3~4 years, I see no maintenance reason to switch to Drupal 8. But if you want to use all cool new features of Drupal 8 then upgrading if worth the consideration.

4. Tools to upgrade to Drupal 8

Drupal 8 core ships with a migrate module with an import API. This takes care of a lot of upgrading stuff, see Drupal IMP group

If you have a Drupal 6 or 7 install with little active modules then chances are those modules won’t be available in Drupal 8 in near future. So maybe then you’ll have to do the upgrades on your own.

Here are some resources that can help you with upgrading your modules and content to Drupal 8:

Everything You Need to Know About the Top Changes in Drupal 8:

Wrap up

So, malheureusement, there is no óne answer to the question: ‘when and how do I need to upgrade to Drupal 8’. It really depends on the complexity of your Drupal system. An analysis of your current system will be needed. You’ll have to compare your system with Drupal 7 and 8 core + available contrib modules.

Questions, feedback? Let me know in the comments!

Source header image

Sep 18 2017
Sep 18

So…. Drupal 8 got released! Congrats everybody! The end of life of Drupal 6 is then final. In addition, the 16th of november it was announced that Drupal.org is now serving its content and files via Fastly; which is giving a significant performance boost, well done!

Furthermore, what I noticed last month on module updates:

1) Scroll to destination anchors

This module modifies the behaviour of an ‘anchor’ within a page. So the page will not jump down but fluently scroll down. We have installed this module here.

https://www.drupal.org/project/scroll_to_destination_anchors

2) Spider Slap

There are a lot of ‘evil spiders’ active on the internet. These are web crawlers that don’t respect what is written in your robots.txt. This can cause unnecessary load on your server and uncover information that you don’t want to see in a search engine.
 This module is solving this problem. It will block the IP when a spider does not behave, with as a result that it will no longer have access.

https://www.drupal.org/project/spiderslap

3) Bounce Convert

Do you want to make an announcement in the last moment before a visitor is closing your Drupal website? Then this module can be useful. It functions like Exit monitor or Bounce Exchange.

Introduction video.

!) Note that it is currently an alpha module, so not yet suitable for live Drupal sites.

https://www.drupal.org/project/bounce_convert

4) Database Email Encryption

Do you want to maximise the security of the email addresses of your registered users? This is possible with this module. It encrypts the addresses in the database. Should the database end up in the wrong hands, then the email addresses cannot be read. Encryption is done using AES.

https://www.drupal.org/project/dbee

5) Unique field

A popular module existing since Drupal 5, but I never noticed it before. It is performing a check on entered fields (e.g. title field) and checks whether the entered title is unique. This will prevent the use of double titles which is good for, among others, SEO.

6) Login History

By default Drupal is not creating a login archive. This module will do this for you: it creates an archive in which the history of logins will be stored.

https://www.drupal.org/project/login_history Similar:

https://www.drupal.org/project/login_tracker

https://www.drupal.org/project/login_activity

7) Sitemap

Generates a sitemap for your Drupal 8 website and can also create RSS feeds for example for your blog. This is the Drupal 8 version for the popular Drupal 7 module Sitemap.

https://www.drupal.org/project/sitemap

8) D8 Editor File Upload

Easily place files in content. This Drupal 8 module adds a new button to the editor, which will make it easy to upload and place files.

https://www.drupal.org/project/editor_file

9) Client side Validation

Validating a form in your Drupal website without refreshing the page. This widely used module now offers a Release Candidate for Drupal 8.

https://www.drupal.org/project/clientside_validation

10) App Link

Probably you recognize this one: the message above a website on your Smartphone that you can view the page in a native app. If you built and linked an app (e.g. via DrupalGap) then you can generate this ‘app message’ on your Drupal website using this module.

https://www.drupal.org/project/app_link

11) OpenLucius News

An own module that has to be mentioned;). This module extends Drupal social intranet OpenLucius with a ‘news tab’ on the homepage. News about the organization can be placed here.

https://www.drupal.org/project/openlucius_news

12) Simple XML sitemap

The title of this Drupal 8 module says it all: it provides an XML sitemap that you can upload to search engines, so you can see the indexation of all your site links in the relevant search engine.
 The module also has a few configuration options like setting ‘priority’.

https://www.drupal.org/project/simple_sitemap

13) Session Limit

Tighten the security of your Drupal system by limiting the number of sessions with which a user is logged in. You can for example set that somebody can be logged in once; if somebody is logging in on his/her Smartphone then he/she will be automatically logged out on the work computer.

https://www.drupal.org/project/session_limit

14) Login Security

Provide additional security when logging in, it is for example possible to:

  • Set how many times a user can attempt to log in before the account is blocked.
  • Deny access based on IP, temporarily or permanently.

The module can also send emails (or a log to Nagios) to alert the Drupal administrator that something is going on:

  • It seems that passwords and accounts are guessed.
  • bruteforce attacks or other inappropriate behaviour when logging in.

https://www.drupal.org/project/login_security

15) OpenLucius LDAP

Another own module, that should be mentioned as well ;-). This module extends Drupal social intranet OpenLucius with a LDAP connection, so that users can login to OpenLucius with their existing LDAP account.

https://www.drupal.org/project/openlucius_ldap

16) Protected node

Gives additional protection to a certain page (node). A password can be set when creating the node. If somebody then wants to look at the node, the password must be entered to get access.

https://www.drupal.org/project/protected_node

17) Code per Node

It is common to ‘deploy’ Drupal code (PHP, JS, CSS) via GIT within an OTAP street to a live Drupal server. Usually with the use of a Continuous Integration tool.

[edit] As Eelke mentioned in the comments below: OTAP has to be DTAP for English audience. [/edit]

But with this module you can perform quick fixes per page without the whole operation. It offers the opportunity to add additional CSS; per node, content type, block or global.

Not how we would do it, but I can imagine that this could be a handy tool for Drupal site builders. This is probably also the reason why it is so popular.

https://www.drupal.org/project/cpn

18) Admin Toolbar

A handy toolbar for Drupal 8

https://www.drupal.org/project/admin_toolbar

Wrap up

Alright, these are the modules for this month. In December we will introduce again new ‘cool Drupal modules’, so stay tuned!

Sep 18 2017
Sep 18

So, like a bunch of other Drupal people, we’re also experimenting with Drupal 8; for our Drupal distro OpenLucius. Us being ‘less is more’-developers, one aspect we really like is dependency injection.

First things first, for all new developers we should explain exactly what dependency injection is. Dependency injection is an advanced software design pattern. It implements “inversion of control”, this sounds complex but it basically means that reusable code calls task specific code. (Reference: http://en.wikipedia.org/wiki/Inversion_of_control)

What does this mean for us Drupal developers?
It means we can write more efficient code by reducing the load. We only load what we need.

Types of injection

There are multiple types of Dependency injection:

  1. Constructor injection, where the dependency is injected through a class’s constructor.
  2. Setter injection, where the dependency is injected through a setter method of a class.
  3. Property injection, where a public field of a class is directly set.

All three methods have their pro’s and con’s I’ll try to explain these three in detail.

1. Constructor injection

There’s no real downside to using constructor injected dependency injections. The advantages are:

  • Constructor injection can ensure that a class cannot be constructed without a required dependency.
  • The constructor is only called once so the dependency cannot be altered afterwards

These two advantages do not limit the ability to use optional dependencies; these can be implemented using one of the other methods. It does however tend be a bit more difficult to extend the class or override the constructor.

Simple example of constructor based injection:

class SimpleClass { protected $variable; public function __construct(\SimpleType $variable) { $this->variable = $variable; } }

As you can see the SimpleType class is injected into the protected variable of the SimpleClass. Basically that’s all you have to do to :)

2. Setter injection

This type of dependency injection is often used for optional requirements as the only thing you have to do to prevent adding a dependency is not calling the setter.

The advantages are:

  • The above-mentioned, setting of optional dependencies.
  • You can call a setter method multiple times. This also allows you to add multiple dependencies using only one method.

The downsides are:

  • The setter can also be called after the construction of the object. Therefore you can’t guarantee that a dependency is not replaced.
  • You can’t be certain that a setter is called at any moment in time. So you have to implement a method to verify if a dependency is indeed injected.

Simple example of setter-injection:

class SimpleClass { protected $variable; public function setType(\SimpleType $variable) { $this->variable = $variable; } }

3. Property injection

Injecting directly into class objects is not advisable but there’s a small possibility that a thirdparty library implements public properties.

The downsides are:

  • There is no way of controlling whether a dependency is set. It can be changed at any point.
  • You can’t use type hinting to verify what type of dependency is injected. (type hinting is a way of ensuring that an object is of a certain type. For more information have a look at the phpdocs http://php.net/manual/en/language.oop5.typehinting.php)

Simple example of property injection:

class SimpleClass { public $variable; }

Dependency injection Drupal

All of this was PHP dependency injection, which can be easily implemented in Drupal 8. I’ll show two simple ways to implement these three methods, which can be downloaded as an example module at the bottom of the page. I’ll show a direct approach to using these 3 methods and a service-based approach. Both are quite simple to implement.

For demonstration purposes i’ve created simple module containing the four classes now properly named in a namespace called ‘Drupal\dep_test’ where dep_test is the name of the module. The classes are now distinguishable from each other:

  • SimpleClassConstructor
  • SimpleClassSetter
  • SimpleClassProperty
  • SimpleType

Within this module I’ve added a simple Controller, which makes it easy to display values. In the controller class I’ve added the following code for a direct approach:

// Initiate the Classes. $this->constructor = new SimpleClassConstructor(new SimpleType()); $this->setter = new SimpleClassSetter(); $this->property = new SimpleClassProperty(); // Inject dependencies. $this->setter->setType(new SimpleType()); $this->property->variable = new SimpleType();

As you can see a direct approach is quite simple to implement. Now we’re going to use a service based approach. For this we’re going to use a services.yml file.

This file contains the services and the function calls / properties to be set.

services: deptest.simple_type: class: Drupal\dep_test\SimpleType deptest.constructor: class: Drupal\dep_test\SimpleClassConstructor arguments: ['@deptest.simple_type'] deptest.setter: class: Drupal\dep_test\SimpleClassSetter calls: - [setType, ["@deptest.simple_type"]] deptest.property: class: Drupal\dep_test\SimpleClassProperty properties: variables: "@deptest.simple_type"

From top to bottom:

  • We define the simple_type service and tell, which class should be used.
  • We define the constructor service, set the class and give the simple_type class as an argument.
  • We define the setter service, set the class, set the function call and the argument for the function call.
  • We define the property service, set the class and set the property to the simple_type class.

Now if we call one of these services using the service container all properties will be set, just like the direct approach.

$this->service1 = \Drupal::service('deptest.constructor'); $this->service2 = \Drupal::service('deptest.setter'); $this->service3 = \Drupal::service('deptest.property');

Calling the service container directly is not advisable but for demonstration purposes it should suffice.

The end

That’s about it for this blog item. I hope it helps someone. Don’t forget to download the full package and have a look at the code.

Sep 18 2017
Sep 18

Search engine optimisation (SEO) has always been important, but in recent years its importance seems to have increased significantly. We were more often dealing with Drupal SEO implementations than in previous years. Many of the implementations contained overlapping components. Below we will discuss the most important ones:

1. Speed

Google Page Speed is a good indicator of how speed is experienced by end users and therefore by Google. Google attaches great importance to speed because end users are simply doing the same.

An example of a test of the front page of this site:

As you can see we can further optimize mobile and desktop by following the instructions provided. Although on our Dutch blog we have a Node.js frontend (and a headless Drupal 8 backend) a Drupal frontend can be tested as well with the Google Page Speed tool. The tool is testing, among others, the following:

  • JS and CSS aggregation and minimize (minify)
  • GZIP / browser caching
  • Optimized images
  • Landing page redirects
  • Prioritize visible content
  • User experience issues, for example the use of non generic plug-ins.

2. Schema.org

Schema.org is a collaboration between Google, Yahoo! and Bing to standardize the way data is structured in web pages. By using these standards these search engines are ‘snapping’ the content of your web page better, resulting in a significant SEO boost.

The schema.org library contains descriptive tags for content like films, persons, organizations, events, locations, etc. The purpose of the search engine is to make search results more clear, allowing people to easily find the right web pages.

3. Mobile compatible / responsiveness

2015 brought us mobilegeddon: if your website is not mobile ready then Google will appoint you penalties resulting in a lower ranking. And rightly so, a large part of the website visitors are using internet on their mobiles; and you would like to give them a good experience. You can test here if your website is mobile compatible.

4. Google Webmaster Tools / Search console

Essential SEO tool, sign in here and register your website. Then it is important to upload a XML sitemap. The Drupal module XML sitemap will help you with this. Once you have done that, you will be able to see how your website is ranking in the organic results of Google:

  • Which keywords enable your pages to be found in the search results.
  • What are people really clicking so that they land on your website.
  • Errors on your website.
  • Links that are not correct.
  • Links that are not accessible.
  • Schema.org implementation: how is Google treating the enriched html pages.

See below for example the dashboard of this website, with links unfolded and all the insights you can find here:

5. Write good, long content

Apparently Google is rating your Drupal website higher when you are publishing long and good quality content. Long and good pieces of content are also adding to the acquisition of new clients:

  • You have something valuable to promote on social media.
  • You have an excuse to reach out to your potential customers.
  • Visitors are staying longer on your website.
  • You are creating authority.

Read here more details about the how and why.

Areas of importance when writing content

  • Backlinks, make sure you get links on other websites that are highly rated.
  • Limit the number of relevant internal and external links, so that Google (and the — visitor) can better understand the context of your article.
  • Analyze the (successful) competitors: discover where they are, what they link and how they dominate social media.
  • Make sure your blog website is coherent, not a website with islands where non-cohesive content is separated from one another.
  • Update regularly: check for example once every month your articles and improve where appropriate: cohesiveness, spelling mistakes, new insights, etc.
  • Allow visitors to place comments using Disquss that has become a social media platform where you can attract inbound links.

Useful Drupal SEO modules

6. Page title

By default Drupal has one field to enter the title of an article. This title is used for both the page title as the ‘html title’:

The html title is important for SEO; usually you would like to define it differently than the readable title of the article (as the visitor is viewing it). This module is solving this problem and allows you to manage two titles individually.

You can also give the HTML title a particular predefined format so that it is created depending on the content type. For example “Blog Lucius | 18 Drupal SEO modules and tools for better findability in Google”. Where ‘Blog Lucius’ is always automatically stated in the beginning of the title with a pipe (‘|’) in between.

Download and more info on Page Title — (Drupal 7 — Drupal 8 info)

7. Metatags

Years ago meta keywords were one of the most important elements used to be found. But not anymore, Google is finding your Drupal site mainly with content and links to your pages. The meta keywords are still important but mainly for:

Indicating snippets
 The (summary) text about your page that will appear in the search engine:

Open Graph implementation
 Rapidly emerging technology, important for previewing your page on social media and now also in for example Gmail:

Download and more info on Metatag — (Drupal 7 & Drupal 8)

8. Pathauto & Subpathauto

Pathauto is a widely used Drupal module: it converts standard Drupal (/node/123) links to readable links (/news/this-is-a-news-item). Useful for your visitors and thus for Google.

Download and more info on Pathauto — (Drupal 7 & Drupal 8 dev)

Subpathauto is an extension of Pathauto: it recognizes sub-paths and automatically generates associated paths.

Download and more info on Sub-Pathauto — (Drupal 7)

9. Pathauto persistent state

The popular Drupal module Pathauto is useful for automatically creating nice URL’s. It is also possible to exclude particular content from an ‘automatic alias’ and then manually enter the URL.

Pathauto sometimes ‘forgets’ that the URL of certain articles was manually set, and creates them again automatically. As a result the URL of your page could change without you realizing it, not handy..

This Drupal module is solving this problem: it makes sure that Pathauto remembers for which articles you have turned off ‘automatic alias’.

Download and more info on Pathauto persistent state

10. Global redirect

Avoid duplicate content. Ensures for example that ‘node/123’ is no longer available, but only the search engine friendly URL. It also checks if clean URL’s are enabled and checks whether visitors have access before performing a redirect.

Download and more info on Global Redirect — (Drupal 7 — Drupal 8)

11. Redirect

It can happen that the title of an article needs to be changed, usually the URL is changing then as well. This module creates a 301 — Permanent redirect so that the users from an old URL are automatically redirected to the new path. This way Google also knows that the new URL needs to be indexed and that the old one can be removed.

Download and more info on Redirect — (Drupal 7 — Drupal 8 info)

12. XML sitemap

Necessary for an insight into your Drupal pages in Google’s Search console, see ‘Google Webmaster Tools / Search console’ above for more information.

Download and more info on XML sitemap (Drupal 7, Drupal 8 info).

13. HTML Purifier

Can clean the HTML of content so that it continues to comply with the W3C standards.

Download and more info on HTML Purifier — (Drupal 7, Drupal 8 info ).

14. Search 404

A standard 404 page (‘page not found’) is providing rather brief information for your visitor. This popular module is changing this: it does not show a static page, but will search in your Drupal system and will show visitors results of pages they might have been searching for.
 This feature will also have a positive influence on the SEO of your Drupal system.

Download and more info on Search 404 (Drupal 7 & Drupal 8)

15. Site verify

Useful mini module to verify your site in Google’s webmaster tools.

Download and more info on Site verify — (Drupal 7, Drupal 8 info).

16. Link checker

Analyse your content and detect dead links, important to fix them for your visitors and thus for Google.

Download and more info on Link checker — (Drupal 7, Drupal 8 info).

17. Taxonomy Title

Similar to the previously mentioned ‘Page title’, using this module you can among others change the (html) page title per term / tag.

Download and more info on Taxonomy Title — (Drupal 7)

18. Menu attributes

Add html elements to menu links: id, name, class, style and rel. This allows you to add among others ‘rel=nofollow’ to design the flow of links in your website better.

Download and more info on Menu attributes — (Drupal 7, Drupal 8 info).

Wrap up

Ok, enough SEO for now, hopefully you are not immediately conquering our ranking in Google ;-) Questions or feedback? Let me know in the comments.

Sep 18 2017
Sep 18

The Bootstrap HTML framework in Drupal, we love it. That’s why we build the front-end of Drupal distribution OpenLucius with it. So we love it, but why is that?

There are alternatives to integrate in Drupal websites. Below we will give you a few reasons why we currently prefer the Bootstrap framework.

Why a HTML framework

First of all, why should you use a HTML framework? These possibilities also exist:

1) Write everything fully by hand:

Nowadays responsiveness is required with almost every new website. Bootstrap is offering cross-browser compatibility for this. To build the required responsiveness every time from scratch would make no sense.

2) Ready-made Drupal themes

You can download free Drupal themes or buy them ready-made. This will take you quickly in the right direction, but ‘the devil is in the details’. The final details are usually difficult, but necessary to make your desired layout. The problems are usually caused by not knowing the code and the code is often not scalable designed for your purposes. It can become a kind of Rube goldberg machine to you.

Why Bootstrap

So a HTML framework is our weapon of choice. Specifically Bootstrap, 5 reasons why:

#1) Good documentation

It has become a widely used framework in Drupal. The Drupal Bootstrap base theme has currently almost 300.000 downloads and 50.000 installations. It is not only used in the Drupal community, other popular CMS systems, like Wordpress, also make extensive use of it.
As a result of this broad implementation, a lot of documentation is available and most questions are already answered on forums like StackOverflow.

#2) Good Drupal integration

Since we are a Drupal shop, scalability and flexibility of the integration are necessary. And of course this is offered, the technique of Drupal Bootstrap basis theme is excellent. It is even integrated with Bootswatch themes, so you can instantly choose from 14 ready-made templates.

We are gratefully using this in our Drupal distribution OpenLucius.

#3) Many ready-made free templates

Because it is used worldwide, there are many websites that offer paid and unpaid Bootstrap HTML templates, for example:

#4) Many components (snippets) are already available

Websites usually consist of similar content: homepage, list pages, news items, blog, contact, drop down menu, slider with pictures etc. But also think of elements such as a profile page, a timeline, or a login screen.
There are many websites that offer such components (snippets) within the Bootstrap HTML framework. Some examples:

A timeline

A profile page

A useful dropdown selector with filter function

We have used these in OpenLucius:

Data tables

Data tables are providing performance optimalisation compared to standard Drupal Views. Data tables are loading all ‘tabular data’ and creates pages using jQuery. This will make a difference in the server requests when requesting each new page.

#5) Integrates with WYSIWYG

When you are working with content managers, you like them to see the text format as the visitor gets to see them. In other words: the text in the wyiwyg editor must be consistent with the front end. With Bootstrap this is relatively simple.

Relevant Drupal modules

Get started with Bootstrap in Drupal, this will give you a kick start:

And many more. Not everything in this list is bootstrap integration, it also contains results of modules that say something about ‘Drupal’s bootstrap process’. But that’s another chapter :)

Wrap up

Alright, that’s it. As always, don’t hesitate to contact me in case of questions or feedback!

— Cheers, Joris

May 03 2017
May 03

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

Within a Drupal 8 website, there are usually a number of texts that the content manager must be able to manage but that are not real content items.

Dutch version of this blog here.

We resolve this by making a user-friendly configuration form in the backend of Drupal 8, accessible to content managers. This allows us to make sure that all non-content is easy to manage, so that content managers do not have to dig through all kinds of screens in a technical backend to find the correct settings.

An example are the texts (and background image) in this Frontpage header block:

An example of the corresponding Drupal 8 backend configuration form:

This blog series consists of three parts:

  1. Building the Drupal 8 backend configuration form and defining a Twig template file.
  2. Development of a custom Drupal 8 Block, in which imported texts are retrieved from the configuration form; rendered in a custom Twig template file.
  3. Managing the background image via the already defined backend configuration form.

In this part 1:

  1. Create a new module using Drupal Console.
  2. Implement Drupal 8 backend configuration form.
  3. Defining Twig template file - and variables, for facilitating dynamic html in the frontend.

1. New module with help from Drupal Console

Drupal Console is a CLI tool for boilerplate code to generate (also called skeleton code). Console also offers functions to perform and debug actions within Drupal 8.

Drupal Console also offers functions to generate Drupal forms, that is, boilerplate code. To do this, we have to start creating a new module in which the form is then implemented.

Generate a new module using Drupal Console:

  1. Enter command drupal generate:module in a terminal.
  2. Enter a name for the new module. We are only going to use this module for configuration purposes, so I call it 'OpenLucius Configuration'.
  3. The yellow text is the default entered by Console if you press enter without entering anything. This default module machine name is fine, so press enter.
  4. The same goes for the module path. It is a best practice in Drupal to subdivide the /modules folder into /contrib *, */custom and /devel.
  5. Enter a description, it appears in the Drupal 8 backend on the global /config screen.
  6. Yes, I want to generate a .module file. We need this later to implement a hook_theme, where we create a Twig template file known to Drupal. In that, the dynamic html will go live.
  7. We indeed need a themeable template file as mentioned in (6). By default, this will not generate the correct naming, but it is useful as an example code.

2. Generate Drupal 8 backend configuration form

The following fields must be managed by content managers:

  1. Frontpage header title
  2. Frontpage header subtitle
  3. Frontpage header intro text
  4. Frontpage header read more link
  5. Frontpage header background image

Now, for example, Site name and Slogan fields are already available in Drupal 8 core and may be used as Frontpage header title and Frontpage header subtitle.

But for the convenience of content managers, we do not use those Drupal core fields and we create one easy-to-use form that controls all non-content fields. Thus, no fragmentation of features across all kinds of technical administrators, which scares a content manager.

Defining fields and field names, we always do it in English, given that the Drupal 8 backend is always English and it is the language of development (code, comments, etc) as well. We always keep the backend English for consistency in, among other things, debugging and helpdesk issues from customers.

Generate the fields

We start creating the text fields, the image field we deal with in part 3 of this blog series.

I generate the required backend form in the newly created module as described above. We make the form and the text fields using the Drupal Console:

  1. From the web root of your Drupal 8 installation: enter drupal generate:form:config in a terminal.
  2. Specify which module you want to put in the form, so you must generate it in an existing module; Therefore we first created the Drupal 8 module above.
  3. Do you want to load services? Read more about Services and dependency injection in Drupal 8. For this example it is not necessary to key enter.
  4. Start building up the form fields by defining the first field, in this example I start generating the textfield 'Frontpage Header Title'.
  5. Give your field a Label, this text will be above the field. Enter a clear name here, so Drupal content managers know what to enter here.
  6. Configure optional values for elements associated with this field.
  7. You can enter as many fields as you like, until you reach “New field type (press to stop adding fields) [ ]:” thus pressing enter without entering text. Then some final questions will be asked, after which the form will be generated in the indicated module:

  1. Once you have entered all the elements, leave it blank and hit enter.
  2. Enter the desired path (route), this default is fine. More about Drupal 8's routing system here
  3. The default Yes is fine, we would like it to appear in the backend menu so that content managers can easily navigate to it.
  4. Enter the title of this desired menu item and place it in this default parent menu: This will appear in the Drupal Backend menu.
  5. Give it a description, which appears on the config overview page:

Drupal 8 Form API

Drupal 8 has an extensive Form API, which lets you see which elements and options are available. For more information see:

The folder and file structure of the generated module looks like this:

The generated code for the form:

Install module and Drupal 8 backend form

Install the module so that the generated form becomes active. This can be done with Drupal Console's command module:install :

A link is created in the configuration screen:

And the form detail page works:

The form is used directly, saving the values in the database is immediately:

3. Defining Twig template file and template variables, for facilitating dynamic html in frontend.

Drupal Console has just created a template file and defined it as hook_theme(), so that Drupal 8 recognizes this and we can call it in modules through the Render API and / or those in Drupal 8 theme can override.

But as Drupal Console has defined it, it's too generic, I'd like it more specific because more Twig template files will be added soon. Also, I want to add Twig template variables, to make the html dynamic. These variables will facilitate the input of content managers, making it completely dynamic through the backend form.

To initiate this, I make two adjustments:

  1. I change the template file name so it's less generic and we can already deduce what the name is being used for.
  2. I change the Twig template definition in hook_theme(), so Drupal is aware of the 'new' Twig template file. Also, I have defined template variables so that Drupal knows which variables are available. These Twig variables I will further implement and explain in the next part of this blog.

Twig and Drupal 8

Learn more about Twig templating in Drupal 8? Click Here.

Placing HTML in Twig template file

As the last action in this part of this blog series, I place the (already developed) HTML in the Twig template file:

As you can see, I immediately placed the Twig variables, which in the following section we will go to "fill in" with texts entered by the content manager in the backend form.

Wrap up part 1

Alrighty, we have now created a module and generated a Drupal 8 backend form. In addition, we have defined a Twig template file and variables, which means that Drupal 8 knows that our template file exists and which variables are used in it.

But we do not see this HTML anywhere in the front end, and the texts are not yet dynamically loaded from the configuration form.

How do we do that? That's what I describe in Part 2, so stay tuned!

May 03 2017
May 03

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

Within a Drupal 8 website, there are usually a number of texts that the content manager must be able to manage but that are not real content items.

Dutch version of this blog here.

We resolve this by making a user-friendly configuration form in the backend of Drupal 8, accessible to content managers. This allows us to make sure that all non-content is easy to manage, so that content managers do not have to dig through all kinds of screens in a technical backend to find the correct settings.

An example are the texts (and background image) in this Frontpage header block:

An example of the corresponding Drupal 8 backend configuration form:

This blog series consists of three parts:

  1. Building the Drupal 8 backend configuration form and defining a Twig template file.
  2. Development of a custom Drupal 8 Block, in which imported texts are retrieved from the configuration form; rendered in a custom Twig template file.
  3. Managing the background image via the already defined backend configuration form.

In this part 1:

  1. Create a new module using Drupal Console.
  2. Implement Drupal 8 backend configuration form.
  3. Defining Twig template file - and variables, for facilitating dynamic html in the frontend.

1. New module with help from Drupal Console

Drupal Console is a CLI tool for boilerplate code to generate (also called skeleton code). Console also offers functions to perform and debug actions within Drupal 8.

Drupal Console also offers functions to generate Drupal forms, that is, boilerplate code. To do this, we have to start creating a new module in which the form is then implemented.

Generate a new module using Drupal Console:

  1. Enter command drupal generate:module in a terminal.
  2. Enter a name for the new module. We are only going to use this module for configuration purposes, so I call it 'OpenLucius Configuration'.
  3. The yellow text is the default entered by Console if you press enter without entering anything. This default module machine name is fine, so press enter.
  4. The same goes for the module path. It is a best practice in Drupal to subdivide the /modules folder into /contrib *, */custom and /devel.
  5. Enter a description, it appears in the Drupal 8 backend on the global /config screen.
  6. Yes, I want to generate a .module file. We need this later to implement a hook_theme, where we create a Twig template file known to Drupal. In that, the dynamic html will go live.
  7. We indeed need a themeable template file as mentioned in (6). By default, this will not generate the correct naming, but it is useful as an example code.

2. Generate Drupal 8 backend configuration form

The following fields must be managed by content managers:

  1. Frontpage header title
  2. Frontpage header subtitle
  3. Frontpage header intro text
  4. Frontpage header read more link
  5. Frontpage header background image

Now, for example, Site name and Slogan fields are already available in Drupal 8 core and may be used as Frontpage header title and Frontpage header subtitle.

But for the convenience of content managers, we do not use those Drupal core fields and we create one easy-to-use form that controls all non-content fields. Thus, no fragmentation of features across all kinds of technical administrators, which scares a content manager.

Defining fields and field names, we always do it in English, given that the Drupal 8 backend is always English and it is the language of development (code, comments, etc) as well. We always keep the backend English for consistency in, among other things, debugging and helpdesk issues from customers.

Generate the fields

We start creating the text fields, the image field we deal with in part 3 of this blog series.

I generate the required backend form in the newly created module as described above. We make the form and the text fields using the Drupal Console:

  1. From the web root of your Drupal 8 installation: enter drupal generate:form:config in a terminal.
  2. Specify which module you want to put in the form, so you must generate it in an existing module; Therefore we first created the Drupal 8 module above.
  3. Do you want to load services? Read more about Services and dependency injection in Drupal 8. For this example it is not necessary to key enter.
  4. Start building up the form fields by defining the first field, in this example I start generating the textfield 'Frontpage Header Title'.
  5. Give your field a Label, this text will be above the field. Enter a clear name here, so Drupal content managers know what to enter here.
  6. Configure optional values for elements associated with this field.
  7. You can enter as many fields as you like, until you reach “New field type (press to stop adding fields) [ ]:” thus pressing enter without entering text. Then some final questions will be asked, after which the form will be generated in the indicated module:

  1. Once you have entered all the elements, leave it blank and hit enter.
  2. Enter the desired path (route), this default is fine. More about Drupal 8's routing system here
  3. The default Yes is fine, we would like it to appear in the backend menu so that content managers can easily navigate to it.
  4. Enter the title of this desired menu item and place it in this default parent menu: This will appear in the Drupal Backend menu.
  5. Give it a description, which appears on the config overview page:

Drupal 8 Form API

Drupal 8 has an extensive Form API, which lets you see which elements and options are available. For more information see:

The folder and file structure of the generated module looks like this:

The generated code for the form:

Install module and Drupal 8 backend form

Install the module so that the generated form becomes active. This can be done with Drupal Console's command module:install :

A link is created in the configuration screen:

And the form detail page works:

The form is used directly, saving the values in the database is immediately:

3. Defining Twig template file and template variables, for facilitating dynamic html in frontend.

Drupal Console has just created a template file and defined it as hook_theme(), so that Drupal 8 recognizes this and we can call it in modules through the Render API and / or those in Drupal 8 theme can override.

But as Drupal Console has defined it, it's too generic, I'd like it more specific because more Twig template files will be added soon. Also, I want to add Twig template variables, to make the html dynamic. These variables will facilitate the input of content managers, making it completely dynamic through the backend form.

To initiate this, I make two adjustments:

  1. I change the template file name so it's less generic and we can already deduce what the name is being used for.
  2. I change the Twig template definition in hook_theme(), so Drupal is aware of the 'new' Twig template file. Also, I have defined template variables so that Drupal knows which variables are available. These Twig variables I will further implement and explain in the next part of this blog.

Twig and Drupal 8

Learn more about Twig templating in Drupal 8? Click Here.

Placing HTML in Twig template file

As the last action in this part of this blog series, I place the (already developed) HTML in the Twig template file:

As you can see, I immediately placed the Twig variables, which in the following section we will go to "fill in" with texts entered by the content manager in the backend form.

Wrap up part 1

Alrighty, we have now created a module and generated a Drupal 8 backend form. In addition, we have defined a Twig template file and variables, which means that Drupal 8 knows that our template file exists and which variables are used in it.

But we do not see this HTML anywhere in the front end, and the texts are not yet dynamically loaded from the configuration form.

How do we do that? That's what I describe in Part 2, so stay tuned!

Apr 12 2017
Apr 12

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

It took a while before I could write a new edition, I was just busy with the production of customer social intranet projects :) Here again with a brand new version, what struck me in module updates in the past month:

Dutch version of this blog here

1. D8 Editor Advanced link

A popular module that extends the standard editor in Drupal 8 with additional options for managing links. You can now add the following attributes:

  • title
  • class
  • id
  • target
  • rel

https://www.drupal.org/project/editor_advanced_link

2. Password strength

Default password checks are stupid and annoying for the user: they can check the entered password meets certain rules, such as the number of characters and varying types herein (symbols, numbers, capital letters etc.).

This is a stupid way of checking because the password 'Welcome123' is accepted, while it is easy to guess.

This module enables a secure password policy by "pattern-matching" and "entropy calculation”. Almost every type of password is accepted, as long as it has sufficient entropy.


Source

How it works

Instead of checking strict rules, this module calculates the expected time a brute force attack needs to retrieve the password. This is calculated based on underlying patterns:

  • Words that appear in a standard dictionary, common first and surnames and other default passwords.
  • Words from a dictionary, but written in Leet / 1337. For example, where the "e" is written as a three and “a” like an @.
  • A standard sequence of letters like "abcdef", "qwerty" or "123456"
  • Dates or years.

This module has been around since 2007, I wonder why I only encounter this now :) It is currently available in alpha for Drupal 8 and stable for Drupal 7 available - it is supported by Acquia and Card.

So if you want people to not have to bother to look for a password such as "one special character, 1 upper case and at least 8 characters', then this module offers a solution.

https://www.drupal.org/project/password_strength

3. Better Field Descriptions

In order to give content managers issues, it is possible to write an explanation of all content fields that they import. But the standard explanation in a field in the backend of Drupal are often irrelevant, to not apply these generic texts in the implemented user story of the installation concerned.

After installing this module you can:

  • Content managers have their own explanation text per field.
  • Set where it stands: above or below the field.
  • The explanatory style that you like.

https://www.drupal.org/project/better_field_descriptions

4. Better login

Want to make the standard Drupal login screen better? Then install this module and you are good to go: through template overrides you can then do the required further tuning of the layout of the login screen.

https://www.drupal.org/project/betterlogin

5. Ridiculously Responsive Social Sharing Buttons

Another social sharing module, but as you see in the title: these are terribly responsive. The icons are SVG based and you need no external services such as AddThis.

Advantage: you're less dependent and have your data in hand, downside: you have less functionality- such as comprehensive statistics.

https://www.drupal.org/project/rrssb

6. Flush Cache

If you are not using Drush or Drupal console then you can Drupal caches flush via “the 'Flush all caches" button in the Drupal backend. But in a production environment, you will almost never flush all caches, it can cause severe performance problems.

This module solves that problem: install it and you have more control over the caches you want to flush.

https://www.drupal.org/project/cacheflush

7. Multiple Selects

Have your Drupal content management easier with 'multiple selects' administration, this image seems to me to speak for itself:

https://www.drupal.org/project/multiple_selects

8. Neutral paths

If you are running a multilingual Drupal website, visitors can see the content in one language: the currently active language. Sometimes you would like to see pages in another language. In addition: content managers / Drupal administrators usually want English and not the backend default language, in our case, often Dutch.

Issue tracking for example, much easier if the backend is in English: Drupal documentation and support in English is much more available than in Dutch.

This module ensures that you can visit other pages in another language than the default. And can navigate the backend in English, while frontend is in another language.

https://www.drupal.org/project/neutral_paths

9. Password Reset Landing Page (PRLR)

Drupal core includes a 'password' function: If you have forgotten your password then you can request a one-time login link that is automatically mailed to you.

If you click on the login link, you will see a screen with a login button. Once you click the 'login' button you are logged in and you are redirected to your profile page - that's it.

You are in this situation where your password is lost / forgotten. You are not required to change your password. This is not usually done, so people often endlessly request login links.

This module solves this: the screen where you end up after clicking on the login link not only contains a login button, but also a function to change your password immediately.

https://www.drupal.org/project/prlp

10. Auto Purge Users

The user list in Drupal is usually not or hardly ever administered. If people have long been inactive or have not completed their registration, the account can usually be removed to avoid overhead and security issues.

This module does it for you automatically, it checks inactivity below a point and blocks users if they meet:

  • Certain time inactive.
  • Account never activated after registration.
  • Not been logged in for a period of time.

Not a popular module, but in the case of an example Drupal social intranet it can come in handy.

https://www.drupal.org/project/purge_users

11. Vertical Tabs Config

Want to influence the order of the Drupal tabs? Or do you want some tabs to not show all of your content manager? To keep tabs simple and usable you can install this module: select which tabs to show and in what order.

Modules with similar functions: Simplify and Hide vertical tabs.

https://www.drupal.org/project/vertical_tabs_config

12. Custom Search

The default Drupal search is fine, but really standard: you have few options to tune the engine. After installing this module, changes that you can then include are:

  • Change the default label in the search box.
  • Set a default text in the search box.
  • Tune 'Advanced Search'.
  • Change the text on the "submit button”.

And much more, see module page:

https://www.drupal.org/project/custom_search

13. Persistent Login

Drupal 8 core does not have a 'remember password' function when you log in. You can remain automatically logged for some time, but that is based on a PHP session. This module does not, you can also:

  • How long users can stay logged in.
  • How many places a person can be logged in at once.
  • Select certain pages that the user must log in again at. These are usually pages where more sensitive information is available.
  • Allow the user to delete all his logins themself.

https://www.drupal.org/project/persistent_login

14. Realistic Dummy Content

Source image: gov.uk

Using the Devel module you can automatically generate content so you can see if your modules / themes work well. But it gives an unrealistic picture of the end result, this module generates more realistic images and texts.

https://www.drupal.org/project/realistic_dummy_content

15. Password Policy

Although I am a fan of the aforementioned 'Password strength' module, this can also be useful if you want to make a specific password policy on your Drupal website.

https://www.drupal.org/project/password_policy

16. Mass Password Reset

This module, we often use to implement Drupal social intranet OpenLucius: in preparation of a new intranet you can add all users and content on a test environment, without notifying people of their new accounts through e-mail.

Once the social intranet went live, we sent all users at once an email with a login link via this module; the system was live!

https://www.drupal.org/project/mass_pwreset

Wrap Up

So far that’s what I noticed last month in Drupal modules, stay tuned for more fat Drupal content!

Source header image

Apr 12 2017
Apr 12

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

It took a while before I could write a new edition, I was just busy with the production of customer social intranet projects :) Here again with a brand new version, what struck me in module updates in the past month:

Dutch version of this blog here

1. D8 Editor Advanced link

A popular module that extends the standard editor in Drupal 8 with additional options for managing links. You can now add the following attributes:

  • title
  • class
  • id
  • target
  • rel

https://www.drupal.org/project/editor_advanced_link

2. Password strength

Default password checks are stupid and annoying for the user: they can check the entered password meets certain rules, such as the number of characters and varying types herein (symbols, numbers, capital letters etc.).

This is a stupid way of checking because the password 'Welcome123' is accepted, while it is easy to guess.

This module enables a secure password policy by "pattern-matching" and "entropy calculation”. Almost every type of password is accepted, as long as it has sufficient entropy.


Source

How it works

Instead of checking strict rules, this module calculates the expected time a brute force attack needs to retrieve the password. This is calculated based on underlying patterns:

  • Words that appear in a standard dictionary, common first and surnames and other default passwords.
  • Words from a dictionary, but written in Leet / 1337. For example, where the "e" is written as a three and “a” like an @.
  • A standard sequence of letters like "abcdef", "qwerty" or "123456"
  • Dates or years.

This module has been around since 2007, I wonder why I only encounter this now :) It is currently available in alpha for Drupal 8 and stable for Drupal 7 available - it is supported by Acquia and Card.

So if you want people to not have to bother to look for a password such as "one special character, 1 upper case and at least 8 characters', then this module offers a solution.

https://www.drupal.org/project/password_strength

3. Better Field Descriptions

In order to give content managers issues, it is possible to write an explanation of all content fields that they import. But the standard explanation in a field in the backend of Drupal are often irrelevant, to not apply these generic texts in the implemented user story of the installation concerned.

After installing this module you can:

  • Content managers have their own explanation text per field.
  • Set where it stands: above or below the field.
  • The explanatory style that you like.

https://www.drupal.org/project/better_field_descriptions

4. Better login

Want to make the standard Drupal login screen better? Then install this module and you are good to go: through template overrides you can then do the required further tuning of the layout of the login screen.

https://www.drupal.org/project/betterlogin

5. Ridiculously Responsive Social Sharing Buttons

Another social sharing module, but as you see in the title: these are terribly responsive. The icons are SVG based and you need no external services such as AddThis.

Advantage: you're less dependent and have your data in hand, downside: you have less functionality- such as comprehensive statistics.

https://www.drupal.org/project/rrssb

6. Flush Cache

If you are not using Drush or Drupal console then you can Drupal caches flush via “the 'Flush all caches" button in the Drupal backend. But in a production environment, you will almost never flush all caches, it can cause severe performance problems.

This module solves that problem: install it and you have more control over the caches you want to flush.

https://www.drupal.org/project/cacheflush

7. Multiple Selects

Have your Drupal content management easier with 'multiple selects' administration, this image seems to me to speak for itself:

https://www.drupal.org/project/multiple_selects

8. Neutral paths

If you are running a multilingual Drupal website, visitors can see the content in one language: the currently active language. Sometimes you would like to see pages in another language. In addition: content managers / Drupal administrators usually want English and not the backend default language, in our case, often Dutch.

Issue tracking for example, much easier if the backend is in English: Drupal documentation and support in English is much more available than in Dutch.

This module ensures that you can visit other pages in another language than the default. And can navigate the backend in English, while frontend is in another language.

https://www.drupal.org/project/neutral_paths

9. Password Reset Landing Page (PRLR)

Drupal core includes a 'password' function: If you have forgotten your password then you can request a one-time login link that is automatically mailed to you.

If you click on the login link, you will see a screen with a login button. Once you click the 'login' button you are logged in and you are redirected to your profile page - that's it.

You are in this situation where your password is lost / forgotten. You are not required to change your password. This is not usually done, so people often endlessly request login links.

This module solves this: the screen where you end up after clicking on the login link not only contains a login button, but also a function to change your password immediately.

https://www.drupal.org/project/prlp

10. Auto Purge Users

The user list in Drupal is usually not or hardly ever administered. If people have long been inactive or have not completed their registration, the account can usually be removed to avoid overhead and security issues.

This module does it for you automatically, it checks inactivity below a point and blocks users if they meet:

  • Certain time inactive.
  • Account never activated after registration.
  • Not been logged in for a period of time.

Not a popular module, but in the case of an example Drupal social intranet it can come in handy.

https://www.drupal.org/project/purge_users

11. Vertical Tabs Config

Want to influence the order of the Drupal tabs? Or do you want some tabs to not show all of your content manager? To keep tabs simple and usable you can install this module: select which tabs to show and in what order.

Modules with similar functions: Simplify and Hide vertical tabs.

https://www.drupal.org/project/vertical_tabs_config

12. Custom Search

The default Drupal search is fine, but really standard: you have few options to tune the engine. After installing this module, changes that you can then include are:

  • Change the default label in the search box.
  • Set a default text in the search box.
  • Tune 'Advanced Search'.
  • Change the text on the "submit button”.

And much more, see module page:

https://www.drupal.org/project/custom_search

13. Persistent Login

Drupal 8 core does not have a 'remember password' function when you log in. You can remain automatically logged for some time, but that is based on a PHP session. This module does not, you can also:

  • How long users can stay logged in.
  • How many places a person can be logged in at once.
  • Select certain pages that the user must log in again at. These are usually pages where more sensitive information is available.
  • Allow the user to delete all his logins themself.

https://www.drupal.org/project/persistent_login

14. Realistic Dummy Content

Source image: gov.uk

Using the Devel module you can automatically generate content so you can see if your modules / themes work well. But it gives an unrealistic picture of the end result, this module generates more realistic images and texts.

https://www.drupal.org/project/realistic_dummy_content

15. Password Policy

Although I am a fan of the aforementioned 'Password strength' module, this can also be useful if you want to make a specific password policy on your Drupal website.

https://www.drupal.org/project/password_policy

16. Mass Password Reset

This module, we often use to implement Drupal social intranet OpenLucius: in preparation of a new intranet you can add all users and content on a test environment, without notifying people of their new accounts through e-mail.

Once the social intranet went live, we sent all users at once an email with a login link via this module; the system was live!

https://www.drupal.org/project/mass_pwreset

Wrap Up

So far that’s what I noticed last month in Drupal modules, stay tuned for more fat Drupal content!

Source header image

Mar 08 2017
Mar 08

Previously we published 17 tips and trick for OpenLucius users which was well received by OpenLucius users, this sequel was inevitable.

The use of standard features in OpenLucius is usually readily apparent, for example: adding groups, members, tasks, messages, files, folders and book pages.

There are many useful functions in OpenLucius that make working in it more fun and easy, but are a little less obvious:

1. Turn off direct messages for clients

For one-to-one messages between two people Direct Messages are possible. Here people can exchange short messages in a chat-like way:

For some users this feature would only work for internal staff; they do not enable this feature for example, for the clients they work with on projects in OpenLucius.

To turn off Direct messages for customers: Go to Settings -> Notification Settings and uncheck Add direct messages to customers.

2. Default enabled apps and app-order when creating a group

Each organization uses OpenLucius in its own unique way, such as:

  • Social intranet
  • Project management system
  • Helpdesk for clients
  • Documentation system (wiki)
  • File manager

Consequently, it is useful that once someone has created a new Group it immediately turns on the desired default apps, in optimal order. This is under Settings -> Application Configuration:

3. Email to external people

There will be plenty of communication with external people who do not participate in your OpenLucius social intranet. But you do want to document the communication with these people and make it easy to find for everyone in your teams. Consider:

  • Collaborating to offer: potential customer is not yet added in OpenLucius.
  • Collaborating with a supplier.
  • Stubborn customers who stick to email and cc-trees.

Constantly copying and pasting the external emails, you become fed up quite quickly. Therefore, in OpenLucius you can easily email external people all communication - via a message, task, event, document, book page or comment:

Subsequently, which external emails are sent is neatly logged:

FYI: if you enable the email integration email replies can automatically be places as a comment in OpenLucius.

5. Block Users

Do you want people to not be able to login because they are out of service, or a project is over? Then you can simply block them, their created content will continue to exist.

From the user dashboard, edit the user:

Choose blocked and save:

6. Your own tasks board

Work focused on your tasks via a personal tasks board: this board collects all your tasks from all groups you are a member of. It is also possible to directly filter a group in this personal Kanban board:

7. Empty directory = another icon

OpenLucius includes an app for easy file management within your teams which includes all kinds of useful features, such as directly showing that a folder is empty:

8. See the context of a file

A file is always has context: for example, it belongs to a message, a task, a document, a comment, an email, etc. It is convenient to immediately see the context of a file.

Within OpenLucius you can add files anywhere: in messages, tasks, events, book pages and comments. Then all these files are listed in the Files app. You can see where a particular file was uploaded:

9. Archive a task lists

Within groups, you can create task lists, in which you can group tasks and prioritize. Such a task list can be archived, so you keep your current job screen relevant:

That's all folks

That's all for now: 9 tips and tricks to make your daily work life easier. I guess more tips and tricks later on, so stay tuned!

Dec 29 2016
Dec 29

The use of basic functions in OpenLucius are pretty clear most of the time. Think of basics like: adding groups, members, tasks, messages, files, folders and book pages.

But there are many useful functions in Drupal distro OpenLucius that make working in it more fun and easy, but those functions are a little less obvious for end-users.

17 tips and tricks to work faster, smarter and more efficient:

Groups

1. Choose which apps are enabled by group:

2. Determine the order of the apps in a group:

You can determine the order of the enabled apps in a group, the foremost positioned app will automatically be default: it opens when you click on the group. By default this is 'Overview', but you can open 'Messages' as first by dragging it to the front for example.

3. Archive a group:

If you click on "Archive" under the drop-down button behind the group name (1), the group will be placed in the archive (2). A group can be reactivated at any time.

Taskboard

4. Easily prioritize tasks:

Through dragging them in the task board:

5. Manage the status of an assignment yourself:

  1. Click on Username -> 'Configuration'
  2. Hit tab 'Task statusses'
  3. Add new Terms
  4. Order Terms by drag and drop

6. "Open in new tab" shows the task in a full screen window, not in a pop-up:

Task list

7.Direct, adding assignments inline:

8. Press 't' to add a task directly:

From any screen OpenLucius you can type 't' on the keyboard: the "Add Task" window appears, in which you can directly enter a job in any group. If you are already in a group, that group will be automatically selected:

Calendar

9. Show OpenLucius calendar in your own calendar:

This is possible in Outlook, Apple Calendar or Google Calendar; all the more common calendars support. Click on the orange icon at the bottom left of the calendar (the iCal feed):

10. Drag assignments on your personal and group calendar:

Move a task due date by dragging it from one day to another:

Files

11. Easy placing multiple files in a folder:

Check files and drag them at once to a folder:

Book (wiki)

12. Revisions are tracked automatically when Book Pages are updated:

13. Easy overview of differences with the current and previous revision:

14. Easy building hierarchy in Book Pages.

Through dragging you can determine the order of the pages herein you could also make simple hierarchy by dragging a page to another page:

Collaborate with customers

15. Hiding comments for customers

If you work with clients, you can choose at every comment to hide it from the client.

Hidden comments are then given a dark background:

Misc

16. A placed YouTube link will automatically show the video:

17. Everyone can choose their preferred language:

Wrap up

This concludes this edition of Tips and Tricks for OpenLucius, there are many more skills; these are addressed in the next edition. Do you have any questions in the meantime?

Let us know!

Credits header afbeelding

Dec 14 2016
Dec 14

We updated OpenLucius, an open source work management system -contributed as a Drupal distribution. These are the most important improvements:

1.Modern layout for folders and files

The app ‘files’ takes care of central management of files and folders. Prevents messy document management on 'G-drives' and in email boxes. You can see the old layout in this video (we will update it soon):

The new layout:

Top 3 improvements:

  • Added thumbnails of images
  • Mobile ready, so you can tap on file/folder with your finger.
  • See where a file originated from (a message, task, event or ‘isolated file upload’), who placed it and when.

2. New group overview

This is a central view of all content in a group. It has an ‘activity stream’, which lets gives you insight in statistics -and recent activity.

The former group dashboard was a confusing 'hope with content', the new overview provides a better overview of statistics and all activities within the group. Depending on the enabled apps, you can find a summary of the content here.

Tasklist and Taskboard

  • Total tasks.
  • Open tasks.
  • Your open tasks.

Messages

  • Total messages
  • Total messages added last week

Calendar

  • Upcoming events

Book (wiki)

  • Totaal book pages

Members

  • Random members in this group

Social

  • A cover image, logo and description: to give the group an own identity, so users are provided with some cool recognition :)
  • Recent activity stream.

3. Enable and disable apps in a Group | improved design

It turned out that en/disabling apps per group was not clear for many users: the screen was too technical. Hence the re-vamp, including descriptions of what members can do with each app:

4. Boek pagina’s (wiki) re-design

The Book app is a place for documentation, similar to a wiki. Think of a staff handbook, project agreements or project notes. Revisions are tracked automatically, so all group members can contribute safely.

In this video you’ll see the old layout (we hope to also update this video soon).

The new, clean layout:

And the overview of book pages in a group:

5. Group settings | improved layout

Same here, this screen was too technical, causing many users were unaware of its features:

  • Ability to work with clients in a group.
  • Open Group: accessible to everyone.
  • Enter social stuff: cover image, group logo and description.

~37 minor optimizations and bug fixes

There are also minor changes done for optimizations in layout and several minor bugs fixed.

That’s all folks

That’s it for now. If you encounter an issue or have a feature request, please add it in the issue Q on Drupal.org.

Download OpenLucius here for free >>

Thanks in advance, happy collaboration!

Credits header foto

Dec 13 2016
Dec 13

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

Speed is important in a Drupal website, very important. For visitors as well as search engines, it’s an essential benchmark to success. But how do you keep your Drupal system fast, even when it has millions of pages and documents? Solr is the answer, here is why and how in Drupal 8.

(Dutch version here)

At the moment, we’re migrating a Drupal 7 website to a Drupal 8 system in which there will be millions of pages and documents in the near future. The aim is to have end-users navigate mainly through the search function. That means it has to be extremely fast.

Drupal 8 core contains a great search function, but because this searches standardly in a MySQL database, the search function becomes too slow when the website contains a lot of pages and documents.

Fast search within Drupal 8 with Solr 6

Just to be clear: when you have a Drupal 8 website with a lot of content, the system will be fast enough when you navigate through clicking menu items or links in content/blocks. We’re now talking about the search function and getting relevant search results fast.

Search engine Apache Solr has been Drupal’s friend in this for years. An implementation of Solr ensures a fast search function on your Drupal system and offers extra functions such as:

  • Fuzzy search: spelling mistakes and differences are possible
  • Facetted search: search filters.
  • Rich text-snippets: a piece of text like Google gives you as well, where the search query is highlighted. If you have implemented schema.org, found data will automatically be presented ‘rich’ and placed in the correct context with relevant label.
  • ‘Did you mean…’ function: suggestions for synonyms, or keywords that are close to your search query.
  • Configure the most relevant results from a query, so the visitor sees the most relevant content at the top. Examples from how you can order: content type, comment count, date, sticky, title, headings (h1->h6), body text and lots more.

Especially the fuzzy search is very welcome; Solr really is a beautiful engine and it’s incredibly fast: millions of documents are no problem. Of course, if your servers capacities are configured correctly.

Implementing Solr in Drupal 7 versus Drupal 8

Solr in Drupal 7 is relatively simple to implement, because it has already been developed for years: lots of stable modules are released to produce all sorts of user stories.

In Drupal 8, the integration has already been developed quite a bit, but it’s not yet plug-and-play like in Drupal 7. The design of the architecture has also been changed: you had two important Solr modules for Drupal 7: Apache Solr Search and Search API Solr, both have their own eco-system of modules.

In Drupal 8 the forces were joined, whereby the development became better and extra modules don’t have to choose anymore which eco-system they will build. Modules as Facet API (now Facets), Facet API Pretty Paths, Search API Autocomplete, etc.) can now focus on one implementation instead of two (source).

Implementing Solr in Drupal 8

At the time of this writing, the Drupal 8 Solr module is in beta1, which includes in this case that it is stable enough to put it in, but it's not plug-and-play yet.

Underneath, you can find an explanation of how we got it to work:

The Solr server

We have set up a new VPS, on which Solr is installed. It doesn’t work on the live server of the website, because the concerned hoster didn’t support it.

Besides that, Solr can be managed and secured better on a dedicated, isolated server. By means of opening and closing the right ports, a connection can be made between the public server of the Drupal 8 website and the Solr server.

All other ports are closed using a firewall. You don’t need graphical interfaces, only an SSH access which is secured with keys. There is one GUI: that's Solr's. We blocked that with help of the firewall. You can also do this with help if Linux' IP tables. But make sure to add a service for this, or else you'll loose your security on reboot.

The capacity for the needed Solr server can be calculated, see here.

Install and configure Drupal Solr module

We installed the following modules:

  • Search (core)
  • Search Api - contrib module
  • Search Api Solr - contrib module
  • Composer manager - contrib module, is used for managing external libraries. In this case we are going to install the Solarium lib.

Optional

  • Search Autocomplete - contrib module, this is used so that the search box in the frontend can also be used by the end user to search through Solr. This makes fuzzy search and instant search suggestions relatively easy. This doesn’t work out-of-the-box at the moment, that’s why we have written a custom code for it (see further down this blogpost).

Installation and configuration Drupal 8 connection with Solr

I’m not going to explain the installation of Solr itself in this blogpost, you can find instructions for that here.

1. Installation ‘Solarium’ library in Drupal 8

If you’ve installed the modules mentioned above, you first go to Reports -> Composer manager. There you will see the code that you have to fill in your terminal to install ‘Solarium’ lib.

As soon as you’ve gone through the ‘composer drupal-update’, Solr initially is ready in Drupalrootmap/vendor/solarium:

FYI: you can probably find the ‘Vendor’ file in your GIT ignore file.

2. Add Solr ‘server’ to Drupal 8

  • Go to Settings -> Search and metadata -> Search API.
  • Click Add server and configure the Solr server, an example of the local installation:

Most important settings:

  • Solr version (we use version 6)
  • Port
  • Host

Click ‘Save’ -> Now your Drupal 8 system has a Solr server connection, but isn’t doing anything at the moment.

3. Add ‘Index’

To actually get Drupal content indexed in Solr, you will have to make an ‘index’. Go to Settings -> Search and metadata -> Search API. Click on ‘Add index’:

After you’ve made an index, open it and click the tab ‘Fields’, afterwards click ‘Add Fields’:

Now you can configure the index:

This interface is still a little cumbersome, probably because the Drupal Solr module currently still is in beta1. For example, you can’t see which fields you’ve added to the index, so pay attention to not add the fields multiple times.

It’s a manual task, but it’s fine to do.

You can see the added Fields under the tab ‘Fields’:

4. Configure ‘Processors’

Click the tab ‘Processors’, here you can indicate under what conditions the Solr search has to be executed:

5. Let’s index

Your Drupal content should now be indexed in Solr at a Cron run, you can start this manually. You can see the status:

6. Frontend: queries and search results for end users

This is what it’s all about in the end, search results for the Drupal website visitor:

  • Super-fast
  • Most relevant results on top
  • Spelling mistakes, no problem

Think: Google for your own website ;)

The modules that are available for this don’t work good enough (yet) for our implementation. It didn’t seem to work with Views either, you can configure an ‘index View’, but that didn’t give any results.

Custom code seemed to be the best option at the moment; to get the global ‘Search autocomplete box’ to work as well.

>> Check the code on Github here >>

Explanation of some code snippets

For explanation: see code comments, herewith are some code snippets explained:

hook_page_attachments_alter is to solve the bug from Input field value is not sent with the AJAX request when using URL call back with custom view and exposed filter. The search autocomplete is only able to use contextual filters. With this hook, you can use your own filter (or set a default).

The LuciusSolrController is divided in:

__construct for making, there’s a @todo in here.

$config = \Drupal::config('search_api.server.solr');

This actually must not happen and has to come as a service. (because of dependency injection, which is missing for this part).

create

Different services are added here (injected in the container).

search

We build the custom search here, this function has a second $processing_callback which should be used for the autocomplete version, but which still has to be adjusted.

lucius_solr_autocomplete_doc_processing

This is for the construction of the autocomplete results.

lucius_solr_autocomplete

This would have to invoke the lucius_solr_autocomplete_doc_processing callback.

getSolrConnector

Function for downloading the solrConnector.

prepare_solr_query

Function that the query fuzzy makes and cleans up using an xss filter. Probably other things have to be done here for contains etc. but for now fuzzy is sufficient. (Possibly contains has to be in the search).

Beta

This module is also still in beta, what means that it should be tested extensively, on speed, safety, stability and documentation.

I can imagine you have questions about it, let us know.

Frontend search results screenshots

Since the Drupal 8 data contains private data, we can’t show those results, instead here are a few simular screenshots from a Solr implementation in OpenLucius (a work management system contributed as a Drupal distribution).

Auto complete search box

Search results including in-document search

With help of Apache Tika to index attached document content (doc, xls, pdf, zip, etc):

FYI: Data collections in Solr

You can make data collections in Solr if you want to index more than one website or external data source or if you want to make them more searchable, then it’s good to do that in different data collections. Depending on your version of Solr, it’s also called:

  • Core (Solr v4)
  • Shard/collection (Solr v5)
  • Collection (Solr v6)

To summarize

Does your Drupal website contain a lot of content and documents? Solr helps big time. In Drupal 7, this integration already was very developed and relatively easy: no need for a custom code.

In Drupal 8, this implementation is also available in beta1, custom code is still needed to get the results as you like on the screen of the Drupal website visitor. I will not be surprised if you won’t need custom code anymore in a few months, because the Drupal community constantly works hard on the Solr modules.

Header image credit

Dec 13 2016
Dec 13

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

Speed is important in a Drupal website, very important. For visitors as well as search engines, it’s an essential benchmark to success. But how do you keep your Drupal system fast, even when it has millions of pages and documents? Solr is the answer, here is why and how in Drupal 8.

(Dutch version here)

At the moment, we’re migrating a Drupal 7 website to a Drupal 8 system in which there will be millions of pages and documents in the near future. The aim is to have end-users navigate mainly through the search function. That means it has to be extremely fast.

Drupal 8 core contains a great search function, but because this searches standardly in a MySQL database, the search function becomes too slow when the website contains a lot of pages and documents.

Fast search within Drupal 8 with Solr 6

Just to be clear: when you have a Drupal 8 website with a lot of content, the system will be fast enough when you navigate through clicking menu items or links in content/blocks. We’re now talking about the search function and getting relevant search results fast.

Search engine Apache Solr has been Drupal’s friend in this for years. An implementation of Solr ensures a fast search function on your Drupal system and offers extra functions such as:

  • Fuzzy search: spelling mistakes and differences are possible
  • Facetted search: search filters.
  • Rich text-snippets: a piece of text like Google gives you as well, where the search query is highlighted. If you have implemented schema.org, found data will automatically be presented ‘rich’ and placed in the correct context with relevant label.
  • ‘Did you mean…’ function: suggestions for synonyms, or keywords that are close to your search query.
  • Configure the most relevant results from a query, so the visitor sees the most relevant content at the top. Examples from how you can order: content type, comment count, date, sticky, title, headings (h1->h6), body text and lots more.

Especially the fuzzy search is very welcome; Solr really is a beautiful engine and it’s incredibly fast: millions of documents are no problem. Of course, if your servers capacities are configured correctly.

Implementing Solr in Drupal 7 versus Drupal 8

Solr in Drupal 7 is relatively simple to implement, because it has already been developed for years: lots of stable modules are released to produce all sorts of user stories.

In Drupal 8, the integration has already been developed quite a bit, but it’s not yet plug-and-play like in Drupal 7. The design of the architecture has also been changed: you had two important Solr modules for Drupal 7: Apache Solr Search and Search API Solr, both have their own eco-system of modules.

In Drupal 8 the forces were joined, whereby the development became better and extra modules don’t have to choose anymore which eco-system they will build. Modules as Facet API (now Facets), Facet API Pretty Paths, Search API Autocomplete, etc.) can now focus on one implementation instead of two (source).

Implementing Solr in Drupal 8

At the time of this writing, the Drupal 8 Solr module is in beta1, which includes in this case that it is stable enough to put it in, but it's not plug-and-play yet.

Underneath, you can find an explanation of how we got it to work:

The Solr server

We have set up a new VPS, on which Solr is installed. It doesn’t work on the live server of the website, because the concerned hoster didn’t support it.

Besides that, Solr can be managed and secured better on a dedicated, isolated server. By means of opening and closing the right ports, a connection can be made between the public server of the Drupal 8 website and the Solr server.

All other ports are closed using a firewall. You don’t need graphical interfaces, only an SSH access which is secured with keys. There is one GUI: that's Solr's. We blocked that with help of the firewall. You can also do this with help if Linux' IP tables. But make sure to add a service for this, or else you'll loose your security on reboot.

The capacity for the needed Solr server can be calculated, see here.

Install and configure Drupal Solr module

We installed the following modules:

  • Search (core)
  • Search Api - contrib module
  • Search Api Solr - contrib module
  • Composer manager - contrib module, is used for managing external libraries. In this case we are going to install the Solarium lib.

Optional

  • Search Autocomplete - contrib module, this is used so that the search box in the frontend can also be used by the end user to search through Solr. This makes fuzzy search and instant search suggestions relatively easy. This doesn’t work out-of-the-box at the moment, that’s why we have written a custom code for it (see further down this blogpost).

Installation and configuration Drupal 8 connection with Solr

I’m not going to explain the installation of Solr itself in this blogpost, you can find instructions for that here.

1. Installation ‘Solarium’ library in Drupal 8

If you’ve installed the modules mentioned above, you first go to Reports -> Composer manager. There you will see the code that you have to fill in your terminal to install ‘Solarium’ lib.

As soon as you’ve gone through the ‘composer drupal-update’, Solr initially is ready in Drupalrootmap/vendor/solarium:

FYI: you can probably find the ‘Vendor’ file in your GIT ignore file.

2. Add Solr ‘server’ to Drupal 8

  • Go to Settings -> Search and metadata -> Search API.
  • Click Add server and configure the Solr server, an example of the local installation:

Most important settings:

  • Solr version (we use version 6)
  • Port
  • Host

Click ‘Save’ -> Now your Drupal 8 system has a Solr server connection, but isn’t doing anything at the moment.

3. Add ‘Index’

To actually get Drupal content indexed in Solr, you will have to make an ‘index’. Go to Settings -> Search and metadata -> Search API. Click on ‘Add index’:

After you’ve made an index, open it and click the tab ‘Fields’, afterwards click ‘Add Fields’:

Now you can configure the index:

This interface is still a little cumbersome, probably because the Drupal Solr module currently still is in beta1. For example, you can’t see which fields you’ve added to the index, so pay attention to not add the fields multiple times.

It’s a manual task, but it’s fine to do.

You can see the added Fields under the tab ‘Fields’:

4. Configure ‘Processors’

Click the tab ‘Processors’, here you can indicate under what conditions the Solr search has to be executed:

5. Let’s index

Your Drupal content should now be indexed in Solr at a Cron run, you can start this manually. You can see the status:

6. Frontend: queries and search results for end users

This is what it’s all about in the end, search results for the Drupal website visitor:

  • Super-fast
  • Most relevant results on top
  • Spelling mistakes, no problem

Think: Google for your own website ;)

The modules that are available for this don’t work good enough (yet) for our implementation. It didn’t seem to work with Views either, you can configure an ‘index View’, but that didn’t give any results.

Custom code seemed to be the best option at the moment; to get the global ‘Search autocomplete box’ to work as well.

>> Check the code on Github here >>

Explanation of some code snippets

For explanation: see code comments, herewith are some code snippets explained:

hook_page_attachments_alter is to solve the bug from Input field value is not sent with the AJAX request when using URL call back with custom view and exposed filter. The search autocomplete is only able to use contextual filters. With this hook, you can use your own filter (or set a default).

The LuciusSolrController is divided in:

__construct for making, there’s a @todo in here.

$config = \Drupal::config('search_api.server.solr');

This actually must not happen and has to come as a service. (because of dependency injection, which is missing for this part).

create

Different services are added here (injected in the container).

search

We build the custom search here, this function has a second $processing_callback which should be used for the autocomplete version, but which still has to be adjusted.

lucius_solr_autocomplete_doc_processing

This is for the construction of the autocomplete results.

lucius_solr_autocomplete

This would have to invoke the lucius_solr_autocomplete_doc_processing callback.

getSolrConnector

Function for downloading the solrConnector.

prepare_solr_query

Function that the query fuzzy makes and cleans up using an xss filter. Probably other things have to be done here for contains etc. but for now fuzzy is sufficient. (Possibly contains has to be in the search).

Beta

This module is also still in beta, what means that it should be tested extensively, on speed, safety, stability and documentation.

I can imagine you have questions about it, let us know.

Frontend search results screenshots

Since the Drupal 8 data contains private data, we can’t show those results, instead here are a few simular screenshots from a Solr implementation in OpenLucius (a work management system contributed as a Drupal distribution).

Auto complete search box

Search results including in-document search

With help of Apache Tika to index attached document content (doc, xls, pdf, zip, etc):

FYI: Data collections in Solr

You can make data collections in Solr if you want to index more than one website or external data source or if you want to make them more searchable, then it’s good to do that in different data collections. Depending on your version of Solr, it’s also called:

  • Core (Solr v4)
  • Shard/collection (Solr v5)
  • Collection (Solr v6)

To summarize

Does your Drupal website contain a lot of content and documents? Solr helps big time. In Drupal 7, this integration already was very developed and relatively easy: no need for a custom code.

In Drupal 8, this implementation is also available in beta1, custom code is still needed to get the results as you like on the screen of the Drupal website visitor. I will not be surprised if you won’t need custom code anymore in a few months, because the Drupal community constantly works hard on the Solr modules.

Header image credit

Sep 16 2016
Sep 16

The 'Popup question redirect' module allows Drupal site builders to show website visitors a pop-up in which a question can be asked. If the vistor clicks "Yes" they will be redirected to a given webpage.

Sep 13 2016
Sep 13

We've updated OpenLucius, a Drupal social intranet / work management system. This is the most important new stuff we built for you:

1. Board

We added a new app: Board. In this Kanban board you can collaborate on tasks more easily and efficient:

  • Inline add and edit tasks (cards).
  • Drag and drop to change status.
  • Drag and drop to change priority: highest placed task has highest priority.
  • Inline changing of due date.
  • Inline changing of assignee.
  • View task in modal / pop-up, so you’ll keep the board in the background.

Administer task statuses and their order

If you are an admin, then you can manage the statuses and the order of it yourself:

2. More user friendly because of interface optimization

All pages got quite a facelift.

3. Update activity stream and status updates

The group activity stream and status updates got a big update, it’s now possible to like and comment inline. It automatically collapses comments and more of this fancy interactive stuff.

3. Adding tasks faster and easier

You can now add a task from any page in OpenLucius and therefore don’t need to navigate to a specific group for this. You can add a task from any page by typing letter ’t’ or select 'Task menu' => 'Add new task’.

Handy: if you are navigating in a group, then that group is automatically selected.

4. Easier to work on tasks with modal screens

If you add a task or open it, then it’s nice if your underlaying list (calendar, task list, or board) is not lost. So tasks now open in a modal / pop-up, so you son’t lose your underlaying overview -thus navigating easier and faster.

5. Instant insight into projects and tasks: reports

See how budgets on projects and tasks are doing:

  • Tasks that are due.
  • Insights in budgets of projects.
  • Time overviews where you can see exactly who worked how long on what.

Reports menu

Budget overview per group

Time overview per user

  1. Total tracked time for this user (4) in this date range (5)
  2. Breakdown of tracked time in hours per day
  3. Filter on status todo
  4. Filter on user
  5. Filter on date range
  6. Aggregated time, clustered by 'time type'. You'll also see the percentage of 'effective time' tracked (see also).
  7. Breakdown of tracked time in percentages for each todo-list
  8. Breakdown of tracked time in percentages for each todo-list, clustered by 'time type'(See also set budget and 'time type').
  9. Breakdown of tracked time per day per todo
  10. All Todo-lists with budgets and total tracked time in that Todo-list

6. Insight into project budgets; overhead and effective time

You can now add a budget per group and choose whether it’s effective time or overhead. During a project, you’ll have realtime insights in group 'Budgets':

  • How much of the budget are spent and where.
  • Insight into effective time and overhead.
  • Click through to see more details: how much time is spent on wich tasks.

7. 'Text Document' => 'Book Page’

We received feedback that the title of the app Text documents was confusing. This app is used for example for:

  • Handbooks.
  • Documentation projects.
  • Meeting notes.

After a survey we found Book (with underlying Book Pages) the best choice.

8. Various tuning and fixes

Furthermore, we did ~60 smaller fixes for optimization, usability and stability.

Aug 22 2016
Aug 22

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

Here’s what struck me last month about Drupal modules. This month I have chosen to focus on Drupal 8 as this is slowly becoming the go-to version - partly because many required modules have been migrated and grown up.

1. Require Login

Make sure all your visitors on your Drupal website are obligated to log in. Handy for a Drupal intranet or social communities. It is possible to exclude certain paths so that they are publicly available.

Download

2. 403 to 404

Mini module that ensures you will get to see a page not found on an access denied page. This way others will not found out that this page is an administration page.

Global redirect contains a similar feature.

[edit]
Comment from Adam Evertsson:

About 403 to 404, you write that Global Redirect has a similar feature. There isn't a Drupal 8 version, and that functionality has been included in the Redirect module, https://www.drupal.org/project/redirect
[/edit]

Download

3. Block tabs

Add tabs in blocks in order to cluster information. Similar to the Quick Tabs module. But Quick Tabs has no version for Drupal 8. Furthermore Block Tabs is offering integration with the Drupal 8 API, plugin system, block, entity and config API. Add CSS yourself to adjust the tabs according to your house style.

Download

4. ShareThis

Do you like to have social buttons so people can easily share pages on Facebook, Twitter and LinkedIn? Integrate the ShareThis social bookmarking service in your Drupal 8 website using this module to get you socialized in no time.

Download

5. Page Load Progress

Some heavy activities in a Drupal website can take a few seconds. In these cases it is preferable to lock the screen to avoid impatient users clicking other features. You can show a throbber and thus lock the screen using this module.

Download

6. Adminimal Admin Toolbar (Drupal 8)

The Drupal 8 admin toolbar is fine, but could be better. This version is inspired on the popular module Adminimal Administration Menu

Download

7. Node Order

Manually organizing nodes within a given Drupal taxonomy term. By default Drupal is sorting on sticky and date created. Using this module you can determine the order yourself.

Download

8. Mail system

This popular module is migrated to Drupal 8. This allows the administration of all kinds of actions related to sending an email from Drupal 8. For example:

  • Formatting of emails in HTML
  • Managing email per Drupal module
  • Templates for e-mails

Download

9. Optimizely

Everybody should constantly be A/B testing for conversion optimization. Optimizely.com is such an A/B testing tool that integrates in your Drupal 8 website using this module.

Download

10. Menu block

Drupal 8 has standard features to place menus via blocks in your website. But it misses some features that are complemented by this module:

  • Determine how many menu levels you want to show
  • Set initial menu level
  • Expand all Drupal menu items

Download

11. Update External Links

Open external links in text automatically in a new window to avoid people navigating accidentally away from your Drupal 8 website. Similar to the modules External links and External New Tab

Download

12. Pinterest Hover button

Simple module that let’s you show automatically a pin it button as soon as website visitors hover over an image. Now also available for Drupal 8.

Download

13. Easy Social

Similar to the above mentioned ’ShareThis’: make it easy to share your Drupal 8 content on social media platforms such as Twitter, Facebook and LinkedIn. This module is not using an external service unlike ‘ShareThis’.

Download

14. Chosen

Makes selecting items (f.e. Drupal taxonomy terms) easier for content managers in your Drupal system. Now available for Drupal 8.

Download

Wrap up

OK, that’s it for now, stay tuned for more interesting Drupal stuff and next month again a cool Drupal modules update!

Credits header foto
Credits mail foto
Credits social foto

Aug 22 2016
Aug 22

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

Here’s what struck me last month about Drupal modules. This month I have chosen to focus on Drupal 8 as this is slowly becoming the go-to version - partly because many required modules have been migrated and grown up.

1. Require Login

Make sure all your visitors on your Drupal website are obligated to log in. Handy for a Drupal intranet or social communities. It is possible to exclude certain paths so that they are publicly available.

Download

2. 403 to 404

Mini module that ensures you will get to see a page not found on an access denied page. This way others will not found out that this page is an administration page.

Global redirect contains a similar feature.

[edit]
Comment from Adam Evertsson:

About 403 to 404, you write that Global Redirect has a similar feature. There isn't a Drupal 8 version, and that functionality has been included in the Redirect module, https://www.drupal.org/project/redirect
[/edit]

Download

3. Block tabs

Add tabs in blocks in order to cluster information. Similar to the Quick Tabs module. But Quick Tabs has no version for Drupal 8. Furthermore Block Tabs is offering integration with the Drupal 8 API, plugin system, block, entity and config API. Add CSS yourself to adjust the tabs according to your house style.

Download

4. ShareThis

Do you like to have social buttons so people can easily share pages on Facebook, Twitter and LinkedIn? Integrate the ShareThis social bookmarking service in your Drupal 8 website using this module to get you socialized in no time.

Download

5. Page Load Progress

Some heavy activities in a Drupal website can take a few seconds. In these cases it is preferable to lock the screen to avoid impatient users clicking other features. You can show a throbber and thus lock the screen using this module.

Download

6. Adminimal Admin Toolbar (Drupal 8)

The Drupal 8 admin toolbar is fine, but could be better. This version is inspired on the popular module Adminimal Administration Menu

Download

7. Node Order

Manually organizing nodes within a given Drupal taxonomy term. By default Drupal is sorting on sticky and date created. Using this module you can determine the order yourself.

Download

8. Mail system

This popular module is migrated to Drupal 8. This allows the administration of all kinds of actions related to sending an email from Drupal 8. For example:

  • Formatting of emails in HTML
  • Managing email per Drupal module
  • Templates for e-mails

Download

9. Optimizely

Everybody should constantly be A/B testing for conversion optimization. Optimizely.com is such an A/B testing tool that integrates in your Drupal 8 website using this module.

Download

10. Menu block

Drupal 8 has standard features to place menus via blocks in your website. But it misses some features that are complemented by this module:

  • Determine how many menu levels you want to show
  • Set initial menu level
  • Expand all Drupal menu items

Download

11. Update External Links

Open external links in text automatically in a new window to avoid people navigating accidentally away from your Drupal 8 website. Similar to the modules External links and External New Tab

Download

12. Pinterest Hover button

Simple module that let’s you show automatically a pin it button as soon as website visitors hover over an image. Now also available for Drupal 8.

Download

13. Easy Social

Similar to the above mentioned ’ShareThis’: make it easy to share your Drupal 8 content on social media platforms such as Twitter, Facebook and LinkedIn. This module is not using an external service unlike ‘ShareThis’.

Download

14. Chosen

Makes selecting items (f.e. Drupal taxonomy terms) easier for content managers in your Drupal system. Now available for Drupal 8.

Download

Wrap up

OK, that’s it for now, stay tuned for more interesting Drupal stuff and next month again a cool Drupal modules update!

Credits header foto
Credits mail foto
Credits social foto

Jun 11 2016
Jun 11

We updated OpenLucius yesterday, these are the most important changes:

1. Main menu

On many requests, we have given the work management in OpenLucius a more prominent place. Work management is mainly about your assigned tasks, these are more accessible now:

2. Order apps per group

You can now specify the order of the enabled Apps in a group. The first placed App will open automatically when you open a Group.

3. Choose language

Everyone can choose preferred language now:

4. Manage status updates

You can now manage your own status updates:

5 'Save' button disabled after saving

When you hit the 'Save' button it will be disabled, so you don't accidentally add the same item several times.

6. '+Folder' on group dashboard next to 'Files' heading

An additional button is placed: to create folders fast from the dashboard in a group.

7. Manage and order your own 'Todo statuses'

If you are an admin, now you can configure your statuses under 'configration':

miscellaneous

  • ~ 30 small fixes and optimizations

Credits header foto

Jun 07 2016
Jun 07

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

In this blog serie I will explain how we have built a new multilingual Drupal 8 site. During the process the required HTML, CSS en Javascript was supplied statically and used to build a custom Drupal 8 theme. So we did not use a Drupal core or contrib theme.

We are talking about this website:

This Drupal 8 website consists of pages that are built up from Drupal blocks. Therefore I will explain in detail how we have built these blocks. Furthermore this Drupal 8 website is multilingual: Dutch and English. As listed below I will explain:

  1. Generic structure of a Drupal 8 theme
  2. Initiation Drupal 8 theme and placing supplied assets: CSS, JS, fonts and images.
  3. Breaking down supplied HTML into Twig template files (.html.twig files).
  4. Determination of the Drupal regions.
  5. Building homepage HTML using blocks, and Drupal and Twig template files.
  6. Building contact page using blocks and Drupal 8 core contact form.
  7. Building other pages using Drupal 8 blocks.

Basic knowledge

I assume you already have some experience with Drupal:

  • Installation and general configuration of the Drupal 8 core, modules and themes.
  • Configuration of content types

Drupal 8 theme | The structure

What is a Drupal 8 theme

A theme is a collection of files that determine the look of your Drupal website: what the visitor sees. Only 1 file is required, the .info.yml, but for a complete theme more files are needed.

Drupal 8 uses by default PHP templating engine Twig, part of the Symfony framework where Drupal 8 is built on.

Where do you insert the theme

When creating a custom theme, this is inserted in the /themes folder. Be sure to put the Drupal core themes in the folder /core/themes. Never ever do you put your own theme there, that would be a core-hack: a crying shame.

To keep your themes folder organized, it is a best practice to divide them in the folders:

  • /contrib: place here all themes downloaded from Drupal.org
  • /custom: place here all themes that you are building yourself.

Each individual theme is inserted in a folder with the name of the concerning theme. That name can only contain lowercase letters, must start with a letter and use underscores (_) instead of spaces.

The (partial) structure for our installation will look like this:

|-core
| |-modules
| |-themes
| | |-bartik
| | |-seven
..
|-modules
|-themes
| |-contrib
| |-custom
| | |-openlucius

Which files are part of a Drupal 8 theme

As indicated, a useful theme will contain more files then just the mandatory THEMENAME.info.yml.

About .yml files

Yaml (.yml) files are files intended for data and not for markup. These are not necessarily Drupal 8 specific files: they are also used in other programming languages such as C, Perl and Python. Within Drupal 8 they are mainly used to include definition and configuration; part of the Configuration Management Initiative

A Drupal 8 theme has the following structure:

|-THEMENAME.breakpoints.yml
|-THEMENAME.info.yml
|-THEMENAME.libraries.yml
|-THEMENAME.theme
|-config
| |-install
| | |-THEMENAME.settings.yml
| |-schema
| | |-THEMENAME.schema.yml
|-css
| |-style.css
|-js
| |-THEMENAME.js
|-images
| |-background_frontpage_header.png
|-logo.png
|-screenshot.png
|-templates
| |-maintenance-page.html.twig
| |-node.html.twig

THEMENAME.info.yml

This is the only mandatory file of the theme, that defines the theme and that is recognized by Drupal 8. Extra ‘meta data’ is also placed here, such as:

  • description: short description of the theme.
  • libraries: which libraries are where.
  • block regions: defined regions, see below for more info.
  • overrides: which Drupal 8 core services do you want to override and where are these overrides.

THEMENAME.libraries.yml

Defines the Javascript and CSS libraries used by the Drupal 8 theme.

THEMENAME.theme

Contains PHP code where preparatory logics can be programmed: (pre)processing of the HTML output.

THEMENAME.breakpoints.yml

Breakpoints are points on which a responsive webdesign should change to be displayed properly across devices. These breakpoints can be defined here.

/templates/

The template files implement the HTML code for your Drupal 8 website. Drupal 8 template files have format THEMENAME.html.twig and must be placed in this subfolder (unlike Drupal 7).

The Drupal 8 core provides a number of template files. If you maintain certain naming conventions for template files in your own theme, then Drupal will automatically use your templates instead of the core templates. Allowing you to override the HTML markup.

Place for example the file node.html.twig in this folder and Drupal will use your version instead of the core version: /core/modules/node/templates/node.html.twig

/css/

It is a best practice to place .css files in the subfolder /css. Drupal 8 core themes structure CSS files in accordance with the SMACCS style guide. CSS files should be defined in the .libraries.yml file and can be override or disabled in the .info.yml file.

/js/

This folder contains the Javascript files of the Drupal 8 theme. To load them, they should also be defined in the .libraries.yml file.

/images/

It is a best practice to place theme image in this subfolder. Don’t confuse it with content images.

screenshot.png

When you insert this image, then it will appear on the Appearance backend page in Drupal 8. The location of screenshot.png could be placed somewhere else; that alternative location should then be defined in the .info.yml file.

logo.svg

The logo of your website, that is usually shown in the header to your visitors. This logo can also be uploaded in the Drupal 8 backend under Appearance > Settings

Subthemes

Within Drupal 8 it is also possible to work with base-themes and sub-themes. Subthemes are just like other themes with the difference that they inherit resources from the base-theme. It is even possible to create sub-sub-themes and sub-sub-sub-themes (and so on).

In this tutorial I will not discuss sub-theming in Drupal 8 any further.

Drupal 8 theme structure | Regions

As the word implies: a region is a certain region in your Drupal 8 website, which is used to place content. More detailed: this content is added in blocks, that are placed in regions. A block can be seen as a building block; regions give your Drupal 8 website the layout to place your blocks (meaning the content).

Regions are defined in the theme in the .info.yml file

Drupal 8 core regions

Drupal 8 knows the following standard regions:

  • page.header: Items for the header region.
  • page.primary_menu: Items for the primary menu region.
  • page.secondary_menu: Items for the secondary menu region.
  • page.highlighted: Items for the highlighted content region.
  • page.help: Dynamic help text, used mainly for admin pages.
  • page.content: The ‘main content’ of the current page.
  • page.sidebar_first: Items for the ‘first sidebar’.
  • page.sidebar_second: Items for the ‘second sidebar’.
  • page.footer: Items for the ‘footer region’.
  • page.breadcrumb: Items for the ‘breadcrumb region’.

If your custom theme does not define regions, then you will have these at your disposal.

Hidden regions

When you go deeper into Drupal 8 theming, then you will also get to see these regions:

  • page_top
  • page_bottom

These are hidden regions and can be seen in html.html.twig, a template file that is usually not overridden in a custom theme. These regions are used to place HTML entirely at the beginning or the end of the page, for example:

More info about regions

Can be found here.

Drupal 8 theme structure | Template files

Template files contain the HTML that is eventually sent to the browser of your website visitor. These are all files with extension .html.twig. If you look at the template files of the Drupal 8 core theme ‘Bartik‘, you will see the following:

These files all follow a by Drupal 8 determined naming convention so that Drupal knows which template file to use for what. This can range from an entire page, to theming a block, to theming one small select element. In fact, all html generated (or additionally required) by Drupal core can be changed to custom HTML. Creating a theme with supplied, so 100% custom, HTML is therefore possible.

The template files are divided into:

  • HTML for the header
  • HTML for the page
  • HTML for regions
  • HTML for blocks
  • HTML for nodes
  • HTML for taxonomy terms
  • HTML for fields
  • HTML for comments
  • HTML for maintenance page
  • HTML for search results

As an example, these are the naming conventions for the node template files:

  1. node--nodeid--viewmode.html.twig
  2. node--nodeid.html.twig
  3. node--type--viewmode.html.twig
  4. node--type.html.twig
  5. node--viewmode.html.twig
  6. node.html.twig

Per page Drupal will run this list from top to down, the file that is first defined in the theme, will be applied by Drupal to the appropriate item.

See here an overview of all template naming conventions.

In case this should all be a little too abstract, don’t worry: in the actual implementation that is discussed further down in this blog, everything will become clear.

Implementation custom Drupal 8 theme | Initiation

Installation Drupal 8

We are starting with a new Drupal installation. Download and install Drupal 8 from this page, or install via the Drupal console with site:new.

Initiation Drupal 8 theme

In the initiation phase the following theme structure was made: the required folders and files were placed in drupal8 root/themes/custom/

openlucius
|-css
| |-base
| | |- css files
| |-components
| | |- css files
| |- mobile-overrides.css
| |- overrides.css
|-fonts
| |- font files
|-images
| |-backgrounds
| | |- images
| |-flags
| | |- images
| |-glyphicons
| | |- images
| |-gradients
| | |- images
|-js
| |-base
| | |- javascript-files
| |-components
| | |- javascript-files
|-templates
| |-block.html.twig
| |-block--system-branding.html.twig
| |-block--system-menu-block.html.twig
| |-node.html.twig
| |-page.html.twig
| |-page-title.html.twig
| |-region--header.html.twig
| |-status-messages.html.twig
|-logo.png
|-openlucius.info.yml
|-openlucius.libraries.yml
|-openlucius.theme

Inserting supplied assets of the theme

All supplied assets of the theme are divided into the following folders:

  • /css
  • /javascript
  • /images
  • /fonts

openlucius.libraries.yml

All CSS and JS files need to be recognized by Drupal, this is done in openlucius.libraries.yml, with us this is looking as follows:

openlucius.theme

Additional logics that is required before rendering the HTML, will be placed here.

Not implemented: openlucius.breakpoints.yml

We did not use this file, as necessary breakpoints have already been supplied to the implemented static HTML/CSS.

Enable the Drupal theme

In the Drupal 8 backend go to ‘Appearence’ and click ‘install and set as default’ at the new custom theme.

Theme initiation done

The Drupal 8 theme is now initiated, but at the moment only an ‘empty’ page can be seen. In the following blogs I will fill the page by inserting the HTML through blocks.

Jun 07 2016
Jun 07

In this blog serie I will explain how we have built a new multilingual Drupal 8 site. During the process the required HTML, CSS en Javascript was supplied statically and used to build a custom Drupal 8 theme. So we did not use a Drupal core or contrib theme.

We are talking about this website:

This Drupal 8 website consists of pages that are built up from Drupal blocks. Therefore I will explain in detail how we have built these blocks. Furthermore this Drupal 8 website is multilingual: Dutch and English. As listed below I will explain:

  1. Generic structure of a Drupal 8 theme
  2. Initiation Drupal 8 theme and placing supplied assets: CSS, JS, fonts and images.
  3. Breaking down supplied HTML into Twig template files (.html.twig files).
  4. Determination of the Drupal regions.
  5. Building homepage HTML using blocks, and Drupal and Twig template files.
  6. Building contact page using blocks and Drupal 8 core contact form.
  7. Building other pages using Drupal 8 blocks.

Basic knowledge

I assume you already have some experience with Drupal:

  • Installation and general configuration of the Drupal 8 core, modules and themes.
  • Configuration of content types

Drupal 8 theme | The structure

What is a Drupal 8 theme

A theme is a collection of files that determine the look of your Drupal website: what the visitor sees. Only 1 file is required, the .info.yml, but for a complete theme more files are needed.

Drupal 8 uses by default PHP templating engine Twig, part of the Symfony framework where Drupal 8 is built on.

Where do you insert the theme

When creating a custom theme, this is inserted in the /themes folder. Be sure to put the Drupal core themes in the folder /core/themes. Never ever do you put your own theme there, that would be a core-hack: a crying shame.

To keep your themes folder organized, it is a best practice to divide them in the folders:

  • /contrib: place here all themes downloaded from Drupal.org
  • /custom: place here all themes that you are building yourself.

Each individual theme is inserted in a folder with the name of the concerning theme. That name can only contain lowercase letters, must start with a letter and use underscores (_) instead of spaces.

The (partial) structure for our installation will look like this:

|-core
| |-modules
| |-themes
| | |-bartik
| | |-seven
..
|-modules
|-themes
| |-contrib
| |-custom
| | |-openlucius

Which files are part of a Drupal 8 theme

As indicated, a useful theme will contain more files then just the mandatory THEMENAME.info.yml.

About .yml files

Yaml (.yml) files are files intended for data and not for markup. These are not necessarily Drupal 8 specific files: they are also used in other programming languages such as C, Perl and Python. Within Drupal 8 they are mainly used to include definition and configuration; part of the Configuration Management Initiative

A Drupal 8 theme has the following structure:

|-THEMENAME.breakpoints.yml
|-THEMENAME.info.yml
|-THEMENAME.libraries.yml
|-THEMENAME.theme
|-config
| |-install
| | |-THEMENAME.settings.yml
| |-schema
| | |-THEMENAME.schema.yml
|-css
| |-style.css
|-js
| |-THEMENAME.js
|-images
| |-background_frontpage_header.png
|-logo.png
|-screenshot.png
|-templates
| |-maintenance-page.html.twig
| |-node.html.twig

THEMENAME.info.yml

This is the only mandatory file of the theme, that defines the theme and that is recognized by Drupal 8. Extra ‘meta data’ is also placed here, such as:

  • description: short description of the theme.
  • libraries: which libraries are where.
  • block regions: defined regions, see below for more info.
  • overrides: which Drupal 8 core services do you want to override and where are these overrides.

THEMENAME.libraries.yml

Defines the Javascript and CSS libraries used by the Drupal 8 theme.

THEMENAME.theme

Contains PHP code where preparatory logics can be programmed: (pre)processing of the HTML output.

THEMENAME.breakpoints.yml

Breakpoints are points on which a responsive webdesign should change to be displayed properly across devices. These breakpoints can be defined here.

/templates/

The template files implement the HTML code for your Drupal 8 website. Drupal 8 template files have format THEMENAME.html.twig and must be placed in this subfolder (unlike Drupal 7).

The Drupal 8 core provides a number of template files. If you maintain certain naming conventions for template files in your own theme, then Drupal will automatically use your templates instead of the core templates. Allowing you to override the HTML markup.

Place for example the file node.html.twig in this folder and Drupal will use your version instead of the core version: /core/modules/node/templates/node.html.twig

/css/

It is a best practice to place .css files in the subfolder /css. Drupal 8 core themes structure CSS files in accordance with the SMACCS style guide. CSS files should be defined in the .libraries.yml file and can be override or disabled in the .info.yml file.

/js/

This folder contains the Javascript files of the Drupal 8 theme. To load them, they should also be defined in the .libraries.yml file.

/images/

It is a best practice to place theme image in this subfolder. Don’t confuse it with content images.

screenshot.png

When you insert this image, then it will appear on the Appearance backend page in Drupal 8. The location of screenshot.png could be placed somewhere else; that alternative location should then be defined in the .info.yml file.

logo.svg

The logo of your website, that is usually shown in the header to your visitors. This logo can also be uploaded in the Drupal 8 backend under Appearance > Settings

Subthemes

Within Drupal 8 it is also possible to work with base-themes and sub-themes. Subthemes are just like other themes with the difference that they inherit resources from the base-theme. It is even possible to create sub-sub-themes and sub-sub-sub-themes (and so on).

In this tutorial I will not discuss sub-theming in Drupal 8 any further.

Drupal 8 theme structure | Regions

As the word implies: a region is a certain region in your Drupal 8 website, which is used to place content. More detailed: this content is added in blocks, that are placed in regions. A block can be seen as a building block; regions give your Drupal 8 website the layout to place your blocks (meaning the content).

Regions are defined in the theme in the .info.yml file

Drupal 8 core regions

Drupal 8 knows the following standard regions:

  • page.header: Items for the header region.
  • page.primary_menu: Items for the primary menu region.
  • page.secondary_menu: Items for the secondary menu region.
  • page.highlighted: Items for the highlighted content region.
  • page.help: Dynamic help text, used mainly for admin pages.
  • page.content: The ‘main content’ of the current page.
  • page.sidebar_first: Items for the ‘first sidebar’.
  • page.sidebar_second: Items for the ‘second sidebar’.
  • page.footer: Items for the ‘footer region’.
  • page.breadcrumb: Items for the ‘breadcrumb region’.

If your custom theme does not define regions, then you will have these at your disposal.

Hidden regions

When you go deeper into Drupal 8 theming, then you will also get to see these regions:

  • page_top
  • page_bottom

These are hidden regions and can be seen in html.html.twig, a template file that is usually not overridden in a custom theme. These regions are used to place HTML entirely at the beginning or the end of the page, for example:

More info about regions

Can be found here.

Drupal 8 theme structure | Template files

Template files contain the HTML that is eventually sent to the browser of your website visitor. These are all files with extension .html.twig. If you look at the template files of the Drupal 8 core theme ‘Bartik‘, you will see the following:

These files all follow a by Drupal 8 determined naming convention so that Drupal knows which template file to use for what. This can range from an entire page, to theming a block, to theming one small select element. In fact, all html generated (or additionally required) by Drupal core can be changed to custom HTML. Creating a theme with supplied, so 100% custom, HTML is therefore possible.

The template files are divided into:

  • HTML for the header
  • HTML for the page
  • HTML for regions
  • HTML for blocks
  • HTML for nodes
  • HTML for taxonomy terms
  • HTML for fields
  • HTML for comments
  • HTML for maintenance page
  • HTML for search results

As an example, these are the naming conventions for the node template files:

  1. node--nodeid--viewmode.html.twig
  2. node--nodeid.html.twig
  3. node--type--viewmode.html.twig
  4. node--type.html.twig
  5. node--viewmode.html.twig
  6. node.html.twig

Per page Drupal will run this list from top to down, the file that is first defined in the theme, will be applied by Drupal to the appropriate item.

See here an overview of all template naming conventions.

In case this should all be a little too abstract, don’t worry: in the actual implementation that is discussed further down in this blog, everything will become clear.

Implementation custom Drupal 8 theme | Initiation

Installation Drupal 8

We are starting with a new Drupal installation. Download and install Drupal 8 from this page, or install via the Drupal console with site:new.

Initiation Drupal 8 theme

In the initiation phase the following theme structure was made: the required folders and files were placed in drupal8 root/themes/custom/

openlucius
|-css
| |-base
| | |- css files
| |-components
| | |- css files
| |- mobile-overrides.css
| |- overrides.css
|-fonts
| |- font files
|-images
| |-backgrounds
| | |- images
| |-flags
| | |- images
| |-glyphicons
| | |- images
| |-gradients
| | |- images
|-js
| |-base
| | |- javascript-files
| |-components
| | |- javascript-files
|-templates
| |-block.html.twig
| |-block--system-branding.html.twig
| |-block--system-menu-block.html.twig
| |-node.html.twig
| |-page.html.twig
| |-page-title.html.twig
| |-region--header.html.twig
| |-status-messages.html.twig
|-logo.png
|-openlucius.info.yml
|-openlucius.libraries.yml
|-openlucius.theme

Inserting supplied assets of the theme

All supplied assets of the theme are divided into the following folders:

  • /css
  • /javascript
  • /images
  • /fonts

openlucius.libraries.yml

All CSS and JS files need to be recognized by Drupal, this is done in openlucius.libraries.yml, with us this is looking as follows:

openlucius.theme

Additional logics that is required before rendering the HTML, will be placed here.

Not implemented: openlucius.breakpoints.yml

We did not use this file, as necessary breakpoints have already been supplied to the implemented static HTML/CSS.

Enable the Drupal theme

In the Drupal 8 backend go to ‘Appearence’ and click ‘install and set as default’ at the new custom theme.

Theme initiation done

The Drupal 8 theme is now initiated, but at the moment only an ‘empty’ page can be seen. In the following blogs I will fill the page by inserting the HTML through blocks.

Jun 01 2016
Jun 01

Joris Snoek - Business Dev

+31 (0)20 - 261 14 99

Blockchain right now is like the web in 1994. It will revolutionize our world and way of working together.

Want to know more? Please visit our event:

  • Date: Wednesday 6 July 2016
  • Location: WeWork Metropool - Weesperstraat 61, Amsterdam
  • Free entrance

Sign-up

Sign-up

18:00u Doors open

18:15u Why bother about blockchain? - Henk van Cann

What is it, how it is used best and why anyone should get into blockchain technology. Henk will give his insights on how the blockchain works and what it can do for you. He will examine and explain the blockchains that dominate much of the crossover space from crypto-currency, e-identity to blockchain technology:

Bitcoin, Ethereum, NXT and Hyperledger.

He will also show how to judge what is true and false in the increasingly hyped news and opinions about the benefits of blockchain.
In addition, Van Cann will give examples of how this technology is going to change your work and life. It is an interactive session.

Bio Henk van Cann

In recent years Henk van Cann (@henkvancann) has been gathering knowledge and contacts within the blockchain technology field, focussing on applications for e-identity issues (your digital ‘me’).

Van Cann will share his experiences from a number of recent conferences he attended on the subject of blockchain and e-Identity: Consensys May 2016 conference, Dutch Blockchain June 2016 Conference, Conference e-Identity and doing business digitally, June 2016.

19:15u Break

19:30u What you can learn from Blockchains in Work management systems like OpenLucius - Joris Snoek

Aimed at small & medium sized organisations OpenLucius connects to Bitcoin, Ethereum, NXT and Hyperledger. Joris (@joris_lucius) wil address the three main problems blockchain can solve that could not be solved before for users of OpenLucius. These principles are general tough, every visitor could apply them on his/hers own situation in (working) life.
Briefly Snoek demonstrates the functions that aim to solve these problems within OpenLucius. A discussion about where to take OpenLucius from here could follow and Joris is open to that.

Bio Joris Snoek

Joris Snoek is an experienced online entrepreneur since 2004 and director with a passion for online collaboration in social intranets founder and CEO of OpenLucius: "I love to work on improving teamwork and finding new ways to collaborate more effective together via social intranets. Always thinking of better ways to organize and motivate staff to get the maximum results and help them to reach their personal and business goals.

20:30u End

Sign-up

May 31 2016
May 31

We just released an update of OpenLucius, a drupal social intranet distribution. Check out the new and improved stuff:

1. Choose enabled ‘apps’ per group

It is now possible to disable or enable apps per group:

2. Local tasks to drop down

To keep the screen clean, we moved tabs to a minimalistic drop down:

3. Inline edit todo’s on dashboard

To work faster, you can now edit a todo inline:

4. Long items in the activity stream

Will now be shortened:

5. Files in activity stream

Will now show up, they didn’t before:

6. Todo digest email

Removed unnecessary header footer and texts

Misc

We also fixed ~30 minor issues

Credits header photo

May 27 2016
May 27

Without further ado, here is what struck me about Drupal modules in the past month:

1. Hide submit button

Avoid duplicate content because people are clicking twice on the Save button. This module ensures that the Save button cannot be clicked more than once, by making it unusable after the first click.

Dowload (Drupal 7)

2. Magnific Popup

Automatically creates a beautiful, fast gallery with images. With capabilities to enlarge the images in various ways.
It uses lightweight jQuery lightbox library Magnific Popup and implements a Drupal field that lets you add images to content..

Download (Drupal 7 & Drupal 8)

3. Mail Verify

A better way to verify entered email addresses. The Drupal 8 core only verifies based on format, this module verifies in a totally different way: it tries to connect to the relevant email server to check if the entered email address really exists.
Do not use this module as a primary protection against spam, otherwise you risk the server from becoming greylisted. So for web forms (f.e. contact, signup) use for example Mollom and Honeypot as primary spam protection.

Download (Drupal 8)

4. Search exclude nid

It may be necessary to exclude certain nodes from the search results in Drupal, simply because they are not relevant.

Download (Drupal 7 & Drupal 8 dev)

5. Facebook Comments Block

Provides the possibility to place Facebook comments on pages in your Drupal website. Several modules are available for this, but this one makes it easy with its simple configuration. This Drupal 8 module also uses the system path (node/xx) and not the url alias, preserving existing comments; also when you are changing the url alias.

Download (Drupal 7 & Drupal 8)

Related module: are you changing the url alias of a Drupal page? Make sure you have installed the Redirect module, so that it automatically creates a 301-permanent redirect. This way you keep the SEO of the concerning Drupal page intact.

6. Require Login

Make sure your entire Drupal site is protected: all visitors must sign in before they are able to see content. Handy for a Drupal social intranet or for separating testing environments.

Download (Drupal 7 & Drupal 8)

7. Dynamic Entity Reference

A Drupal module that allows you to create an entity reference field and lets you reference to multiple entity types instead of only one.
Download (Drupal 7 alpha & Drupal 8 rc4)

8. Field Hidden

Provides the possibility to add a ‘hidden’ field: < input type="hidden" / >. Visitors don’t see this field, so you can use it to add hidden information to forms, usually system information.
Download (Drupal 7 & Drupal 8)

9. Double field

Similar to the Field collection module, but then light weight: split up your field in two parts. An example why this can be handy:

Download (Drupal 7 & Drupal 8 rc1)

10. Classy paragraphs

Sometimes you want to optionally add an extra class to a specific paragraph in Drupal content in order to give it the right styling. But you don’t want to tire your content managers with writing HTML.
This module provides the solution: It generates an additional button in the text editor, that lets Drupal add an extra HTML class to a selected paragraph.
Select the styles you like to have available.
This module is depending on the Paragrahs.

Download (Drupal 7 beta1 & Drupal 8 alpha1)

11. Supercookie

Within the Drupal core it is difficult to track all the unique users, especially when they are all visiting your Drupal website from 1 location (so 1 IP). This is due to the way the Drupal core handles sessions and cookies.
This module implements another way for Drupal to handle cookies, a way that lets you track all the unique users from your Drupal website.
This information can be very useful for marketing purposes.

Download (Drupal 7 & Drupal 8)

12. Serial field

Add a field in which the numerical value rises automatically, regardless of Drupal's ‘node ID’ auto numbering. This can for example be useful for invoice numbers. This field can be divided into different types of content; the values will remain unique, all the way through those content types.

Download (Drupal 7)

Wrap up

Alrighty, that's it for now. Next month again a blog about 'Cool Drupal modules', so stay tuned!

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web