Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Jul 13 2020
Jul 13

Creating components using the Paragraphs module offers incredible flexibility in building pages based on Drupal. One of the common restrictions is the issue of reusing the same paragraphs in very similar components. If the only thing that limits you is the set and layout of fields, the Paragraph View Mode module will help you.

The very first lines of the module's code were created as a dedicated module for one of the projects we implemented. I quickly noticed, however, how such a functionality could be useful in the whole Paragraphs module ecosystem. Currently, the module has a stable 1.4 version and is covered by the Security Advisory Policy.

Dates 

The first version of the module was released in July 2019. Since then, I have been actively following the list of issues, implementing patches and new functionalities. The last patches were introduced to the developer version in July 2020.

Module's popularity

According to the statistical data published on the module's page: https://www.drupal.org/project/paragraph_view_mode, it is currently used by about 450 websites, which translates into approximately 10 uses per week.

Module's creators

The first draft of the module was created in order to address the needs of a current project. After its initial release on the drupal.org website, I introduced some additional improvements and new functionalities. The community also helped, e.g. with making the module compatible with Drupal 9.
Currently, I am the only person who worked directly on the module's code. The module itself is supervised by two maintainers who respond to all issues as quickly as possible.

What is the module used for? 

Paragraph View Mode is a sub-module for the Paragraphs module. Its advantages will be appreciated by both, developers and people responsible for editing content on a website. It may be necessary when:

  • you are building a website from many components, and some of them are very similar, e.g. they use a similar set of fields;
  • you want to minimise the number of components with regards to the administration;
  • you think about streamlining the frontend part;
  • you want to ensure better organisation of templates with regards to the UI and directly within the code;
  • you want to avoid using many complex field-based modifiers, e.g. lists.

As you can see, this module can offer several useful functions, and all this goes hand in hand with the simplicity of this solution in accordance with the so-called "Drupal Way".

Unboxing

You can download the module from the https://www.drupal.org/project/paragraph_view_mode webpage or via composer:

composer require drupal/paragraph_view_mode


After the installation, go to editing the selected paragraph type, the default path is usually:
 
[your_domain]/admin/structure/paragraphs_type/[your_paragraph_bundle]
 
In the "Paragraph View Mode" drop-down section, select the option “Enable Paragraph view mode field on this paragraph type" and then save the form.

enable-paragraph-view-mode

The module will automatically create a "Paragraph view mode" field with a configuration widget (available in the manage form display tab).
 
The widget's configuration consists of two fields. The first field is the selection of available display modes. The module automatically receives a list of only those that are unblocked on the current paragraph type, while you can decide which of them you want to display on the list of options in the form.

The second field is used to define the default value of the field in the absence of its value (e.g. for a newly created paragraph).

paragraph-view-mode-widget

With the module configured in this way, you can dynamically switch the display modes directly in the page adding/editing form.

paragraph-view-mode-usage

Plans for the future

The basic functionality of the module is already completed, and it is hard to come up with new functionalities. Recently, however, I created a new issue https://www.drupal.org/project/paragraph_view_mode/issues/3150153, in which I plan (with a little help from the community) to develop the functionality of linking the field value with the display mode of the form and its dynamic substitution. I also intend to continue supporting Drupal 9 and future versions.

Summary

The Paragraph View Mode module, despite its low complexity, offers a lot regarding the efficiency, convenience and – above all – flexibility of the editors' work. In addition, it allows the Drupal developers or the person responsible for the website to reduce the amount of work needed to organise and maintain the components on the website, thus reducing the overall cost of maintaining the website.

Jun 01 2020
Jun 01

I recently wrote an extensive article about a headless CMS. I discussed the pros and cons of building a headless and listed some considerations you should take into account when deciding whether headless is right for you.
Today I want to focus on why you should really consider Drupal if you need a headless CMS.

Headless CMS space is growing

The headless CMSes space is exploding in recent years. This is mostly due to 2 factors:

  1. The emergence of javascript frameworks which allow for the creation of superb user experiences. React, Angular and Vue are great in building these, but they require a backend for content storage.
  2. The publish once, push everywhere idea which is adopted along with the rise of the Omnichannel brand presence and the advent of Digital Experience Platforms. Content now has to be distributed via all the channels in which Drupal is present.

Both these movements are helping the headless CMSes thrive. This happens in 2 ways:

  1. The existing CMSes are adopting to the headless approach. This happened with Drupal API first initiative and inclusion of JSON:API and services modules into Drupal core. Wordpress followed along with making the REST API available.
  2. New entrants to the market, which are focusing only on providing the headless version. These are both - open source and proprietary solutions or mixtures of both worlds.

As a product owner, you have a plethora of options to choose from. It might be difficult to drill down and make the right decision. If I were to recommend the options, I would suggest going with Drupal most of the time. Here is why.

Drupal is mature and is a fully ready headless CMS

If you intend to invest in a headless CMS that will power your websites for the foreseeable future, you have to select a solution that is stable and solid. One which has a clear roadmap of development and will be still relevant and supported in years to come.

Drupal has started the API first initiative years ago and the community was working very hard to get it done. The Services and JSON:API modules are now in Drupal core. They receive the full support of the core project team. You can be sure that they will be available with each drupal release and that they will be working correctly.

Drupal itself is a very mature CMS. Powering over 1 million websites it is backed by a large community of developers. If you chose Drupal you get an enterprise-level solution which will be well supported in the future. 

The contrib space offers a massive amount of modules which extend the base functionality. You can build very custom solutions just by combining already existing code, without having to write too much yourself. This is a huge benefit compared to other, less popular solution on the market.

For more information about drupal benefits, check out the why Drupal page.

The REST API is ingrained into Drupal

In Drupal, the REST API is not an addition plastered on to Drupal as an add-on. The APIs are deeply ingrained into the CMS. Interacting with the API is the same as interacting with the CMS via the browser. This brings magnificent benefits:

  • All the Drupal goodies work out of the box. The fine-grained permissions mechanisms, the workflows, relations, processes etc are executed in just the same way if you request data via API or try to access it via the frontend.
  • All modules which extend Drupal, will work with services (if they are applicable of course). 
  • You can create your own modules and they will work the same way for the headless part of the CMS and for the frontend part.

Thanks to deep integration, the REST APIs are extendable and the way they work can be altered. The best example is the JSON:API extras module and the services module. These both are great examples of how much power the developers have over how they want the APIs to operate. These are of course just examples. Your development team will be able to tailor Drupal to your needs.

JSON:API module is JSON:API compliant

It is worth mentioning that the JSON:API provided by Drupal strictly follows the JSON:API specification. Thanks to this, any developer familiar with the standard can very quickly start working with the API without having to learn a lot of Drupal.

But I want GraphQL

Here you go. The GraphQL module from contrib allows you to expose graphql schemas from Drupal. The module is used by over 1000 websites. It is thoroughly tested by the community. This is another example of how mature Drupal is. Even a solution which is not “the default one” gets a massive amount of usage, testing and support. 

Great tutorials and examples

As with every large community, and especially the Drupal one, a lot of effort is put to educate and help new users onboard. Drupal boasts of a fantastic and very vibrant community, which is always ready to suggest solutions and lend a hand. 

When it comes to the headless approach to building a CMS this is the case in particular. There even is a Drupal distribution built to be an API first, headless CSM. It is called contenta CMS. Contenta is an interesting starting point for building a headless Drupal. It is also a fantastic repository of examples and approaches to real-life requirements. The contenta GitHub account is full of examples in practically any available frontend technology.

Vast vendor support

Last but not least, it is important to be sure that your headless CMS can get the support it needs. Drupal stands out here as well. With a wide selection of drupal agencies which provide drupal support, you will always be able to find expertise to run build and maintain project. If you choose a inch, new solution, the number of vendors will be limited and so might be the expertise. 

Summary

If you are about to invest in a headless CMS, you should choose a robust, stable working solution with great support and flexibility. Even though there are many options out there, the majority does not offer the guarantee of stability and predictability, because they are too young. 

Drupal stands out as the robust flexible, API fist solution with a mature community, predictable release cycles, a plethora of contributed modules and a clear vision into the future.

Drupal should at least get to the shortlist of the options you are considering.
 

May 27 2020
May 27

Drupal is one of the most popular CMS-es in the world. Currently, over a million websites use Drupal. The larger the website, the more likely it is that it was built on Drupal. Why should you choose it for your project? Take a look at what programmers are saying about this topic. 

Robert

Robert developer

Robert develops web applications on a daily basis. He has been doing this for over seven years. 

Why did he decide to work using such a technology?

"Drupal has a ready-made system with clear documentation. It is also a safe tool for building websites. We can be sure that it will work properly and will not be hacked. Confidential data is therefore secure. 
Drupal provides many ready-made modules at drupal.org, making it is easy to organise a website like from building blocks."

Grzegorz

Grzegorz developer

Grzegorz has been working with Droptica for almost three years. Every day he further develops Droopler – thus he offers a real contribution to Open Source. Why does he use Drupal?

"Drupal is different from other CMS-es with which it is often compared. Its characteristic feature is open architecture. As website creators, we can choose what data we want to present on the web and how it should be edited. We are not limited to the article/category/static page model – we can freely model the content, responding to even the most specific needs. Building a basic, functional website is extremely fast when compared to other solutions."

Bartek

Bartek developer

Bartek is not only a PHP developer, but he also has set up his online Drupal-based store.

"I have built a simple platform for selling electronic products that will be easily accessible to those who have paid for the order – everything is automatic, without any additional admin work.

It required installing and configuring several modules and adding a dozen or so lines of my own PHP code. It took several hours of work. The question is: what will help you do it faster?"

Why should you consider Drupal for your next project?

This is a more complicated issue, so: 

1. Immediately after the installation, I have a working page with the most important functionalities for many types of pages:

  • logging in,
  • skins,
  • creating various types of content (fully extensible forms),
  • simple interface for building queries in order to present data in various ways.

 2. Unlimited expansion options:

  • There are many additional modules that add even such complicated functionalities as a store with just a click of a button.
  • Drupal has extensive documentation and a well-described API. If like me, you are not a programmer, you can always use the help of a professional.
  • Drupal uses Symfony components and has a similar structure. If you are familiar with this framework, you will find your way around it quickly.

3. Security

Drupal's security team operates on a very high level. Security updates are being released immediately after finding and fixing any problem with the system.

4. Drupal is Open Source What does it mean exactly?

  • It is free,
  • you can modify it according to your own needs,
  • you are independent of other service providers, so you can develop it yourself or it can be done by any team associated with Drupal.

Mariusz

Mariusz developer

"Drupal 8 is the best CMS written in PHP with programmers in mind. It is also an Open Source platform – accessible by everyone. It is built on Symfony components. It is a very rich API, with a very good and – most importantly – reliable documentation. Why am I a Drupal supporter? It has a huge community that is active and participates in contrib projects. By choosing Drupal as a technology for your website, you get the support of a huge community with members from around the whole world."

Summary

These are just a few examples of the programmers' opinions about Drupal. The longer someone works with Drupal, the more clearly, they see its huge number of advantages. Clients also notice this and intentionally choose Drupal as a technology for building their websites, e.g. Bossa or Here.com

If you are thinking about choosing a technology for your company website or web application, consider Drupal. You can find the complete information on Drupal at "Why Drupal".


 

May 15 2020
May 15

The editorial experience becomes more and more important for each CMS. Users want more control but easier interfaces. In Drupal, one of the biggest and most popular OpenSource CMSes on the market, the search for the best experience continues until today. Various approaches are tested by the community and with each edition, some new approaches are investigated and some are abandoned. From the perspective of a Drupal agency, it is quite interesting to watch this process unfold.

Let’s explore how Drupal editorial experience got to where it is today and where it is heading.

Drupal beginnings

Initially, Drupal pages were built on nodes. Think of a node as an article or page in a typical CMS. A node had a Title and a Body. You titled the node and inserted all the content in one big text field. Typically people would type in the body field the content of the page - this would be mostly text, but you could stick anything you like in there (HTML, images etc) Quite quickly people incorporated WYSIWYG editors into the body (CKEditor, TinyMCE and other ones were integrated as community-contributed modules). You could now author a quite complex page without knowledge of HTML.

The WYSIWYG’s were so popular, that in Drupal 7 CKEditor was added into Drupal core.

On the database side, everything  was still quite simple. A node table with title and an additional table for the body. That is how Wordpress stayed pretty much till today. In Drupal however, the evolution continued. 

Drupal 6 - the domination of CCK & templating

At the time of Drupal 5, an initially small module was created, which in Drupal 6 completely changed the rules of the game (the Content Construction Kit module, aka. CCK).

CCK was a contributed module which allowed to add additional fields to nodes. This does not sound too exciting, but it was. The absolutely brilliant CCK module allowed users to add various fields (number, text, bool, select etc) and it was creating a separate database table for each field. The table field was matching what you wanted to store in it (A decimal, a float, a varchar, a text etc). On top of that, it was adding the field to the default content form. 

This was magnificent because you could create a form with multiple fields and then display the data in a template pre-built by the developer (an image on the right, stats on the left, long tests at the bottom -- that sort of thing). This is how one was building pages in Drupal. The editor did not have to ‘design’ the layout in WYSIWYG anymore. You could just fill in a form with fields and the template took care of the rest. 

Moreover, you could now query in SQL for particular nodes by the field content. Eg. if you created a City node type and added a population decimal field to it, you could search for all cities with a population larger or smaller than a set amount. 

Very quickly after CCK, another module was created - the Views module. Views allowed users to build the queries in the admin interface. You could now create a list of cities ordered by population with a title and a teaser and some other data without the need to code anything. This was a massive breakthrough which allowed developers to create very compelling websites without writing a line of code. 

CCK was so popular that is was incorporated into Drupal in version 7 and Views followed in Drupal 8.

This is how Drupal websites were built for quite a while. Many are still built like this today.

Drupal 7 - First attempts at page layouts 

From Drupal 7 fields were considered a standard. Templating, however, was not sufficient for the community and clients. Drupal developers began searching for solutions to allow more control over the content display with just the UI.

The main reason for the search efforts is the way websites began to be built. The knowledge that an additional click reduces the chance the customer will get to the content was propagating. The approach of having a sidebar and dividing information into pages was no longer interesting. Long scrollable pages were born.

The advent of long landing pages with content in sections began somewhere in 2010. It was, however, the mobile that effectively killed the sidebar. You just could not fit a submenu in a sidebar on mobile. You now had to stick everything on one long scrollable page with multiple sections (scrolling on mobile is much easier than clicking links). And each section had to be interesting, compelling and different.

Drupal developers started to search for solutions on how to allow the editors to create sections on pages easier.

The initial solutions were:

  • Panelizer - a module based on another one (Panels) which was effectively taking over the node display. Instead of just fields, you could now design your page to include blocks, fields, static images, views and various other elements Drupal renders. Editors could override “the default’ predefined layout on a node by node basis. The solution was great and got a lot of traction in the Drupal world.
  • Paragraphs - a bit late to the party on Drupal 7, paragraphs nonetheless made a splash. It started to gain popularity very quickly. The main reason for that was that it was bridging the 2 worlds: drupal form building experience and freedom to add blocks while maintaining ease of use for the editors, which the above solutions did not have. 
  • Context - Context a more general module, which gave users a mechanism for well - acting on contexts (eg what page you are on, what user or role you are etc. ) Using these conditions, one could add reactions (eg. show this block, set this setting). Context was very widely used for a while to arrange blocks on pages. If I am on this page, I want to see these blocks. The downside was you managed the layouts from a central location, needed admin privileges to manage the layouts and the UI was not straightforward. Not suitable for large websites.
  • Blockreference - a simple yet powerful module which allows referencing blocks from a node and effectively stacks them one over the other. This solution did not get a lot of traction.


Current state in Drupal 8 and onwards

Drupal 8, being a very big re-write of Drupal has evened out the playing field a little, allowing the community to vote again on what it thinks should be the approach to building pages. 

Blockreference did not get a D8 version, mostly because entityreference module was now in Drupal 8 core and blocks became references. One could theoretically build pages like this using what Drupal gives out of the box, but that did not catch on.

Context did not manage to gather a lot of usages in D8 and until today does not have a stable release.

Paragraphs - initial winner

The paragraphs module came out as a clear winner. It was stable very quickly and became the de-facto standard in Drupal 8 for over a year. With over 140k installations it now runs one-third of all the drupal websites. It is also worth mentioning that popular Drupal distributions created on Drupal 8 chose paragraphs as the base of their content editing experience. These would be in particular Thunder - distro for publishing houses and Droopler - for building corporate websites. 

Here is an overview of how paragraphs work in Drupal 8. A lot of work is also being done to further improve the editorial experience in the Experimental widget.

Panelizer moved to the core (became Layout Builder)

Panelizer took a different road. It lingered on behind paragraphs in term of the number of installs but because of its popularity in D7 work was underway to migrate it into Drupal core (just as CCK in d7). It was however only in Drupal 8.5 that Layout Builder became available (as an experimental module). At Drupal 7.8 it became stable. 

Layout Builder offers great flexibility and great promise, but the UI even as of writing still has a long way to go to be self-explanatory (one needs a bit of training as many things are not obvious). Also, there is no clear “best practice” as to how to manage content now and what should be composing the pages. Integrations are also lagging, most importantly with search modules. 

Currently, there is no clear winner and best practice is not established yet. There is the paragraphs module with 100k installations, multiple integrations and a clear UI. On the other hand, there is the Layout Builder which is in Drupal core, what is an incredible strength. 

Still, though there are many modules which did not stand the test of time and were removed from the core.

Gutenberg (a WordPress editor)

Last but not least there is the Gutenberg project. It is the newest of the interesting editors in Drupal. It was ported from Wordpress where it is the main editor.

Gutenberg is a React-based editor which takes over the whole editing experience giving the user a WYSIWYG like an experience. It differs in approach to Paragraphs and Layout Builder in that it does not store the layout or entities in the database, but it stores the generated HTML. You create the content with a WYSIWYG editor and the resulting HTML is saved. This makes it a true WYSIWYG readability of the content for machines (automatic updates or migrations of such content may be troublesome). Nonetheless, it continues to be integrated into Drupal better and better. With 900 or so installs it is by no means comparable to the two above but the speed of adoption is impressive. Check out a quick overview of Gutenberg in Drupal.

As you can see, there is no clear winner. Drupal community is still testing various approaches to building websites and empowering the editors. On the one hand, this is fantastic because competition helps the best solution win. On the other, the efforts of developers are spread over multiple various approaches, making progress slower. What is best? I do not know.


 

Maps In Drupal - A Complete Guide

Apr 27 2020
Apr 27

What You Can Build With Drupal. Examples Based on Droptica Experience

Apr 17 2020
Apr 17

How Much Does It Cost To Build a Website With Drupal

Apr 16 2020
Apr 16

Keep Your Website Safe And Up-To-Date With Drupal Support

Apr 15 2020
Apr 15
Apr 03 2020
Apr 03

The value that the community brings to the development of Drupal

Drupal is known for the community that it has amassed as an open source software. But what is the value that the community brings to the development of Drupal?

First off, drupal is an open source CMS. What that means is that everybody can download and mingle with it. Because of this, Drupal has gathered a community of supportive members. Soon, the community has started to actively contribute with code and ways to further developed and improve Drupal. Drupal has more than 42,000 modules that were developed by the community. On top of that, regular security issues are discovered and fixed by the members in their own free time. Also, users are taking their time to answer questions posted on forums by new members to guide them in the Drupal world. This has led Drupal to be known as one of the most active, helpful, dedicated and loyal communities in the world.

DrupalCon Nashville 2018 Copyright Amazee Labs

Photo's DrupalCon Nashville 2018 copyright Amazee Labs

We all come together at DrupalCon

So where do the members of the community spend their time when not sitting in front a of a screen coding?

Well, the biggest event of the year is the DrupalCon. Every year it takes place in another location. With two conventions scheduled for 2019, one in sleepless Seattle and the other in incredible Amsterdam, DrupalCon is sure to gather a big crowd this year. Activities which are scheduled include keynotes with inspiring figures from inside and outside the community, trainings, summits, birds of a feather meetings and diverse social events.

DrupalCon is a great opportunity to meet and connect with new people, while acquiring more knowledge about Drupal and the direction it's heading in. On top of that, there is a chance of engaging into conversation with highly skilled people with expert knowledge in their domain, which can guide you and give you tips and tricks on what to do. So, if you’re a Drupal enthusiast, be sure to grab a ticket, pack your luggage and join the biggest Drupal social event of the year.

DrupalCon Nashville 2018 Copyright Amazee Labs

Photo's Drupal Camp Vienna 2015 copyright Amazee Labs

Cosy get-togethers in Drupal Camps

Now that we talked about the biggest social event of the year, Drupalcon, we can take a look at what the Drupal community is doing for the rest of the year. The community also organises smaller events, throughout the year, for regional groups of people. These meetings are more frequent than the DrupalCons. The activities which are undertaken in those camps are usually talks held by speakers on different subjects of interest to the community. The camps also offer training talks for beginners. The main focus of these type of events is to find out more about Drupal, share your Drupal experience and also to meet the local Drupal community.

List upcoming Drupal camps:

Name of the Camp Date Location Nerd Summit 2019 16-17.03.2019 United States, Amherst MidCamp 2019 20-23.03.2019 United States, Chicago Frone End Accesibility Summit 08.04.2019 United States, Seattle DrupalCamp Spain 6-12.05.2019 Spain, Conil de la Frontera Drupaldelphia 10.05.2019 United States, Philadelphia Secure Open Source Day - Haarlem Edition 11.05.2019 Netherlands, Haarlem Stanford DrupalCamp 17-18.05.2019 United States, Stanford Frontend United 17-18.05.2019 Netherlands, Utrecht DrupalCamp Belarus 17-18.05.2019 Belarus, Minsk DrupalCamp Kyiv 25-26.05.2019 Ukraine, Kyiv Flyover Camp 31-02.06.2019 United States, Kansas City DrupalCamp Poland 31-02.06.2019 Poland, Wrocław Drupal Developer Days 10-14.06.2019 Romania, Cluj-Napoca Save the Date - Design 4 Drupal Boston 26-28.06.2019 United States, Cambridge DrupalCamp Asheville 2019 12-14.07.2019 United States, Asheville DrupalCamp Colorado 02-04.08.2019 United States, Denver Cornell DrupalCamp 26-27.09.2019 United States, Ithaca DrupalSouth Hobart 27-29.11.2019 Australia, Hobart

How are new Drupal users integrated?

Now that we know how the Drupal community likes to spend its time, we can have a look at how the newcomers are being integrated in the community. First, the newbies can attend training sessions which are held on multiple occasions over the course of the year, with different locations. So, if you’re getting an interest in Drupal but don’t know where to start, you can search for the nearest Drupal beginner onboarding camp to find more about Drupal and the Drupal community. On top of that, you can also rely on the Drupal community forums by posting questions there and letting a more experienced user answer your question.

DrupalCon Nashville 2018 Copyright Amazee Labs

Community spotlight photo collection, indidual images' rights belong to their respectful owners. Collage created by Sooperthemes and licensed under a Creative Commons Attribution 4.0 International license.

Drupal community spotlight

Drupals open source means that everybody can get involved, making the community vibrant and full of inspirational stories. The community has the spotlight section where there are numerous articles about different members of the community and their journey from being a beginner to a well respected member and contributor.

Ildephonse Bikino

Another inspiring story is that of Ildephonse Bikino. He discovered Drupal through his job. He had the opportunity to attend the DrupalCon from 2016 held in New Orleans via a scholarship provided by the Drupal Association. There, he saw the opportunities that the open source software can bring. This led him to host his first Drupal Global Training Day in Rwanda, where he was expecting a number of 50 atendees. However, to his surprise, this number quickly grew and he had a list of 388 participants. Not wanting to turn his back on the Drupal enthusiasts he rose to the challenge and transformed a one day training into eight sessions spread across multiple weekends. This way, he made sure that every Drupal enthusiast received a proprer training. His dedication to the cause is what makes him a trully inspiring person and gives us a reason to tell his story.

Kevin Thull

Another great spotlight is the one about Kevin Thull. He got involved into Drupal through freelancing and started really getting involved with the community by the time the book Using Drupal 6 came out. He is known for being the mastermind behind the recording of the different Drupal events. He started recording drupal camps back in 2013. At first, everybody questioned his decision, however, he stayed true to his belief, that it is important to record those events. To date, he is personally responsible for recording over 800 sessions and giving up countless of hours of his time to achieve this feat. He was awarded with the Aaron Winborn Award in 2018 for his contribution to the Drupal community.

Rachel Olivero

For example, we have the case of Rachel Olivero which has recently passed away. She first started getting involved with the community at the DrupalCon 2017 in her hometown of Baltimore, where she participated for the first time in a code sprint and also reported her first bug. She was engaging constantly with the community on social platforms. As a blind person, she led an accesibility breakthrough at DrupalCon Nashville. She was always sharing her knowledge and expertise regarding this topic. Her aim was to make life easier for the users with disabilities. She understood the importance of diversity and so she was also engaged with the Drupal Diversity and Inclusion Team. Although she was part of the community for a short period of time, she left her mark through her actions and her contributions.

Aaron Winborn and the award named after him

The Aaron Winborn Award, also known as the “Academy Award” of the Drupal Association is an honor given to the members of the Drupal community that show personal integrity, kindness and an above-and-beyond commitment to the community. It was named in the honor of Aaron Winborn, a big community contributor which passed away after losing a battle with Amyotrophic Lateral Sclerosis. A specific disease which causes the death of the neurons that are controlling voluntary muscles. In order to remember the contribution which Aaron Winbord has brought to the Drupal community, the award was named after him after his death in 2015. To date, the award was given to 4 people which had a big contribution to the community and namely Cathy Theys, Gábor Hojtsy, Nikki Stevens and Kevin Thull. Right now, the nominations for the next awarding are open, so be sure to nominate your favourite member of the Drupal community.

Conclusion

In conclusion, the community is of utmost importance to the development of Drupal. The community is what keeps the CMS alive, while also in a costant state of evolution. Drupal has made it possible for people of different cultural backgrounds to cooperate and stand united for the same cause.  This reflects well on the unofficial motto ,"Come for the code, stay for the community".

Apr 02 2020
Apr 02

Each year, there’s a plethora of various tech and business events all over the world, even if we disregard the numerous Drupal events. In fact, there are so many of these conferences dispersed throughout Europe, the Americas and the Asia Pacific region that you can never even dream of attending all of them (in some cases, you’d actually need some kind of time machine!). But how do you find the ones that you or your agency would really profit from attending?

At Agiledrop, we’ve been asking ourselves the same question. Even though some of the biggest tech conferences of 2019 have already taken place (e.g. January’s CES which took place in Las Vegas), this doesn’t mean that you or your agency have to miss out on great networking and business opportunities at such gatherings. With spring already begun, there’s a huge number of relevant events you can (and should!) check out. 

For this reason, we’ve done some research and have attempted to make a more narrow list of the absolutely-don’t-miss tech and business events from March until the end of 2019. This narrowing down is also the reason why we decided to exclude all the Drupal events - we believe the community is already pretty well informed on these, but perhaps not so much on non-Drupal ones.

We hope you’ll be able to make a more informed decision after reading our list. Best case scenario - you won’t have to convince your boss as vehemently after telling them about all the benefits of specific events and all the amazing speakers you would miss.

So, without further ado, here’s a list of events for agencies to attend in 2019 that stood out to our team the most. 

1. OutBound (April 23-26, Atlanta, Georgia, USA)

With over 1200 yearly attendees from all over the globe and a lineup of renowned professional speakers, OutBound is one of the hottest Sales conferences you can attend. 

Such a high number of prestigious speakers coupled with the huge focus on catering to the audience make OutBound the perfect event for sales executives or even entire sales teams to attend. 

Among this year’s speakers are Bob Burg, with the sales total for his books on sales, marketing and influence well exceeding 1.5 million copies; Meridith Elliott Powell, featured sales expert for the LinkedIn Learning Platform and award-winning author, keynote speaker and business strategist; Anthony Iannarino, another acclaimed international speaker and bestselling author; and many others.

For the full list of speakers and information on tickets and accommodation, see the event’s website

2. Gartner Marketing Symposium/Xpo 2019 (April 29-May 1, San Diego, California, USA)

Gartner’s Marketing Symposium/Xpo is an event dedicated mostly to marketers, particularly CMOs and other marketing leaders. You’ll get a chance to network and exchange ideas with over 1,500 like-minded attendees, as well as expand your professional experience. 

Marketing is a field where trends are constantly shifting and evolving, and one must remain vigilant and keep track of the latest technologies and practices. The 2019 symposium aims to help with exactly that; with the sessions covering a whole range of marketing topics, attendees will have a greater insight into the different trends and consequently will be better equipped to tackle change when it comes (and it will come!).

Perhaps the most appealing thing about Gartner’s event are the exhibitors. Next to major players such as Adobe and Salesforce you’ll also find the leading Drupal company, Acquia

Check out the event’s website for a full list of exhibitors, speakers, schedules for each day and pretty much anything else you might want to know about.  

3. The Next Web Conference (May 9-10, Amsterdam, The Netherlands)

TNW Conference is one of the leading events in Europe celebrating technological innovation. This year will mark the 15th consecutive edition of the conference; over the past 15 years, the event has grown from only about 200 to over 17,500 attendees for each day, making it one of the biggest European tech conferences.

The topics and sessions of TNW Conference are quite broad; anyone working in any kind of tech industry will surely find something for themselves. Topics range from marketing, business, digital product development, emerging technologies, women in tech, commerce, and many more. 

This year’s speakers include: Gordon Willoughby, CEO of WeTransfer; Gillian Tans, CEO of Booking; Chris Slowe, CTO of Reddit; … you know what? There are too many awesome ones to list them all - check them out for yourself here!  

4. Mirren Live New York (May 14-15, New York City, New York, USA)

Also dubbed the “agency growth conference”, Mirren Live New York is the perfect event for agencies to attend. It is a chance to meet representatives from numerous globally-recognized names and learn the latest agency trends. 

Their website claims that this year’s lineup is “killer” - and that’s a pretty appropriate description. Just quickly going through the list, we don’t even know where to start - we might as well just list them all. So, go ahead and see the whole list for yourself. 

In case you really do want to catch all the sessions, or prefer leveraging your presence there to make new business connections, it’s also possible to purchase access to the broadcast of most of the sessions. This is also ideal for anyone who won’t be able to make it but also won’t want to miss the speakers.

5. Adobe Summit EMEA (15-16 May, London, UK)

This is the EMEA version of the Adobe Summit, with the North American equivalent taking place this weekend. The focus of the event is on experience marketing - an area that’s becoming more and more relevant, with customers’ and users’ increasing demand for (unforgettable) experiences.

Still, it is an event that will inspire anyone working in marketing. You can personalize your weekend by choosing between more than 120 sessions by fascinating speakers, among whom are Senior Vice President at Magento and Adobe, Mark Lavelle; Digital Project Manager at Capgemini, Kelly Derickx; Vice President EMEA at Twitter, Bruce Daisley; and countless more. 

If you or your company use Adobe products, attending is almost a must, as you’ll get first-hand insights into Adobe’s latest technologies and practices in experience marketing. Here you can check the reasons for attending, with a bonus email template for more easily convincing your boss.  

6. AA-ISP Digital Sales World (different dates and locations)

AA-ISP (The American Association of Inside Sales Professionals) is a global association focusing on Inside Sales. Each year, they organize their one-day Digital Sales World event with four different dates and locations. This is great news for everyone wanting to attend - you have four options to pick from, which ensures that you won’t miss out.

The dates are the following:

  • May 14, London, UK
  • June 13, Dallas, Texas, USA
  • September 12, Norwood, Massachusetts, USA
  • December 3, Dublin, Ireland

It is a digital sales world conference where sales leaders and other industry experts come together for a day packed with learning, networking and getting to know new sales tools and technologies. 

A lot of the speakers are already known; judging from these lineups, it’ll be hard to decide on a single instance to attend. You can check out the main page of the event to get more information and make a more informed choice.

7. SaaStr Europa (June 12-13, Paris, France)

Even though SaaStr Annual in San Francisco already took place in February, you still have plenty of time to plan for and attend the European variant of the event. 2018 was the inaugural year for SaaStr Europa, and it returns to Paris in 2019 with double the content and almost double the number of attendees compared with last year.

SaaStr Europa is thus the perfect opportunity to learn from and network with a wide range of SaaS experts from all over the world. The impressive lineup of speakers includes Christina Bechhold Russ, Principal at Samsung NEXT; Jane Kim, VP of Revenue at CircleCI; the co-founder of Saastr, Jason Lemkin; and many others. 

For a full list of speakers, sponsors and more information on tickets, visit the event site itself.

8. MozCon (July 15-17, Seattle, Washington, USA)

MozCon is a conference organized by the SEO-centric company Moz. As a consequence, the event puts great emphasis on SEO; but, more broadly, it’s an event for any kind of marketer, exploring topics such as branding, user and customer experience, analytics, and content marketing.

The 2019 speakers list features a number of Moz employees, such as CEO Sarah Bird, and other industry experts, such as Head of PR & Content at Aira, Shannon McGuirk. You can check out the full list here.

So - you definitely won’t want to miss MozCon. No matter where in the digital sphere you’re positioned, SEO is a field you’ll always have to keep up-to-date with. Add to that the impressive lineup of speakers and the unique opportunity to connect with leading industry experts and agencies, and you know where you’ll be going this July.

9. INBOUND (September 3-6, Boston, Massachusetts, USA)

INBOUND is HubSpot’s annual conference for sales and marketing enthusiasts. It is an event that puts emphasis on human interaction, where attendees view each other as peers rather than competition, and consequently help each other learn and improve.

The speakers at INBOUND’s sessions are perhaps the highlight of the conference. While speakers for 2019 have not yet been announced, previous years’ speakers include names such as Michelle Obama, Deepak Chopra and Gary Vaynerchuk

Besides all the educational sessions, INBOUND also offers attendees non-business entertainment with performers such as Judd Apatow and Amy Schumer. The agenda for this year has yet to be announced; we’ll make sure to update this post with fresh information. Meanwhile, you can find out more about INBOUND here

10. Dreamforce (November 19-22, San Francisco, California, USA)

Dreamforce is the annual event of the American cloud-based software company Salesforce. Its roots going back as far as 2003, Dreamforce was one of the early B2B conferences - and a relatively small one, at that, with just over 1000 attendees. 

Fast forward a little more than 15 years and Dreamforce is one of the largest B2B events in the world, boasting almost 200,000 attendees and over 2,000 sessions in 2018. 

Even if you don’t use Salesforce or any other cloud products, with such an abundance of options, you’ll definitely find something for you. At the very least, you’ll have the one-of-a-kind opportunity to connect with some of the biggest names in the digital industry and forge new business relationships.

You’ve definitely heard of companies such as IBM, Deloitte Digital and Accenture. Well, these are just the tip of the iceberg of Dreamforce’s sponsors. Additionally, going through the list of last year’s speakers, you’ll stumble upon names such as Arianna Huffington, founder of the Huffington Post and Thrive GlobalOscar Munoz, CEO at United Airlines; and even Al Gore, former US vice president and known environmentalist. 

If you’re still not convinced, check out Dreamforce’s official site for any additional information. You can even calculate the ROI of attending to make a better case to your boss!

11. The Drum Awards

The Drum is Europe’s largest marketing platform, so their annual awards are definitely the place to meet the cream of leading industry professionals. It is a chance for outstanding businesses to get their deserved recognition, which also helps them attract new talented employees.

What’s really great about The Drum’s awards is that they showcase success in all areas of digital and marketing, enabling you to cherry-pick the ones you want to attend and/or the ones most relevant to your position and interest. 

You can view a full list of the awards here. So far, only the dates for the Marketing Awards ceremonies are known:

  • Europe: April 3, London, UK
  • USA: April 11, New York City, New York 

We’ll make sure to update the list as soon as the dates and locations are announced. Meanwhile, you can get a better feel of The Drum Awards by checking out the highlights from last year’s marketing award ceremony.  

Honorable mentions

Some of the don’t-miss events of 2019 have already taken place, such as the already mentioned CES. We also refrained from including events that are happening this weekend, as it would be pretty much impossible to book tickets and/or flights at this point. Nonetheless, we wanted to at least mention them, so you know which ones to be on the lookout for next year:

These were the non-Drupal-related events and conferences in 2019 that we found to be the most appealing. We hope this blog post sheds some light on which of these events you would benefit from attending so that you’ll be able to plan accordingly. We’ll update any lacking parts when more information is released. 

How to find and hire the best Drupal agency

Mar 30 2020
Mar 30

Drupal Agency Working Remotely

Mar 27 2020
Mar 27

9 Things To Take Into Consideration When Starting A Drupal-based Project

Mar 13 2020
Mar 13

Drupal Training – Helping New Developers Learn the Ropes

Mar 02 2020
Mar 02
Feb 27 2020
Feb 27

In a recent Drupal 8 project, we dealed with a multilingual translation issue: we need to translate the usual "View more" text on the Content: Link to Content field in Views.

After doing some research, we found a workaround like this:

1. Instead of using Content: Link to content, let's add two fields: Content: Path and Global: Custom text.

Note: the Content: Path field provides us a corresponding URL alias for each language.

2. On Global: Custom text, please enter:

<a href="https://www.symphonythemes.com/drupal-blog/translate-content-link-conten...{{ path }}">{% trans %} View more {% endtrans %}</a>

3. Now the text "View more" will be available in User interface translation tool under Configuration - Regional and Languages

Note: to translate that text into a given language, you must browse the User interface translation in that given language.

Feb 20 2020
Feb 20

You may already be familiar with Amazon S3, the most popular solution for cost effective storage services nowadays. You will need it when you are looking for:

  • Low cost storage: it happens to be my case, when I implemented a Drupal based web app for a local governmental authority. The app is used by branches from all provinces of the country, and they usually upload a large amount of data (documents, photos, scans etc ...) regularly. Using the app server's storage is too expensive. So I converted the Drupal file system to Amazon S3, leaving only the core and modules on the app server.
  • Fast loading: many bloggers have used S3 to store their photos, videos, audios and files, for better serving their readers. As customers are from all over the world, saving the multimedia content to S3 will let them access them much faster.
  • And many more benefits

In this tutorial, we will show you how to convert the Drupal 7 & 8 file system to Amazon S3 and sync all existing files to S3 Storage.

1. Preparation

You will need to run several client programs like drush and awscli. So if your site is on a shared hosting, you are not able to install and execute them. Pls download it to your local host and configure it there. After that you can upload to your shared hosting.

The techniques that I use in this tutorial are:

  • Amazon S3 ofcourse.
  • Drush:  command line shell and Unix scripting interface for Drupal, very convenient and useful.
  • AWSCLI: the Amazon Web service client tool, I use it to sync data to S3.
  • S3FS: the Drupal module for connecting to Amazon S3

2. Install Drush:

Pls follow this guide to install Drush: http://docs.drush.org/en/master/install/

3. Install S3FS:

For Drupal 7, on the shell script, go to the web project folder and execute the following commands:

drush dl s3fs
drush en s3fs
drush make --no-core sites/all/modules/s3fs/s3fs.make

The first command is to download the S3FS module. The second one enables it. And the third one is to automatically download the required library AWSSDK to /sites/all/libraries/awssdk2. This command is very useful because there are many versions of AWSSDK and only the chosen version (in my case, 2.7.5) is able to work with this module.

If you have no drush, you can install the S3FS module manually and go to GitHub to download the AWSSDK for PHP library and place it under /sites/all/libraries/awssdk2 . Remember to choose the right version, which is written on the /sites/all/modules/s3fs/s3fs.make file.

On Drupal 8, please use composer to install this module. Composer will automatically install required libraries. So on the terminal and under your root project folder, run:

composer require drupal/s3fs

4. Get a key pair to access Amazon S3:

Pls go to Amazon IAM to create an user with Access Key. Pls follow this guide for more details: http://docs.aws.amazon.com/gettingstarted/latest/wah/getting-started-pre...

Then create a bucket on Amazon S3.

5. Configure S3FS access to Amazon S3

Browse Configuration - Media - S3 File System and enter your key pair and bucket name.

Hit Save. If there is no error, then the S3 connection is perfect. Otherwise, pls check your keys and bucket name, according to the error messages.

If you want the credentials and bucket name are not removed by mistakes, pls write them to the /sites/default/settings.php file

$conf['awssdk2_access_key'] = 'YOUR ACCESS KEY';
$conf['awssdk2_secret_key'] = 'YOUR SECRET KEY';
$conf['s3fs_bucket'] = 'YOUR BUCKET NAME';
$conf['s3fs_region'] = 'YOUR REGION'';

Update for Drupal 8: adding keys via the admin interface will be soon deprecated. Instead, add the configurations to the settings.php file like:

# S3FS setting
$settings['s3fs.access_key'] = 'yourkey';
$settings['s3fs.secret_key'] = 'yourkey';
$config['s3fs.settings']['bucket'] = 'yourbucketname';
$settings['s3fs.use_s3_for_public'] = TRUE;

# if you want to use S3 for private files, uncomment the line below:
#$settings['s3fs.use_s3_for_private'] = TRUE;

6. Configure S3FS to take over file system:

Now you may want this S3FS module to take over the public file system. Just open the Avanced Configuration Options section and select Use S3 for public:// files . Just tick and save and the module will take care of the rest.

Return to Amazon S3 and browse your S3 bucket, you should see a new folder named s3fs-public there (or s3fs-private if you choose Private files).

6. Clear the cache and try the first file upload

Now turn into the Actions tab and hit Refresh file metadata cache.

Then upload your first file via the node creation form, such as upload an image of an article. Save it and check the image path, it should look like http://your-bucket-name.s3-us-west-2.amazonaws.com/s3fs-public/... Your file are succesfully uploaded to Amazon S3.

If you don't see the uploaded file, it is because your bucket is not made public. Pls browse your bucket, select the s3fs-public folder and choose Actions - Make Public.

7. Sync existing files to S3

Also on the Actions tab, there is a button to Copy local public files to S3 . Just hit it and the uploading process will run in batch. If you have not many existing files, just wait for a few hours and it will be ok.

In case you have a rather large bunch of existing files, like I had 10GB of public files, the above method is just too slow. With the help of AWSCLI, it will be just a piece of cake.

To install AWSCLI, follow the guide here: http://aws.amazon.com/cli/

On your shell terminal, enter:

sudo apt-get install python-pip
pip install awscli

Then configure AWSCLI:

aws configure

AWS Access Key ID [None]: ENTER
AWS Secret Access Key [None]: ENTER
Default region name [None]: us-west-2
Default output format [None]: json

After that execute this command to sync the sites/default/files folder to your S3 bucket.

aws s3 sync sites/default/files s3://mybucket/s3fs-public --exclude *.tmp

Allow the sync process to complete and check the S3 bucket, you should see your files there.

Wrap up

Before using the S3FS module, I had a failed experiment with Amazon S3 module. The process was more complicated and I hit a deadend.

The S3FS module, in my experience, is much easier to configure and deal with. And I hope you will get the same results as mine. Good luck.

Feb 14 2020
Feb 14

When you share a post of your Drupal site via Facebook, it will automatically detect the images of your node for you to choose. But sometimes, it does not detect any images, or the detected images are not what you want. How can you deal with that?

An easy method is uploading the main image manually. That's fine, because you are the owner of the site, you know which ones to choose. However, if your readers share that piece of content and it has an ugly image, it does not look attracting at all.

In this tutorial, we show you how to set meta data for your Drupal nodes so the correct images will be chosen, when you share them via Facebook.

How Facebook detects images

According to this thread by bkaid on Stack Overflow, Facebook relies on these following open-graph meta tags to decide which image to show.

<meta property="og:image" content="http://yourwebsite.com/yourimage.jpg"/>
<meta property="og:image:secure_url" content="https://secure.yourwebsite.com/yourimage.jpg" />

When these tags are not present, Facebook tries to look for the <link rel="image_src" href="https://www.symphonythemes.com/myimage.jpg"/> tag.

When none of those tags are available, it will choose the images on your page which have the following criteria: Image must be at least 200px by 200px, have a maximum aspect ratio of 3:1, and in PNG, JPEG or GIF format.

Configure image tags on Drupal with Metatags

Using the Metatag module, a single must-have SEO module for Drupal, we will show you how to configure the tags for Facebook sharing.

Step1: Edit your content type, add an image field which you specify it to be the main image to be shared.

Step 2: Download and install the Metatag module on https://www.drupal.org/project/metatag

Step 3: Enable Metatag core module and Metatag:Open Graph submodule

Step 4: Go to Configuration - Search and metadata - Metatags, and choose "Add a metatag default". On the next screen, pls choose your node type that you want to configure, Article for example, then click Add and Configure.

Step 5: Pls click on the link Browse available tokens, open the Nodes section and look for the field image token that you create on Step 1. On my case, it is named [node:field_image]

Step 6: On the metatag form, open the Open Graph section. On the Image field, pls enter [node:field_image]

Update for Drupal 8: the token [node:field_image] may not work on Drupal 8 sites, you will probably need to use [node:field_image:entity:url] instead to specify the exact url that Facebook needs to catch.

You can use the Facebook Share Debug tool to check: https://developers.facebook.com/tools/debug/sharing/

Save the form, your article node now will have the Open Graph meta tag which is good for Facebook image detection.

Feb 14 2020
Feb 14

When creating an e-commerce platform for a given industry, one needs to adapt the system to specific types of products. Every product type has different characteristics, e.g. size, colour, etc. Check out how easily you can customise Drupal Commerce to sell any type of product.

We are happy to tell you how to easily add attributes to products for several selected industries. We are a Drupal agency and we deal with it every day.

Attributes are the characteristics of given product types. For example, when you sell your own original T-shirts, thanks to the attributes you do not have to add separate products when you want to add another shirt size or colour. You create one product, add a size and colour attribute, and create other versions of the same product.

Thanks to this, the customer can easily add to the basket the product variant they are interested in, without having to switch to another subpage with a different product.

Adding Product Variant E-commerce Platform

Product attributes in Drupal Commerce

This post is a continuation of the series covering the Commerce module used to add an e-commerce platform to Drupal Previous part from the basic Commerce configuration.

You add new attributes to the product variation. The product variation is associated with a reference to the product. Thanks to this, you create one product, e.g. a T-shirt with the Droptica logo, and you add variations with different attributes to it. The attribute can be the T-shirt's colour or size. Every variation can also have a different price.

Start by creating a new type of product – T-shirt
From the admin menu Commerce → Configuration → Products → Product types

E-commerce creating a new type of product

Add a new product.

→ enter label
→ check that the product should have many variations
→ Product variation type – by checking Create new, a new variation type will be created automatically with the same name as the product type, in this case – T-shirt. You can also choose an already existing variation type.

product variation type

If you set Create new in the variation field, after saving the new product type, by going to 
Commerce → Configuration → Products → Product variation types you will see a new variation type.

new variation type

Product attributes for a T-shirt/clothing store

Two typical attributes for this type of store are colour and size.

Colour.

The standard solution for colour choice is to create a linked colour, where – after clicking it – the appropriate variation of the product loads.

solution for colour

Drupal Commerce lets you achieve this effect very simply.

The list of attributes and the option of creating them is available in
Commerce → Product Attributes

Lista atrybutów

Add a new attribute by clicking the Add product attribute button

add its name – Colour
element type – for now, set the Select list,
and the product variation, to which it is to be linked – T-shirt,

Add product attribute button

After saving, add colour values as you like.

add colour values

Now create a new T-shirt product and add some variations to it to see how the attributes work. Set different prices for different variations – you will see then that after changing the attribute the price will change automatically.


The colour attribute can be found in the product variation creation form.

colour attribute

When you go to the main product page, the colour selection list will be visible. 

the colour selection list

Change a selection list to links with colours

To achieve this effect, you need to add a new module – Colour Field

After enabling the module, add a new field to the colour attribute.

You can do it in the same way as you would for any other entity in Drupal.

Go to Commerce → Product Attributes 

And choose the Manage fields link

Product attributes

Add a new Colour field

Colour field

Save the settings

color settings for color

The next step in the configuration is to change the display of the colour field in the tab for managing the appearance of the form, as well as the appearance of the field when the product is viewed.

Managing the form appearance

Set for both fields to be visible. This makes it possible to set the name of the colour and its HEX value when editing the attribute.

manage form display

Managing the display.

In this case, you leave only the colour display and hide its name. In the format set – Colour switch. 

Thanks to this, coloured squares with colours to choose from will appear. By clicking the settings cogwheel sign you can change the size of these squares or replace them with ovals. 

manage display

The last step is to change the settings in the attribute itself.

Go to its edit options.

Change the Element type to Rendered attribute and add hex values for individual colours. 

editor color

After saving the settings on the page, the products – instead of an attributes/selection list – will be linked coloured squares.

Attributes for an electronics store

Laptops are one of the products found in electronics stores.

Typical attributes for this product type are:

  • pre-installed operating system
  • RAM amount
  • SSD capacity

and some others, but for the purposes of this post, I will show you how to add these three.

Attributes are added in the same way as in the previous example concerning a T-shirt store.

The result of the configuration will be:

  • operating system selection list
  • clickable RAM amounts to choose from
  • radio buttons with SSD capacity selection

Image laptop

I assume that the store has already added the product type and the product variation – Laptop

Configuration for the operating system attribute.

the operating system attribute

RAM attribute configuration

RAM attribute configuration

SSD capacity attribute configuration

SSD capacity attribute configuration

Summary

As you can see, attributes can be added to the products in a Drupal Commerce-based store in a very quick and easy way. By implementing them, you will help the potential customers find the right product faster and give yourself a chance to increase the turnover.

Feb 07 2020
Feb 07

The default contact form in Drupal has quite basic settings. You may only create categories and receiving emails with the default UI admin. To change other preferences such as form title or form destination, we may have to implement override hooks.

In this article, we present some tricks to customize the contact form in Drupal. More tricks will be added regularly.

1. Edit the contact form title

To change the title, add this function to template.php on your theme folder (/sites/all/themes/your-theme/template.php)


<?php
function mytheme_form_contact_site_form_alter (&$form, &$form_state) {
drupal_set_title ('Contact ABC Media');
}

2. Redirect form result

By default, users will be redirected to front pages after submitting the form. It has a strange behavior for users because they may confuse what is going on, whether the message has been sent.

To redirect the contact form to a page of your choice, please add these two functions to your template.php file of your theme, as in section 1 above. I learnt it from a tip of Postrational.


<?php
function my_theme_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == 'contact_site_form') {
$form['#submit'][] = 'contact_form_submit_handler';
}
}
function contact_form_submit_handler(&$form, &$form_state) {
$form_state['redirect'] = 'thank-you-page-alias';
}

Do you have other tricks with contact forms in Drupal? Pls share and we will post them here with acknowledgement to you.

Jan 21 2020
Jan 21

We had a Drupal project, implementing a commerce site for a local store. We use Drupal Commerce, as always, for this type of websites. You may see that we have alot of Drupal Commerce themes on our portfolio.

During the project, there was a minor request from our customer: add the Continue Shopping button to the cart. This feature is available on Ubercart, especially for Drupal 6 Ubercart users. Most of ecommerce sites have this feature as well. But it is not built-in with Drupal Commerce.

As I searched on the Drupal.org issues, I found a very helpful thread: Continue shopping in cart. Zorroposada presented a custom code to achieve it:


<?php
/**
* Implements hook_form_FORM_ID_alter(&$form, &$form_state, $form_id)
*/
function MYMODULE_form_views_form_commerce_cart_form_default_alter(&$form, &$form_state, $form_id) {
$form['actions']['continue_shopping'] = array(
'#type' => 'button',
'#value' => t('Continue Shopping'),
'#weight' => -999,
);
if (isset($_SERVER['HTTP_REFERER']) && strlen($_SERVER['HTTP_REFERER'])) {
// if user comes from product detail page, redirect user to previous page
$form['actions']['continue_shopping']['#attributes'] = array('ONCLICK' => "history.go(-1); return false;");
} else {
// redirect user to product list page 'store' by default
$form['actions']['continue_shopping']['#attributes'] = array('ONCLICK' => "window.location.href='" . url('store') . "'; return false;");
}
}
?>

I do nothing better here. I just wrap this code on a custom module, so any lazy users can just download and install it.

The module is called "Commerce Continue Shopping", and you will find it in the Other section of the Drupal module page when unzip it to /sites/all/modules. Enable it and you will see the Continue Shopping button on your cart.

Pls download the module here: commerce_continue_shopping_7.x-1.0.zip

Jan 16 2020
Jan 16

We had been always using FAQ module to create Frequently Asked Questions for any of our projects. But on our latest theme, BizReview, we switch to a new module, FAQ Field.

FAQ is a classic module, it is there since Drupal 6. So when we have to build a FAQ section, using this module is a no brainer. This is the FAQ module in action on our Velocity theme.

Velocity FAQ section

Recently, when I wanted to download that module again for my new project, I was too lazy to type the full URL, so I google "drupal faq". It happened to display another new module, called FAQ field. I looked at the description and found it very promising. So I gave it a try. After using it, I have the following comparisions between the two modules.

FAQ Field
  • Older, since Drupal 6. 34K+ usages
  • Uses Views to display FAQ nodes
  • Create new question by adding new FAQ node
  • Needs to use Weight to control the question orders.
  • 4 diplay options on configuration
  • Allow subcategories
  • Newer, only since Drupal 7. 1,700+ usages
  • Integrate as a field of a node
  • Create new question by adding a field value
  • Drag and drop to control the question orders.
  • 4 display options on fied display configuration
  • No subcategories

I found the FAQ Field module is more light weight and easier to use. I just need to create a new content type with the FAQ field, then add a new node with any number of questions, instead of creating a separate node for each question. Ordering is much simpler, just drag and drop, instead of typing weight numbers.

Installation and tutorial

Here are the steps to use the FAQ field module:

  1. Install FAQ field (no dependancies)
  2. Create a new content type, FAQ for example. Add the FAQ field

    FAQ field on new content type

  3. Create a FAQ node

    FAQ field on node

  4. The result

FAQ field in action

Jan 10 2020
Jan 10

When you download and install the Drupal core, it is by default English, as you may know. Our Drupal themes on Symphony Themes are also in English by default. In many cases, I receive requests from customers on how to quickly translate Drupal to their languages (not English, ofcourse).

Here is the guide. It applies to translate Drupal in a non-multilanguage site. If you need more than one language in the same site, you will need to do a lot more stuffs, which can be found on another article.

1. Enable neccessary modules

Please go to admin/modules and enable Locale and Content translation.

2. Add your language

Go to admin/config/regional/language to add your language, please choose it as default language

3. Download the translation manually

Go to http://localize.drupal.org/translate/downloads?project=drupal to download translation package for your language.

Then import the translation. Go to admin/config/regional/translate/import to import the package you have just downloaded.

4. Automate the process with Localize Update

You can automate the translation update process for the Drupal core and all of your installed modules as well by using the Localize Update module.

It is very useful. When you install new modules, this Localize Update module automatically pulls the translations for the new modules from localize.drupal.org.

5. Translate manually

The site is now translated to your language. If you find any untranslated strings, please go to admin/config/regional/translate/translate to search and translate them

That's quite simple, isn't it? If you find this article helpful, please subsrcibe to our mailing list to get notified on latest news and tutorials.

Apr 05 2019
Apr 05

Are you turned off with table content, especially a long table of over 100 rows? It is a nightmare to create a HTML table, look for each tag to enter data.

Recently, I was working on a local project which has a member directory on 63 provinces over the country. Each province has 5 lists of different types of members to keep track with. Each list has an average of 50-100 members. It is not hard to imagine inputing them by HTML is a nightmare.

That's when Table Field comes in handy.

What it does?

Basically, this Table Field module allows you to create a field in your content type with tabular data. You can either enter cell data manually by specifying the number of rows/columns; or you can import from a CSV file.

Using CSV import is the most amazing feature that I need for my project. Just turn Excel files to CSV, upload to each node and it is done. 

How to use?

  1. Install the module from: https://drupal.org/project/tablefield
  2. Add a field to a content type

  3. Create a node, enter table data or import from CSV

With the help of this module, my job on that project becomes much easier. This cool Drupal module saves me a day.

Mar 15 2019
Mar 15

This organization theme was inspired by my talk with Kim McCluskey, the founder of SunInMyHeart.com, a charity fund. During his trip to Halong Bay, I have heard about what he did for SunInMyHeart to help orphanage children. So after the trip, I created this theme for organization and non profit purposes. 

If you are interested in using this theme for your charity funds, please feel free to ask me and I will send you the package free-of-charge.

We have received many requests to download this theme. As we believe the use of this theme for your websites will bring alot of benefits to other people, especially for charity purposes, we have converted this theme to Drupal 7 and provide it free of charge. No more asking, just go to the theme page and click on the Download tab, you will be able to get it.

This theme is now hosted on Drupal.org: http://drupal.org/project/fiddle

You can preview and download Fiddle. We will support all problems with Fiddle at our Support Forum.

Feb 27 2019
Feb 27

Slideshow is one of the most essential part of any Drupal websites. It is basically the first thing that attracts your eyes when you visit a website. It is large enough and it has many cool transition effects that you can't help take a look at it. Having a long time working with Drupal, I collect and present in this article some of the best Drupal slideshow modules.

There are alot of Drupal slideshow modules, however, I only pick the modules which are in high usage, under active development and support Drupal 7. I downloaded and tested them all to see what are pros and cons of each module.

Now these are best Drupal slideshow modules in my opinion: 

1. PhotoSwipe

In the mobile first trend nowadays, being responsive is not the favorable. When we developed a local project named Ecoparker and found out 70% traffic is from mobiles.

It requires us to choose a slider module that must be mobile friendly.

PhotoSwipe is the answer, it is very fast, excellent UX on mobiles and support lazy loading (a crucial need for data loading on mobile).

Demo: https://ecoparker.com/cafe-o-ecopark/starbucks-ecopark

Download: https://www.drupal.org/project/photoswipe

2. Flex Slider

flex slider drupal

Flex Slide becomes my "no brainer" choice for the slideshow module that I installed defaultly on all themes and web projects. It looks similar to Views slideshow, but it is far more advanced, it supports finger touch in mobile displays. Using this module, you can swift to change slides by your fingers when you see it on a mobile phone.

Although it has only two type of transitions: fade and slide, but I can sacrify the lack of transition effects for better mobile experiences.

Demo: http://erhu.symphonythemes.net/

Download: http://drupal.org/project/flexslider

Installs: 15'000+

3. Mega Slider

mega slider drupal

Mega Slider is a premium Drupal slideshow module, ie, it is not free. Although I was reluctant to purchase a Drupal module, I found this module worths any penny. With this slider, you can define any elements to pop in and pop out with over 20+ effects. The admin panel is so easy to use that you can make slides by just seleting, dragging and dropping. I apply this module on our lastest Drupal theme Velocity and the result is incredible.

Demo: http://velocity.symphonythemes.net/

Purchase: Mega Slider

Installs: N/A

4. View slideshow

view slideshow drupal

This is the most popular slideshow module in Drupal. I uses to install Views Slideshow in most of our Drupal themes. With Views Slideshow, you can have a slideshow of any content (not just images) that can appear in a View. Powered by jQuery, it is heavily customizable: you may choose slideshow settings for each View. However, when responsiveness is a must for any websites nowadays, I opt it out and choose Flex Slider.

Demo: http://demo.symphonythemes.com/drupal7/yali

Download: http://drupal.org/project/views_slideshow

Installs: 170'000+

5. Vegas Background Slideshow

flex slider drupal

We used to envy other CMSes with their beautiful fullscreen slideshow, but no more. Vegas is a jQuery plugin to add beautiful fullscreen backgrounds and slideshows to your webpages.

Demo: http://vegas.jaysalvat.com/

Downloads: https://www.drupal.org/project/vegas

Installs: 5,000-

6. Nivo Slider

flex slider drupal

An implementation of the great Nivo Slider in Drupal with 16 amazing transition effects. So if you like a more fashionable slideshow, this one is a great choice.

There are two modules: Nivo Slider and Views Nivo Slider. I recommend Views Nivo Slider since it works with Views, as we always do to configure slideshow in Drupal.

Demo: http://dev7studios.com/nivo-slider/

Downloads: http://drupal.org/project/views_nivo_slider

Installs: 15'000+

7. Slick Carousel

flex slider drupal

We applied this module on a recent local project and the quality is just amazing. It is responsive, CSS3, swift enabled ... all that can not be performed on the legacy JCarousel module (which I mentioned on the #16 of this list).

With the submodule Slick Views, you can create a slider from views as well. If your website has both slideshow and carousel, you can just use this single module (and its submodule).

Demo: https://www.drupal.org/project/slick/

Downloads: https://www.drupal.org/project/slick

Installs: 15'000+

8. Field Slideshow:

If you want a Drupal slideshow in content, Field Slideshow is the one. Instead of displaying slideshow nodes in a block, this module allows you to display multiple images as a slideshow within a single node, an article for example. It gives you a field in your chosen content type so you can add many images and hit Save: Voila! The slideshow appears within other text content.

Updated Dec 2014: since I adopt Flex Slider which has its sub module Flex Slider field, I no longer this Field Slideshow any more.

Download: http://drupal.org/project/field_slideshow

Installs: 16'000+

9. JuiceBox HTML5 Image Galleries

flex slider drupal

Using the JuiceBox Javascript, this module offers a powerful cross-device solution for image galleries, sliders and more. JuiceBox has two versions: the Lite (free) and Pro (paid). You can do alot of cool stuffs with just the Lite version.

Demo: http://www.juicebox.net/demos/

Download: https://www.drupal.org/project/juicebox

Installs: 8,000+

10. Bootstrap Photo Gallery

flex slider drupal

Bootstrap Image Gallery is an extension to blueimp Gallery, a touch-enabled, responsive and customizable image and video gallery. It displays images and videos in the modal dialog of the Bootstrap framework, features swipe, mouse and keyboard navigation, transition effects, fullscreen support and on-demand content loading. This module requires a Bootstrap base theme to work.

Demo: https://blueimp.github.io/Bootstrap-Image-Gallery/

Download:

Install: ~1000

11. Dynamic display block

DDBlock slideshow drupal

Dynamic display block slideshows are mainly used to showcase featured content at a prominent place on the frontpage in an attractive way. Basically, it has two main features:

  1. Displays images in a chosen folder as a slideshow
  2. Displays nodes of a specific content type as a slideshow (this is similar to Views Slideshow). A featured content slideshow can contain e.g.: New articles, Most popular content, New products, Portfolios, Videos etc

Demo: http://ddblock.myalbums.biz/

Download: http://drupal.org/project/ddblock

Installs: 18'000+

12. Slideshow Creator

Slideshow Creator is very similar to Dynamic Display Blocks and Field Slideshow, except:

Pros:

  • more features as it can display images on directory, by URLs.
  • place it anywhere in the document (in comparison with DDB only diplays on top or bottom of the node).

Cons: User needs to remember the embed code syntax.

This module creates slideshows anywhere in the document using any image on the internet with many other features. If the user does not have JavaScript enabled, it displays all images sequentially.

Download: http://drupal.org/project/slideshow_creator

Installs: 2'400+

13. Galleria

flex slider drupal

I use the Galleria module in most of our photography themes. It displays a gallery of images and thumbnails with eye catching look and feel.

Demo: http://demo.symphonythemes.com/drupal7/viola

Download: http://drupal.org/project/galleria

Installs: 10'000+

14. Gallerific

flex slider drupal

Galleriffic is similar to Galleria, both of them are particular useful in handling high volumes of photos while conserving bandwidth. Galleriffic has more flexible thumbnails as they can sit on the top, the side or the bottom of displaying images.

Demo: http://demo.symphonythemes.com/lirone

Download: http://drupal.org/project/views_galleriffic

Installs: 4600+

15. Image Flow

flex slider drupal

This module turns a group of images into a rotating circular gallery similar to Apple's coverflow effect. There are a few modules supporting this effect: Image Flow, Views Slideshow Image Flow and Views JQFX Image Flow. I recommend Views JQFX Image Flow as it has higher usage and it supports Drupal 7.

Demo: http://www.lunarclips.com/drupal-7-imageflow

Download: http://drupal.org/project/views_jqfx_imageflow

Installs: 1100+

16. Content Glider:

The only reason that you should consider to use this module is when you don't want to install addons JQuery script (I am not that lazy). It is a standalone module, no need additional script or another modules. Just install and use it!

Download: http://drupal.org/project/content_glider

Installs: 1590

17. JCarousel

JCarousel slideshow drupal

Description: This module allows developers and themers to make use of the jCarousel jQuery plugin. It includes a developer API that other modules can use, as well as Views integration in the 2.0 version so that you can turn any list of content or images into a carousel.

Link to download: http://drupal.org/project/jcarousel

Deprecated modules

These are a couple of modules that I mentioned on this same thread over 2 years ago but they are inactive now. It supports only Drupal 6.

17. 3D Views Carousel

3D view caroused slideshow drupal

Description: This module is a views plugin that integrates Professor Cloud Carousel A 3d Carousel in JavaScript. Its main functionality is to generate a 3D floated rotated images, which accelerates and moves automatically according to mouse wheel. This module works fine with Lightbox2 and Shadowbox.

Demo: http://www.professorcloud.com/mainsite/carousel.htm

Download: http://drupal.org/project/viewscarousel3d

Jan 11 2019
Jan 11

Automate actions on your Drupal-based website. This will enable it to run even more independently from your input.

Automated mailing, publishing new content at a specified time and redirects after meeting certain conditions are only some of the functionalities featured in the Rules module.

Rules is a tool that enables you to define automatic, conditionally executed actions, triggered by various types of events.

What are some examples of such automated actions? For example:

  • redirecting the user after logging in;
  • sending an e-mail after adding content;
  • publishing content at a specific time.

At the foundation of the module lies the Event – Condition – Action rule, with one caveat – the CONDITION does not have to be a part of this scheme.
An example scheme could be as follows:

  1. A user adds an entry – that’s the event.
  2. The type of the added entry is “Article” – that’s the condition.
  3. Notify the admin about somebody adding an entry via e-mail – that’s the action.

Installing and setting up the Rules module

Currently (January 2019), the module is still available in alpha4 version only, which means that some of its functionalities and features might not work properly, there might also still be some errors and bugs.
For the purposes of this article, we used the DEV version of the module.

The below example works and was tested on the configuration outlined below:
Drupal : 8.6.5
Rules : 8.x-3.x-dev
Typed Data : 8.x-1.0-alpha2

Download the modules and unpack them in the /modules/contrib directory.
Rules – https://www.drupal.org/project/rules
Typed Data – https://www.drupal.org/project/typed_data

If you are going to create rules with user roles in the conditions, for example, if you want to redirect users with an “administrator” role who log in to a specific site, you will need to add a patch: https://www.drupal.org/files/issues/2816157-10.patch. It will probably not be needed in the future, but as it stands, it is still required for the user role condition to work properly.

How to apply patches? – https://www.drupal.org/patch/apply.

Creating and testing your rules

We are now going to show you how to add a new rule, step by step: Redirecting to the /admin/people page after a user with the administrator role logs in to the website.

Add a new rule - /admin/confg/workflow/rules.
Add new rule

Fill in the fields:

  • Name your rule using the label field.
  • From the drop-down menu, select the event that will trigger your rule. In our case it is going to be “User has logged in”.

Add a condition.
Select the appropriate value, in our case, it is going to be "User has role(s)”.

Select the right condition

Now, you are going to deal with the hardest part of creating a rule, namely selecting the appropriate objects that the condition will work on. You have to be really careful here, because despite this field being validated, sometimes you might set erroneous values that will cause problems down the road.
In the USER section, switch the field from the automatic filling mode to the selection mode. Switch to the data selection.

This condition concerns users, since it is their role that you have to check, so you need to type “account” in the field.

In the ROLES section, put in the roles that will fulfil the condition. You need to put in the machine name. You can view it at /admin/people/roles page by editing a selected role. In our case, it is going to be “administrator”. You can add more roles, just keep in mind to add just one role per line.

In the MATCH ROLES section, if you have selected more than one role, you can set whether the user must have each of these roles (AND) or any of them (OR).

In the NEGATE section, you can select whether this condition should be met when the above settings are NOT MET – in this case, the action will be executed when each user logs in, except for those who have an administrator role.

Rules module conditions

Add an action.

+Add action button of module shown

Select Page redirect from the System section.

"Page redirect"action selected

Enter the address (internal or external) to which the user should be redirected after logging in.

redirection address (internal)

Save and test the rule.

In order to ensure that the rule works, clear Drupal’s cache.

Now log in and check if the redirection is working.

My redirection for the admin role does not work. What do I do?!

PHP throws an error:

  • make sure you have applied the patch mentioned above;
  • make sure that you used the “account” object in the USER section of the rule condition.

Redirection does not work after logging in:

  • make sure that the rule is saved correctly;
  • clear Drupal’s cache;
  • make sure that the role name in the condition is correct.

Discover the many possibilities of the Rules module.

The Rules module is a really powerful tool which enables you to build complex rules that will automate your website.

If you have an idea for using this tool in your project, but you need help, do not hesitate to contact us.

Jan 11 2019
Jan 11

You may ask me: why to have page titles for views?

Views in Drupal, technically, are used to display a list of content. Translating to business language, it will be used for category pages. For example, if you build a shopping website in Drupal to sell mobile devices, you will use "views" to construct the page of Apple products (and also Samsung products, LG products, etc ...)

These category pages are very important (second most after your homepage). You will definitely want they appear on top of Google search results for relating keywords. To achieve it, one of the best SEO practices is to set good focused titles for them.

When I developed the website for Exotic Voyages, a luxury travel agent, it has many category pages. They are pages for hotels, tours, destinations, cruises, photos etc ... all are built by Drupal 7 views. The SEO team of Exotic Voyages required me to let them set custom titles for these pages.

A tour page built by Drupal views - Exotic Voyages website

An example of a view in Drupal

I thought it should have been a popular topic. I spent days and could not find a quick and strait forward solution. Fortunately, I finally found a solution for this problem: 

1. Simple Page Title

Simple Page Title is simple, but it does exactly what I need, to be able to set custom title for any pages, basing on URLs.

This module is not popular, only 500+ installs and its version for Drupal 7 is still in development mode. However, I tested it in my client website and found no problem with it.

After installation, the module appears on Admin > Structure > Simple Page Title. Just provide the path and the title you want, and click on Submit. That's quite easy.

Using Simple page title module in Drupal

Using Simple Page Title

It works properly in conjunction with the famous Page title module. So if you can both set title patterns and custom title as you desire.

Note: if you like the simplicity of this module, you may want to see the Metatag quick module as well. It also enables you to set custom metatag for any URL.

2. On Drupal 6, use Nodewords Page Title

On my Drupal 6 websites, I use the Nodewords Page Title module. It is an addons to the Nodewords module and provides an additional tab to set custom page title for URLs.

Using Simple page title module in Drupal

Using Simple Page Title

Please be warned that this module only works with Nodewords 1.12-rc1 or 1.12-beta9.

3.Use views as attachment block

Another interesting solution which I found on this article on Digett is to make all pages on your website as nodes. Then, configure a view as a block and attach to a specific node.

That's a clever way to work around the problem. Now you can set page titles and meta tags for nodes with ease, like I have describe on the previous article "Set Drupal page title and node title".

This article is written by . Enjoy!

Jan 03 2019
Jan 03

At Droptica, we designed, made and implemented a new design of an online store for mobile devices for one of the oldest publishers in Poland. We used Drupal 7 Commerce and did some search engine optimisation. The results? Increased sales.

The mobile view of redesigned page.

Publishing house

Three years ago we started cooperating with Wydawnictwo WAM Publishing House, one of the oldest Polish Catholic publishers. In addition to books on religious topics, they also publish scientific and popular science publications, with a total of about 150 titles a year. Their products include prayer books, catechisms, academic dissertations, literature, biographies, young adult books and cookbooks, including the famous recipes of Sister Anastasia.

“The most admirable work of our time” said Pope Pius XI about the "Apostleship of Prayer,” which was the source of the Krakow-based Wydawnictwo WAM Publishing House. It was founded in 1872 by the Jesuits. In practice, this means that WAM celebrated its 145th anniversary in 2017.

What is more, the publishing house received many awards and distinctions, including the Magellan Prize, 2014 Feniks Award and many more.
The publishing house also runs an online store and Deon.pl – social networking and news website.

The start of cooperation

We started our cooperation by building modules to improve purchasing on their website. Some of the notable examples include:

  • a module allowing users to send purchased products as gifts;
  • pick-up point selection;
  • integrating Drupal Commerce with Freshmail, which allowed the publishing house to target newsletters and send information about new products via e-mail.

Mobile version

A mobile view of another subpage.

Our task was to modernise the Drupal Commerce store mentioned above. It was nice and pleasant on the desktop; however mobile devices were another story. The store was designed and created a couple of years ago using Drupal 7 when mobile shopping was mostly unheard of. The times changed. The customer expects to be able to browse the goods, find out more about the products and purchase them using any mobile device.

Since the standards today are totally different than when the store was set up, the graphic design and layout had to be improved in order to make shopping from mobile devices more convenient.

There is no doubt that traffic and purchases from mobile devices are on the rise. At the same time, we should remember that even if the customer prefers to place the actual order using a computer (for example, because they might prefer to enter data using a standard keyboard), they often learn more about the offer and browse goods on a mobile phone or a tablet.

A view of menu for mobile version of the website
We had to act.

We started with the preparation of a new graphic design. Our graphic designer created a design tailored to mobile devices, which not only looks nice but also improves and facilitates interaction with the user.

We decided that not only we would change the layout, but we were also going to choose appropriate fonts, which would be better visible on mobile devices, and change the colours. The desktop look would remain unchanged.
After a few minor changes, the client accepted the new design and our developers started working on it.

A mobile view of the user account subsite.

We started by moving CSS to SASS pre-processor. Variables, mixins and a cleaner structure made working on changes in the graphic design faster and more efficient.

At the same time, our QA department started creating tests in Codeception. One of the main conditions was to leave the desktop layout unchanged, testing in Codeception was supposed to capture the current appearance and inform about possible undesirable changes in the course of later work.

After initial preparations, we started working on the layout change. Our main priority was the purchasing process – the cart page, payment method selection and delivery. Then we changed the product pages, information pages and search results.

A view of the product page for a mobile version of the service.
At the same time, we also developed new tests to make sure that changes in the code do not cause changes in other parts of the store, that would be difficult to notice otherwise.

It turned out that not only changes in SASS/CSS, but also additional JS code were required. For example, the website had a number of carousels with graphics. In order to make sure that they worked properly, we had to additionally change and expand the existing JavaScript code. We have added additional drop-down elements on subpages in smaller resolutions and we completely rebuilt the menu, together with the addition of the so-called sticky menu for mobile devices.

Before each implementation we performed automatic and manual tests, we analysed the entire purchasing process and checked the layout along the way. We checked everything in different environments and browsers. We fixed all the bugs that popped up and made sure that the layout was unified.
Throughout the process, we regularly implemented the results of our work, on average once per week.

Summary of changes

  • Improved layout for mobile devices – it is now clear, it attracts customers and makes it easier to navigate the site and make purchases.
  • Changes in the purchasing process (forms were adapted to the mobile layout) to speed up shopping and facilitate the choice of delivery and payment methods from smartphones and tablets.
  • Fixing bugs on mobile screens.
  • The website was adapted to current standards.
  • Implementing automatic testing, helping us catch bugs and saving developers' time.
  • Reduced session duration coupled with increased revenues for customers using mobile devices. This means that the customers find what they are looking for quicker than before.
  • Increase in purchases made using mobile devices by 200%.

The client was very satisfied with the new layout, but we were most satisfied with the sales growth. After a few months of measurements, it turned out that not only were more purchases made via the desktop version, but purchases made using mobile devices increased twofold in comparison to the same period in the previous year.

SEO

After completing the work on the mobile layout, we focused our efforts on SEO (search engine optimisation and positioning) in order to attract new customers, increase traffic on the website and add new information about products in search results.

We started from connecting the website to Google Search Console, a tool that allowed us to measure traffic on the website, improve performance and catch bugs. Then, we implemented changes based on the SEO audit, which included:

  • improving headlines;
  • adding a notification for editors if the optimal number of characters in the description tag is exceeded – the information in the tag is displayed as hints during searches;
  • adding a sitemap;
  • adding price and product availability to Google search results; 

Additionally, we optimised the size, proportions and quality of graphics on the website.

The size of graphics and page loading speed is important for Google Search optimisation. The faster the page loads, the greater the rank, which in turn increases the probability of ending up on a high position in search results.

Smaller graphics result in faster page loading times. A faster connection enables serving more customers. Fast page loading is also important for customers using smartphones and tablets, especially when their connection is weak and slow. Thanks to that, more people can conveniently browse the pages and shop more frequently.

Results of SEO work

  • Changes resulting in a higher position in search engine results.
  • Increased traffic from search engines (Google and others). Traffic increased by 50%.
  • Indexing all pages belonging to the Wydawnictwo WAM Publishing House bookstore. Google and other search engines now crawl the entire content of the pages, indexing all products and improving the publisher’s competitive edge.
  • Adding tools informing about traffic on the website.
  • The search results include additional information regarding price and availability.
  • Easier work for editors (SEO compliance information) when adding new items.

Summary

Work on the new mobile layout and SEO-related changes resulted in a number of benefits for the Wydawnictwo WAM Publishing House. The most important of these were:

  • A significant increase in website traffic and sales in the months following the implementation of the changes.
  • Increase in desktop sales by 50% compared to the previous year.
  • Increase in purchases made using mobile devices by 200% compared to the previous year.
  • 84% more new users.
  • A new layout that makes it easier for customers using smartphones and tablets to navigate and make purchases.
  • New layout and graphic design for mobile devices.
  • Quicker page loading times.
  • Reduced rejection rate.
  • Full GDPR compliance of the store.
  • Improved (simplified and sped up) purchasing process – from the shopping cart to selection of the delivery method.
  • Making sure that Google and other search engines crawl all content, products and items.
  • Additional product information in Google search results.
  • Easier work for editors working in the bookstore.
  • Compliance with current standards.
  • Introduction of automated tests that will make it easier and faster for developers to later work for the publishing house.

We continue our cooperation with Wydawnictwo WAM Publishing House. We are currently working on improving warehouse processes.

Jan 03 2019
Jan 03

This topic is not new, but unfortunately I only knew all tricks about it recently when I have a request from my customer: "How to make page titles different from node titles, with and without patterns?"

1. Why to have 2 types of titles?

The reason is, node title is for readers, page title is for SEO. A page title of a web page is displayed on top of your browser window and the current tab.

Drupal page title vs node title

It is also selected by Google as the title of a result on the search list. Below is the page title of the article "[Drupal 7 free theme] - ST Flabiol is available for free download" when you search for the keyword "Drupal 7 free theme", 

Drupal page title in Google search

To show why you need two different tiles, let's see an example. You create a rating website, similar to ST Chapi, to review restaurants in Ohio. You create a directory of restaurant nodes on your website. When local people search a keyword about restaurants, you probably want your content nodes appear on the search results as "Lobster Restaurant in Ohio", "Finest Kitchen in Ohio" and etc ... That's targeted, catching and relevant.

However, when users view these restaurant nodes on your website, you may not want to add the postfix "in Ohio" for all nodes: Maid Cafe in Ohio, Lobster Restaurant in Ohio, Finest Kitchen in Ohio and so on .. It looks boring to readers. And you may forget to type in everytime. 

2. Set the page title with pattern

In the situation above, you can append automatically the postfix "in Ohio" to the page titles of every restaurant nodes while keeping their node titles short. With the help of the page_title module, it is easy to implement this scheme:

Step 1: Install page_title module

Step 2: Go to Admin > Configuration > Page title, and set patterns.

Set pattern for Drupal page title

You just need to add "in Ohio" after the token [node-title]. It is quite easy. You may also set patterns for other content types to suit your SEO strategy.

Note: you can also use the metatag module, it is even more powerful than page_title. It allows you to configure meta titles, descriptions and keywords at the same time, although it requires more steps. Thanks Damien for recommend this metatag module.

3. Set custom page title for individual nodes

What if your desired page titles do not follow any pattern at all? For example, you want:

  • Node "Restaurant A" page title to be "Restaurant A - Best seafood restaurant in Ohio". 
  • Node "Restaurant B" page title to be "Restaurant B - Great view and service".

In this case, you properly want to set custome page title for each nodes, regardless of the default pattern. Just go to Admin - Structure - Content types, and edit the corresponding content type.

On the Page title section, please select "Show field".

Configure Drupal page title to show editing field

Now you have two title fields, node title and page title. When editing a node, you can set node title as usual and enter a different page title on the "Page title" section at the bottom of the edit form.

Set page title for nodes in Drupal

4. Some tips to set page titles

  • Keep your page title less than 70 characters: it is better for human reading. 
  • Put your top keyword closed to the begining: and then the second top keywords, and etc ...
  • Get rid of stop words (words that carry no keyword value): such as a, an, the, but, then, if, or, what, we, he, she ....
  • Leave your company name at the end: we know you value your company brand, but put what users concern first.
  • Keep different pages different titles: do not use same page titles for multiple pages.

5. Page title for views

Please see my other post for custom page title for views in Drupal

Enjoy!

With Droopler 1.4 you will LOVE content management in Drupal

Dec 24 2018
Dec 24
Dec 24 2018
Dec 24

ST Flabiol was used to be a premium Drupal theme. We have decided to convert it to Drupal 7 as a free theme. It was first made with politic style, but it is also very suitable for a business or organization, the kinds of institutions that require no fancy theme but trusted and gentle feelings.

Updated Jun 2013: This theme is now available on Drupal.org. You can download it at Flabiol on Drupal.org

Demonstration

See the demo here: Drupal theme ST Flabiol demo

Features

Join our newsletter

Please subscribe to our newsletter to get free access to resources and updates from Symphony Themes.

Subscribe

Here are Flabiol's feature:

  • Drupal 7.x responsive
  • XHTML 1.0 Strict, CSS 2.0 Valid
  • 8 Regions
  • 3 Colors
  • Install profile - install website with just few clicks
  • Customize using Theme Settings
  • Professional Typography
  • SEO tools: autopath, meta tag, Google Analytics, page title.

Free Download

You can preview and download Flabiol (please click on the Download tab). We will support all problems with ST Flabiol at our Support Forum.

ST Flabiol layout

ST Flabiol layout

Similar articles

It’s been a year with Droopler!

Dec 20 2018
Dec 20
Dec 20 2018
Dec 20

The "Master Drupal in 7 hours" tutorial was released on 2010 for Drupal 6 and it has alot of positive feedbacks. We have revised this Drupal tutorial for Drupal 7 and incorporate it as an ebook: "Master Drupal in 7 hours - the Drupal 7 version".

We have a lot of Drupal books for users and developers, from beginners to experts. What this book makes the difference is that

It is written for Drupal beginners and written BY a Drupal beginner

Being a beginner, I know what all beginners fear. Just like I first learnt ball room dancing, it took me almost 2 months to move like a robot, to struggle with music rythm and sway at the same time. I had to overcome the temptation of quitting several times before I could actually progress and enjoy the dances. Some of my friends, unfortunately, took the quick path to just give it up. 

How to use Drupal - Master Drupal in 7 hours ebook coverI told my technical team: “Guys, I am dead with this stuff. Can you just make it easier for me? Can I do it in less than a day?”

I am not a developer, I can not write a single piece of PHP code. I just know some basic hosting and HTML knowledge. And I asked my team to get me to build a completed Drupal site in a day. Sounds a mission impossible?

But we were very interested in this idea. We set a target, within 7 hours a newbie should be able to master Drupal.

Instead of writing a 300 page handbook so it looks thick enough, we want to give you this 90 page cookbook. First, it will look so much more encouraging when you start to read. Second, we want you to follow steps by steps and finish with an actual product that you can be proud of.

What they say?

Again thanks a lot, this the first day on Drupal when I do not bounce my head against the table desk screaming nooooooooo.

- 2046

What this book for?

Maybe you are a business owner who wants to quickly build a Drupal site for your business. Maybe you are a Drupal novice struggling with learning Drupal. Using this book, you will be able to:

  • Reduce time to get familiar with Drupal
  • Ease your pains, it is a short and easy-reading book
  • Launch your site to public much faster

Let's Download this eBook for Free

Oct 05 2018
Oct 05

Drupal is an open-source platform that more than a million of people across the globe find useful for their content management purposes. They choose Drupal because of its flexibility, reliability, and security. However, not all of them know how to use it properly. Find out about the mistakes that Drupal beginners often make.
Let’s dive deeper and analyze the examples of developer’s activity that could make Drupal ineffective and see what to do to get better results right away!

Bad content structure

Without the proper plan in place, your content structure can end up with a messy, incoherent experience for the site visitors. Determining a good structure from the very start increase your website performance. 

Try to minimize the number of content types, fields and tables. Too many content types can confuse content creators so you need to standardize them. For instance, you don’t need both “news” and “article” types, as these are almost the same - leave one of them. Moreover, creating new fields for every content type is a waste of resources that also comes with worse performance. Avoid making similar fields, as it brings unnecessary complexity to your site. 

This is why it’s good to design the system before you start to implement the elements. Take time to think about the structure and decide how the Drupal architecture should look like to improve website’s performance. Make it as simple as possible and use only the unnecessary elements. 

New Drupal developers also have problems with the folder structure. To be more precise, it’s about setting up wrong folder structure and putting themes and modules in the folder on a root level rather than in separate folders. This is one of the serious mistakes, as it affects the process of upgrading to the latest version and make debugging a way more difficult. You will lose a lot of time trying to fix it, so focus on creating a proper folder structure in the beginning. 

Using unnecessary Drupal modules across the site

Inexperienced developers can be amazed by a plethora of modules available which leads to installing too many of them. Even if Drupal developers don’t make a use of all of the modules at the beginning, they think that they will need it later. If you’re one of these developers… stop doing this! 
You need to realize that the more elements you have, the slower is your website, not to mention the mess you have in the code. With that being said, review all the modules you have again and get rid of ones you don’t need. Also, too many modules can decrease website security, so think about that. 

Not removing previous versions of the modules

Speaking of modules, Drupal developers often forget to remove older versions of downloaded modules. Some of them simply don’t know that even if the module is placed into a different directory, Drupal may decide to use the older version. It’s because the folders are usually on the same level. 
Sometimes, the software can switch between various module versions so, as you can guess, it can cause some problems. And we all know you don’t need such unwanted surprises.

Choosing unsupported modules in Drupal

A large number of different modules can be a challenge for a Drupal beginner, especially when there are ones that cover all the functionalities you look for. Unsupported modules can cause some problems in the long run, for instance, because of the compatibility issues or bugs that will never be fixed. 
Before downloading a new module, check when the last update was made and read the description provided by the author. Note that some projects are marked unsupported for security reasons so think twice before you decide to use one of these, as you risk data breach.

Ignoring code standards

When several people are working on the same website, it’s important to have code standards in place. Without them, you risk wasting the time trying to understand other developer’s code. Don’t make the mistake and start by creating the guideline to improve the quality of the source code and the efficiency of the team. 

Applying Drupal code standards is a good practice, even if you are a single developer working on your own project. Think about the situation when you want to expand the project that requires another developer’s involvement. With documented standards, it will be much easier to start, so… draw conclusions. 

Never make Drupal beginners mistakes again

It’s not surprising that newbies make mistakes, they simply need time to learn about all the opportunities the system gives them. Drupal is a complex tool, so there’s a huge chance to create something that doesn’t work the way we wanted, especially when we don’t have proper knowledge and experience. 

The good news is that you can always ask questions - the Drupal community exceeded a million of users that are willing to help. Someday, you can also be handy by sharing your experience. 

Oct 05 2018
Oct 05
*/ '; var input_id = '#mc_embed_signup'; var f = $(input_id); if (ftypes[index]=='address'){ input_id = '#mce-'+fnames[index]+'-addr1'; f = $(input_id).parent().parent().get(0); } else if (ftypes[index]=='date'){ input_id = '#mce-'+fnames[index]+'-month'; f = $(input_id).parent().parent().get(0); } else { input_id = '#mce-'+fnames[index]; f = $().parent(input_id).get(0); } if (f){ $(f).append(html); $(input_id).focus(); } else { $('#mce-'+resp.result+'-response').show(); $('#mce-'+resp.result+'-response').html(msg); } } } catch(e){ $('#mce-'+resp.result+'-response').show(); $('#mce-'+resp.result+'-response').html(msg); } } }

Online store on Drupal 8 - Drupal Commerce

Sep 26 2018
Sep 26
Sep 26 2018
Sep 26

This project is a joint work between Symphony Themes and Octopus Video a Drupal social video management platform.

Octopus is the web’s premier 100% open source video hosting and delivering platform. Based on the Drupal platform, Octopus offers services to video contents, providing support for video uploads, enabling you to convert to web-compatible formats for playback in Flash or HTML5, and it’s even compatible for playback on mobile devices like the iPhone, iPad, Android and other mobile setups, or share through social media sites like Twitter and Facebook.

Octopus provides the most thorough feature set of any video hosting and delivering platform. With such a feature-rich platform, any developer can easily manage everything from Video Podcasts to video blogging and much, much more.

Octopus runs on the Drupal platform with video module, developed by Heshan. It is hosted in Drupal.org at http://drupal.org/project/video, also maintained on Github at https://github.com/heidisoft/Octopus

A few months ago, we have worked with Octopus Video to produce the first theme for its distro. The work was much easier than implementing our own themes because Heshan had done all the hard work. When all technical stuffs are fulfilled, our job is just to create the theme. This is how it looks like:

Theme demo

We would like to have feedbacks on it. Hopefully we can create new sets of video themes soon.

Sep 21 2018
Sep 21

What to do with an old, outdated website that you would like to keep online? The perfect solution is to archive it to pure HTML code. We will demonstrate it on the example of a drupalcamp.pl website created in Droopler, based on Drupal 8.

Why archive pages at all?

Sometimes websites have their expiration date. It may result from the life cycle of the technology used to build it or simply because the website was created for an event or some special occasion. When you organise a music festival, for example, the website is no longer up to date and necessary after it ends. When you have long forgotten websites on your server, their code may be so outdated that it will turn into a threat in the future. If, for some reason, you want to keep your websites on the Internet, you have to take into account the cost of their constant maintenance and updating.

What are the costs of an unused website?

The cost of maintenance depends to a large extent on the technology used. Let's focus on Drupal 8 since it is one of the safest CMS available on the market. Updates to D8 are published monthly, and every six months a version containing new functionalities is published. This means you need to install a fresh release of Drupal 12 times a year and test our website to see if it's still working, so you can stay on top of updates. We know from experience that this can be very time-consuming.

On the other hand, if you decide against upgrading, your website is now at risk of being attacked and poses a threat to other websites on your server. Shortcomings in the security department may lead to much higher costs than updating your code on an ongoing basis.

The question arises – how to avoid maintenance costs and keep the website online? A great compromise between sentiment and cost-effectiveness is the conversion to pure HTML code.

What are the advantages and disadvantages of pure HTML?

Deploying websites written in pure HTML is in a sense a return to the roots. In the age of advanced CMSs, hardly anyone remembers that a website can be created without the use of server-side interpreted languages, such as PHP.

Why writing pages using HTML only was forgotten?

  • Due to difficulties in updating their content.
  • Because it is not possible to reuse the code for global elements (such as header, main menu, footer).
  • Due to the static nature of HTML, which makes it difficult to create administrative pages.

So why convert an unused Drupal 8 website to pure HTML?

  • This will result in a rapid increase in the speed of operation of all subpages, including those which have been the slowest so far.
  • It will be very difficult to attack the website if you configure the server properly.
  • Updating the code will become completely unnecessary, the cost of maintenance will be practically zero.

What will be the limitations of a website converted to HTML?

  • Changes to the content will become more time-consuming. The developer will include them in a local copy and then generate the HTML version for publication on the server.
  • Dynamic elements such as forms will stop working.

How to adapt a website for archiving?

Not every website is suitable for archiving right away. First of all, you should make sure that none of the subpages contains any elements requiring PHP scripts to work:

  • Contact forms (they can be replaced with embedded Google Forms).
  • Search engines (they can be replaced with Google search on the website).
  • Views Exposed Filters.
  • AJAX in views.

It is also necessary to disable error messages sent by the server – especially when copying a website from localhost. During archiving you should use settings as similar to production as possible, including CSS/JS aggregation and lack of additional diagnostic information generated by Twig.

At the beginning of the article, we promised to describe the conversion to HTML, based on a real example. Therefore, we are going to present the method of archiving the drupalcamp.pl website, dedicated to the DrupalCamp 2018 conference organised by us. This is a cyclical event, but each subsequent year we prepare a completely new website. Once DrupalCamp has taken place, we leave this page up as a souvenir, archived to HTML at a separate address.

The website of DrupalCamp conference in Wrocław.

What preparations did drupalcamp.pl require? First of all, we removed the subpages with the forms, which were no longer needed, since the conference has already ended. We made sure that all views worked without AJAX on the programme subpages. We also carried out a quick JS audit to eliminate potential code issues when PHP is disabled.

The archiving process

We use the httrack software, which is available under the GNU GPL3 license, in order to automatically archive pages. It is available for Windows, Linux, OSX and Android. We use httrack via a Linux console. There are plenty of switches and options available in the documentation, here is our command to make a 1:1 copy of a website, while maintaining the link structure:

httrack http://example.com -O output_dir --disable-security-limits --max-rate=99999999999 -K3 -X -%P -wqQ%v --robots=0 -N "%h%p/%n.%t"
  • --disable-security-limits - disables the built-in transfer limits, this is useful when our local server is the source.
  • --max-rate - sets the maximum transmission speed.
  • -%P - tries to recognise all possible links to files on the website.
  • -K3 - does not change the links on the pages.
  • -N "%h%p/%n.%t" - does not change file names.
  • -X - on the next command, deletes files from the archived version that were deleted in the original.
  • -wqQ%v - standard mode, silent, with a list of processed files on the screen.

The resulting page image is not yet completely finished. The subpages are in files such as about-us.html, instead of about-us/index.html. A simple script will fix this problem:

#!/bin/bash
for f in $(find output_dir/example.com -name "*.html" -type f); do 
        if [[ $f = *"/index.html" ]]; then
                echo "Omitting $f"              
        else
                echo "Processing $f"
                mkdir "${f%.html}"
                mv $f "${f%.html}/index.html"
        fi
done

The copy created in this way will be indistinguishable from the original to the observer. This is important for the preservation of existing positions in Internet search engines.

Httrack’s compatibility with Drupal

Drupal 8 is not fully compatible with httrack. The main problem is the responsive images presented via the <picture> tag. Proper conversion to HTML requires providing httrack with hints for additional downloads.

The drupalcamp.pl website that we archived is based on Droopler, an in-house, free of charge distribution of Drupal 8. In version 1.3 of Droopler, we have implemented full support for httrack, which helps with identifying and downloading all graphics files used on the website.

How did we “improve” the compatibility with httrack? We used a very simple solution in the form of hooks preparing a list of files to download. Hints for the bot are placed in the <head> section of the page, as subsequent <link> elements:

<link href="https://www.droptica.com/sites/default/files/styles/responsive_image_2000/public/blog/node_52/35080887_779262195604057_3638740630118596608_o.jpg?itok=YkFsAytN" rel="droopler:c0527d:img0" />
<link href="https://www.droptica.com/sites/default/files/styles/responsive_image_1200/public/blog/node_52/35080887_779262195604057_3638740630118596608_o.jpg?itok=OEsKzsbg" rel="droopler:c0527d:img1" />

These elements are recognised by httrack and downloaded to the copy. Thanks to this, we can maintain full responsiveness of the images. The excess code is usually deleted from the console by means of a regular expression.

Conversion results

The result of conversion to HTML is very satisfactory in our case. We’ve got a folder with files of a total size of about 20 MB. As one would expect, the access time to an HTML file is a few milliseconds, meaning that it is negligible. It remains very low even under heavy loads. So far, this value on the production server has oscillated around 200ms (of course for users who weren’t logged in, with active cache). Under the load, it increased to about 700ms.

We checked the correctness of export using Screaming Frog SEO Spider software. It did not detect 404 errors, which means that the archiving was 100% successful. Also, the browser consoles do not show any JS errors.

It can be expected that in the next few days the DrupalCamp 2018 website will be finally retired and replaced by pure HTML version. In this way, we will avoid the need to update it and, therefore, we won’t incur additional costs. If there is a need to make changes to the content, we will make them on a local version, based on Drupal, and then automatically generate a new HTML page. We encourage you to take advantage of our experience!

Sep 21 2018
Sep 21

Although I am fairly confortable with using the plain editor to write HTML code, most of my customers aren't. They do not have technical background and feel difficulty just to look at a buch of opening and closing tags. WYSIWYG comes in handy here to provide an easy to use solution for non tech guys.

In my experiences, there are two things that most of my customers concern: "an editor with enough menu buttons" and "a tool to upload image". So when I see a Drupal 7 sites without them, the first thing in my mind is to get them installed.

On Drupal 6, my choice for the WYSIWYG editor is FCKEditor. CKEditor is the successor of FCK with better visual and functionality and it works well with Drupal 7. IMCE is a great tool for users to upload files. In the following sections, I will describe how to install and tune CKEditor and IMCE. 

Installing CKEditor

CKEditor is not a separate module in Drupal 7. You have to install the WYSIWYG module and then install CKEditor as its library.

  1. Download WYSIWYG at http://drupal.org/project/wysiwyg
  2. Please install the WYSIWYG module as usual (put the module under /sites/all/modules and enable it via Admin -> Modules interface).
  3. Download CKEditor at http://ckeditor.com/download (go to CKEditor for Drupal section)
  4. Then create a folder called "libraries" at /sites/all and copy the ckeditor folder there.

Configure and tuning CKEditor

Go to Admin -> Configure -> WYSIWYG. The module should automatically detect the presence of CKEditor.

Drupal WYSIWYG - edit CKEditor

Customers generally donot like too many options. If you enable all buttons, they will feel confusing. They are also not document editor experts, so having many buttons there just makes them click and mess up. The webpage would load more slowly every they edit a node as well. 

Therefore, you may need to enable neccessary buttons only on the Buttons and Plugins section. In my list, they are (but not restricted to):

Bold, Italic, Strike-through, Align left, Align center, Align right, Justify, Bullet list, Number list, Link, Unlink, Anchor, Image, Blockquote, Source code (must have for HTML lovers), Paste from Words (good for editors who prepare content from MS Word), HTML block format.

Drupal WYSIWYG - buttons

One tuning not for customer but for for web editor, you should enable "Apply source formatting". Otherwise, the HTML source code will turn into a string, it is hard to read for those who would like to edit HTML.

This is how the CKEditor looks like when you edit a node.

Drupal WYSIWYG - CKEditor

Note: if you don't see the editor, please go to Configuration -> Performance and turn on "Aggregate Javascript files" under Bandwidth Optimization section. This is a known problem which was described at d.o: http://drupal.org/node/1017612

Installing IMCE

IMCE is a file/image uploader for Drupal which your customer would need to upload images to articles for example. So you will have to install IMCE and integrate to CKEditor

  1. First you have to install IMCE itself from http://drupal.org/project/imce
  2. And install the IMCE WYSIWYG Bridge module at http://drupal.org/project/imce_wysiwyg
  3. Please go back to WYSIWYG profile configuration page, edit the CKEditor, and tick the IMCE option at the Button and Plugins section.

When you edit a node, please click on the Image icon on the CKEditor bar, a window will popup. You can click on the Browse server button to add images or upload new images to the node.

Drupal WYSIWYG - CKEditor and IMCE

Done! Now your customers can feel more comfortable writing content for the websites.

Drupal WYSIWYG - IMCE popup                 Drupal WYSIWYG - IMCE browse server
Sep 19 2018
Sep 19

At Droptica we have always wanted to solve the problem of time-consuming creation of Drupal 8-based small pages from scratch. Finally, we have been able to achieve satisfactory results with Droopler. Version 1.3 is even better.

Why did we make Droopler?

We regularly make small pages for our needs (for example for marketing campaigns or events like DrupalCamp Poland) as well as for our clients.

Making a small website from scratch is time-consuming with Drupal 8, especially if you compare it to Drupal 7 or WordPress. It takes a lot of time to create a nice template that will work well on mobile devices, be easy to expand and comfortable to change.

We considered other technologies for small websites, but then we would have to learn all the processes connected with the new technology. And these would all be processes that we already have in place for Drupal 8 – automated testing, automated deployment to the production server, automated security updates and so on. For these reasons, we have decided to adapt Drupal to our needs.

Maximum flexibility

Our goal was to build a system that would allow you to easily add new subpages. Subpages are supposed to look good on your computer, phone and tablet without the need for using CSS. At the same time, the editor needs to be able to create a wide variety of subpages, and not only those containing the title and text.

We have used Paragraphs and prepared ready-made section types (paragraphs), which can be used to create subpages. Each subpage comprises one or more sections. Sections can be arranged in any order and multiple sections can be inserted on one subpage. Immediately after entering the content and graphics, the sections look very pretty. The editor doesn't need to do anything more – nor do they need any developer support when adding new subpages.

Droopler – it really hits the mark!

The editors are amazed! We have already deployed several dozen pages based on Droopler. Every time, the people who enter the content mention the following advantages of Droopler:

  • each subpage looks very nice,
  • high flexibility, there is no limit to subpages or sections within a subpage,
  • no programming work required to make the website look very good,
  • no worries about the correctness of the HTML code – no need to worry whether, for example, an inserted element will display correctly on the subpage,
  • SEO optimisation, often websites that were switched to Droopler from other systems had better positions in Google search results.

Droopler is a flexible system for creating pretty-looking content and at the same time a platform for virtually unlimited development because it is based on Drupal 8.

Drupal 8 also ensures high security. The Drupal Security Team continuously monitors the system code and releases new versions immediately if any bugs are found.

What's new in Droopler 1.3?

Currently, the latest version of Droopler is 1.3. In this version, we have 13 paragraphs for the types of content used to add subpages – 13 different sections available, which you can use to build any number of subpages.

One of the new paragraphs is side embed. This paragraph allows you to embed external content such as a Google map or a YouTube video in a pretty-looking section. It is perfectly suited for use on the contact page. Video embedding can be used on the page listing clips from recent events in the company, among many other examples. This is just one paragraph – but it gives a lot of possibilities.

Droopler sidebar with embedded content in form of google map

Another new addition to the system is a paragraph for creating a photo gallery. You can now easily build multiple galleries within a single page.

Droopler paragraph with gallery

Version 1.3 offers 6 new paragraphs. You can see them all at https://demo.droopler.com

Droopler is also a blog because these days, everyone needs a blog on the company's website

Most traffic to the websites on the Internet is driven by Google search results. And what matters to Google is basically good content and a lot of it. That's why we've added a blog to Droopler.

Droopler blog is also made up of paragraphs. There is fewer of them, but they are enough to create beautifully looking content. Paragraphs make it easy to embed even full-screen photos into your content. Of course, everything looks nice and pretty on mobile devices as well.

A blog with flexible subpages is a set of very convenient tools for every marketing expert. Building different types of websites for different industries and sectors is simple and enjoyable. Examples of industry websites can be found in the demo: https://demo.droopler.com

Plans for future versions

We are going to continue to develop the system. We often use Droopler for our websites, and our customers use Droopler more and more often. It has already been downloaded more than 600 times from https://www.drupal.org/project/droopler!

We have a long list of changes that we want to implement in the system. One of the larger modules will be a module for product presentation. You will be able to add products with photos, descriptions, categories and tags to the system. There will also be a special page listing products with the option of filtering with the use of Faceted API and Search API. This module will be perfect for production companies and distributors. Together with the existing components, it will enable a very nice presentation of the company's offer on the Internet.

How to get started?

Droopler is free and based on Drupal 8. You can download Droopler from www.droopler.com. A full description of the installation can be found on our blog.
We encourage you to download it and see for yourselves. It's really worth it!

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