Sep 18 2018
Sep 18

We're excited to mark the first minor update for our Drupal 8 products since the initial D8 release! There are no new features in this update but we're incrementing the middle digit in our version numbers for Glazed Theme and Glazed Builder because of a change we made in how Bootstrap Panels are handled. This change may require manually re-saving of pages that use the panels Glazed Builder element. More info about that in the Changelog

Thanks to changes in how panels are handled we now support an option to select all the Bootstrap-native panel styles in our Glazed Builder panel element. Besides the panels update both the Glazed Theme and Glazed Builder releases contain various small fixes.

Managing Sooperthemes' Growth 

Besides crushing bugs we've been working on other areas of our products and services during the hot summer that we've had in the Netherlands. Since the release of our Drupal 8 products we've seen a growth in subscription sign-ups and also in sales questions and support tickets. To handle the extra workload we're now onboarding a full-time customer success manager as well as a full time content/marketing manager. Check out our brand new Sooperthemes instagram account for the behind-the-scenes. 

Sneak Peek: Glazed Builder User Profiles

This feature has been requested for so long I'm really excited that it's finally happening. We're working on adding an interface similar to the WYSIWYG Drupal module. This interface let's you create profiles that limit the elements, buttons, and settings a user sees in the Glazed Builder interface. Check out the sneak preview here:

Apr 26 2018
Apr 26

The Idea That Will Revolutionize Your Drupal 8 & 7 Experience

Today I'm proud to announce the release of all our products on Drupal 8! We reinvented the Drupal authoring and site building experience again for Drupal 8 with a Glazed Builder module that was built from the ground up to fit Drupal 8's archictecture and design principles. It has taken us a full year to upgrade all our products, including our page builder, Glazed framework theme, portfolio module, GridStack module, 15 demo themes and 15 installation profiles, and our Glazed Drupal distribution which will soon also have a D8 release on drupal.org.

Built From The Ground Up For Drupal 8

Glazed Builder is different from Wix, Squarespace, or any other drag and drop builder: it's made for Drupal and deeply integrated with Drupal APIs. Glazed Builder acts as a Drupal field formatter and you can have multiple instances per page, for your footer, main content, and blocks. It automatically understands Drupal's revisioning system, language systems, and permissions. This makes it the most advanced visual page builder in the world from a website architecture perspective.

Our framework theme Glazed was also rebuilt using twig templates and the new Drupal 8 theme system.

Build, Write, And Edit Visually 

The experience of writing in Glazed Builder is easy like nothing else. You just click anywhere in a piece of content and start typing. Without any menus or network latency, our frontend application is the fast and distraction-free solution that Drupal content editors and marketers deserve! And thanks to the tight integration with Drupal's media systems you can upload and re-use media in Glazed Builder. It even provides easy settings to resize your images and add SEO fields like alt text and title text.

SooperThemes Is Super Fast!

Need to edit an article or update the social links in your website's footer? Whatever the task it's just a single click away when using Glazed Builder. Because our page builder is a headless frontend application for Drupal it doesn't need to call the server for most tasks. Adding text, or marketing elements can happen instantly because there is no network delay. Even tasks that rely on Drupal like saving the page or loading a view happens very fast thanks to the expert programming by Drupal developers with at least 8 years of experience.

Drag, Drop, Clone, Style

Our software is easy and intuitive to use because we designed it based on established best practices in user experience design. We stand on the shoulders of decades of research in computer interaction design and translated core concepts like dragging, typing, cloning, to a tool that seamlessly integrates with your Drupal website. Since we released the first beta version of Glazed Builder 3 years ago we made hundreds of improvements and have gone through many design changes based on feedback from our customers.

Save Time With Templates

We have also made incredible progress in developing template features to improve workflow and productivity. You can save any element or collection of elements in the builder as a user template and it will instantly be accessible in every Glazed Builder instance on your website. We also creating page templates that you can use as a starting point on empty pages.

Access A Complete Selection Of Marketing Tools

For marketing staff Glazed Builder means liberation! No more need to hustle developers to code a landing page. Our builder provides anything from responsive layouts to countdown timers, sliders, and thousands of icons including the brand new Font Awesome 5 Pro set. Instead of posting a screenshot of marketing content here, I invite you to browse around sooperthemes.com and take a look at our product pages. Each page is built with Glazed Builder, even the blog post you're reading right now is build with Glazed Builder. We believe in eating our own dog food and as you might have guessed sooperthemes.com is themed with Glazed Theme as well.

Enough about us..

Apr 24 2018
Apr 24

A well designed menu is a menu that works great on all devices and gets your users where they need to go with minimal effort. We'll first get into the basics of creating and placing menu links in Drupal 8 and then cover the topic of dropdown menus. 

Managing Menu Links In Drupal 8

Menus are part of the structure of your Drupal website and you manage them by clicking Structure and then Menus. Here you find a listing of menus installed on your website. The most important item in the list is the Main Navigation. There may be other menus in your website, but there is one menu that is more important than all others because it links to your most important pages and is placed at the top of your page. 

At the far right in the Menus administration page click the "edit links" item in the Main Navigation row. This will take you to an overview of the links in your main menu. If you just installed the Drupal 8 default installation profile this menu will only contain the Home link. If you installed one of the Glazed Theme demos the main menu will contain a number of links already

Adding New Menu Links In Drupal 8

Once you are at the Main Navigation administration form (Structure > Menus > Main Navigation/edit menu) you see an overview of the links that are already in your main menu. Here you can add, edit, and delete links. You can also change the order of links by dragging the move icon at the left hand side of the table.

To add a new link click the "+ Add link" button at the top of the table. For the menu link title fill in the link text that you want to appear in your main menu. In the link field you can add an internal path, or an external URL. With the weight option in the end of the form you can tell Drupal to place new menu items to the front or the back of the menu. For example you can add a weight of 10 to you Contact link because you typically want that link to appear in the end of the menu.

The other optionsnot important now and they'll be covered in the next section when we talke about dropdown menus. 

Creating A Dropdown Menu

Dropdown menus are a popular solution when you want site visitors to be able to reach a large number of pages in a single click. One such situation is in the main demo website of our Glazed Theme and Glazed Builder products. We know people want to explore the elements and features that are offered to we organize close to a 100 menu items all in the main navigation.

There are generally 2 different paths to get a dropdown menu in your Drupal website: From your theme or from a module. If you use our Glazed Theme you have a dropdown menu system built into the theme. If you use a theme that doesn't support dropdown menus (like Drupal's default theme) and you don't want to code it yourself, you can rely on a module like SuperFish.

Dropdown Menus Included In Glazed Theme

The menu system in Glazed theme is one of the biggest selling points of the theme because it's a beautiful, user-friendly menu that works perfectly with Drupal's native menu administration. With the flick of a switch you can have a horizontal menu or a vertical menu. It supports multi-level menus by automatically creating a megamenu for large devices and collapsing into a beautiful vertical menu on small devices. The menu's design is customizable in the Glazed Theme Settings system.

To create a dropdown menu on your Glazed Theme website, or when using any theme that has support for dropdown menus built in we're only have to edit our Main Navigation menu links to have parent and child links. By parent links we mean the menu links that are in show navigation bar and the child links are the links that are contained in a dropdown box that appears only when we hover a parent link. One little quirck in Drupal is that you have to remember to enable the Expanded checkbox on every parent link for your dropdowns to work. Check out the video above to see how we build the menu structure.

Dropdown Menus With The SuperFish Drupal 8 Module

If your theme doesn't support dropdown menus natively you can add the SuperFish module to your Drupal website. You might also use this module if it has some features or design elements that you prefer over the system built into your theme. 

The SuperFish module also relies on the menus created in Drupal's native menu administration pages, and you'll also be creating a menu structure with parent and child links. Check out the video above to see how the structure is made.

Once you have the menu structure set up you can download the SuperFish module and follow the instructions on their project page to install it. Next you will go to the blocks administration page to remove the Main Navigation block to then replace it with the SuperFish Main Navigation block. This is a new block the is generated by the SuperFish module. Once you place this block you can view your homepage and the dropdown menu should be working. As was the case in our demo that we did in our video above you may have to do some theming to style the menu.

Apr 22 2018
Apr 22

Conclusion: Drupal 8 Is A Heavier System With More Extensive Caching That Can Make It Faster Than Drupal 7 In Real-Life Situations

At the start of its life Drupal 8.0 got a lot of criticism for being slow. Now in 2018, Drupal 8.5 has seen a significant number of performance improvements and while it's still slower than Drupal 7 at the core, it's faster in complex situations that are more relevant to real-life Drupal websites.

Drupal 8 is faster where it matters, and more scalable! It's also important to add that both test installations did not have any special settings enabling caching of content, views, blocks, etc. Drupal 8 has a much more advanced and more granular caching system that lets you finetune and optimize your experience for logged in users on a grander scale than was every possible with Drupal 7. Notably there is the BigPipe module that gives you lightning fast loadtimes for your primary content and it can then separately lazy-load less important content, like the footer, menus, and sidebar blocks.

For sure this test brings good news to SooperThemes customers, who will enjoy a faster experience our of the box with our Glazed demo installation profiles. As a side note: importing demo content is also twice as fast in our Drupal 8 installation profiles versus Drupal 7.

Apr 20 2018
Apr 20

This tutorial is for people who are new to Drupal 8. We'll be showing how to add content to Drupal 8 and how to change or add new content types. Content types are very flexible in Drupal 8 and that's what makes Drupal more powerful than WordPress and other systems for many use cases. 

Drupal 8's Content Overview Page

Just like all Drupal's previous versions this administration page is the central hub where all your content appears in one place. You get there by clicking the Content link in the toolbar. This takes you to an overview of all the pages in your Drupal website. From here you can edit and delete pages using the action links to the far right side of the table. Additionally you can operate on multiple pages at a time using the controls below the Action label.

The content administration page is not just for pages, using the primary tabs you can navigate to administration pages for files and comments. This can be extended by additional moduels that provide custom content entitities using Drupal 8's Entity API. For example on sooperthemes.com we also manage domain licenses and digital downloads on separate tabs, because these are custom entity types.

Adding Content In Drupal 8

Once you're at the content administration page it's easy to see how to add content. You start by clicking the blue button that reads "+ Add content". You'll now see a listing of content types that are available at your Drupal installation and you have to tell Drupal which type of content you would like to create. After choosing a content type you'll be taken to the content form where you get to fill in all the form fields that make up your content type. You'll learn more about these fields in the next section where we discuss adding fields to content types and adding new content types.

Adding Content Types In Drupal 8

The ability to create new content types and choose from a large selection of different field types is what makes Drupal the system of choice for many organisations that manage a lot of content. Companies of all sizes including Tesla, Disney, United Nations, and Qualcomm use Drupal because it's the best solution for managing a large amount of content on the internet.

To manage content types in Drupal 8 click Structure in the toolbar and then click Content Types.  Now you're looking at a listing of content types installed on your website. If you just installed a new Drupal 8 website with the default profile you will see the Article and Basic Page items.  If you installed one of our theme demo profiles or the free Glazed CMS installation profile you'll have a bunch more options. Check out our YouTube video above for a quick tour. 

Once you're at content types overview click the "+Add content type" button to create a new page type. The minimum you can do here is give your content type a name, for example "Special Page, or Forum Topic". There's a number of other options for your consideration when creating a content type:

Creating A Jobs Content Type

Let's create an example content type for the new Careers section of our website. We'll need to post job vacancies, so let's call our new content type Jobs. To create a new content type go to Structure > Content Types and click the "+ Add content type".

Here we fill in the name of our content type and disable the options for author information and menu structure. After all we don't want all our job postings to clutter our menu system, you would use the views module to create an overview of available jobs.

Next click the "Save and manage fields" button. Now we're in the content type configuration page and this is where we add the fields that we need on our job vacancies. To see exactly how this works check out the video above!

Adding Visual Drag And Drop To Your Content Type

Finally we'll show you how to get even more control over the design of your content with Glazed Builder our visual drag and drop builder for Drupal 8 and 7. You can use Glazed Builder on any long-text field in Drupal on any type of entity. To enable Glazed Builder on your content type go to Structure > Content Type > Your Content Type > Manage Display. Here you can select one or more of your text fields (For example the body field) and switch the Format option from Default to Glazed Builder. Take a peak at the end of our youtube video to see the end result!

Apr 19 2018
Apr 19

I got word of concerns about the recent CKEditor 4 vulnerability that is responsible for a moderately critical vulnerability in Drupal 8. Rest assured that most Drupal 7 sites are not in danger. While both the Glazed Builder module and the Glazed installation profiles include their own copy of CKEditor 4, this vulnerability exists in an optional image plugin for CKEditor 4 "image2" that is not included in the default package of CKEditor 4 that our products carry. 

The only Drupal 7 websites that are affected by this vulnerability are sites that use a custom build of CKEditor that explicitly includes the image2 plugin.

Drupal 8 does include this additional plugin, which is why Drupal 8 users should update to 8.5.2 immediately. For Drupal 7 users the commotion has actually sparked some positive deveopment: the Drupal 7 WYSIWYG module has pushed a release that supports the latest CKEditor 4.9.2. This means I can update all SooperThemes products to CKEditor 4.9.2 and this brings us a number of bug fixes and improvements to inline editing. This update will be available tuesday.

The latest CKEditor reportedly also dropped it's reliance on the eval() function which means we can start using better Content Security Policy headers that include the unsafe-eval directive on Drupal 7 sites.

edit: I also noticed that the CKEDitor update fixes an annoying problem with cell selection. It's unfortunate that Drupal 8 core patched an older version of CKE rather than update to 4.9.2 because now the D8 core editor is still unable to select multiple cells in the same table column.

SooperThemes Drupal 8.x-1.0 Release Planned Tuesday

After 13 months of intensive development, testing, and preparation of our product infrastructure we're finally launching our Drupal 8 page builder module and themes tuesday! In the past few weeks I've been learning a ton by talking to customers about what they like and dislike about Sooperthemes and especially the drag and drop builder. If you have any feedback or ideas for future development of SooperThemes.com and our products just leave a comment here or use the contact form!

Update The Wording Of How Our Pricing Works: Pay Once To Use For Life. Optionally Renew Yearly For Support & Updates.

I've also updated the pricing information to reflect the fact that you can pay once to download all our products and use them forever. This is how SooperThemes subscriptions have always worked. This was apparently not clear from the information and marketing communication on the website. You pay once and only renew if you wish to receive continued support and product updates. This subscription based payment concept is really what has made SooperThemes a success over the past 3 years and the increased stability in revenue is what gave me the confidence to continue investing all my energy and money in developing the Glazed Builder module and our next generation themes for both Drupal 7 and 8. I also think it's fair to users of the product that they pay a small yearly contribution to continue getting support and product updates because the products are continuously in flux. Subscribers may stop the subscription at any time and continue using the products without support services.

Apr 18 2018
Apr 18

This tutorial is aimed at people who just need a contact form or some other kind of user input form. We'll cover deciding between the core contact module and the popular webform module. We won't cover using the Drupal API to program complex forms that integrate with external applications.

Drupal 8 Core Contact Module

Whereas the Drupal 7 core contact module was not very useful due to a total lack of flexibility, the Drupal 8 version is much nicer. It's nicer because you can add fields to it. You're no longer limited to just the name, email, subject and message fields that were baked into the Drupal 7 version. 

Not only does the new contact form allow for custom text fields, it even supports file uploads, entity references, date fields, and other Field API fields.This simple yet powerful form builder module is not limited to just contact forms; you can use it to create questionnaires, gather user feedback, etc.  

Better Together: Contact Module + Contact Storage Module

One major inconvenience of the Contact module is that is doesn't store any messages that are sent. Your only option is to send the message via email and afterwards there is no copy of the message in your Drupal site. The contact storage module will store your messages as entities. It lets you administer the messages and provides integration with the views module. Since the messages are stored as Drupal entities you also gain interoperability with other modules in the Drupal ecosystem. This will allow you to do even more, for example exporting messages as CSV, searching messages, and pushing messages to your CRM.

Webform Module

Drupal's popular webform module is a massive framework that offers a ton of extra options that the contact module doesn't have. You should choose the webform module if these extra features are useful to you and you're prepared to learn the ropes around a more complex user interface. The webform module can be intimidating at first because there are so many elements and settings... but once you're familiar with the interface you can configure and design very powerful forms fairly easily. 

To see what the webform module offers it's really better for me to show than tell. Check out the youtube video above where I show you the interface of the webform module.

Contact Module vs Webform Module

Personally I choose the webform module for anything that is more complicated than just the standard contact form with a subject and message field. The contact module is powerful and extendable, but the webform module gives you everything you need in one place. It's a purpose-built single-purpose application within Drupal and once you get familiar with it it's really very powerful. 

It also lets met build multi-column form layouts, a feature that I use often.

A feature-base comparison of Contact and Module based on features that I think are important:

Placing Drupal 8 Forms With Our Visual Page Builder

We believe interoperability with the Drupal ecosystem is important for Glazed Builder. This is why we don't include a proprietary form builder in Glazed Builder and instead encourage you to create forms with Drupal's webform module. Currently Glazed Builder let's you place blocks created with the webform module anywhere in your drag and drop page. The contact module doesn't provide blocks that we can drag and drop natively, but you can install the contact_block module to fix that.

Apr 17 2018
Apr 17

Block Administration And Placement In Drupal 8

Same as in Drupal 7, Drupal 8 blocks are placed in regions from the blocks administration page, which is located at Structure > Block layout. A notable improvement in Drupal 8 is that you can now place the same block in different regions. For example: previously it was impossible to put a block in the sidebar on the blog section of your website and at the top of the masthead in another section of your website.

When placing a block in Drupal 8 you're offered block visibility settings that are familiar to people who have experience with Drupal 7. You limit visibility based on content type, paths, and user roles. Third party modules can extend this in Drupal 8, in the video below you see that the Webform module lets you place blocks whenever specific webfoms are showing. 

Custom Content Blocks In Drupal 8

To those familiar with Drupal 7: Drupal 8 lets you make new blocks and enter custom text or HTML. Except it's better. In the old system custom blocks were neutered content, without support for revisions, permissions, or custom block types.

In Drupal 8 blocks are proper first class citizens and support revisioning and custom block types. Basically Drupal 8 does with blocks what we did with the BEAN module in our Drupal 7 theme installation profiles. That's one less contrib module you'll need in Drupal 8! In our Drupal themes' demo installation profiles we offer "Basic Blocks" and "Drag and drop blocks" The latter option will let you design blocks with our front-end visual page builder.

Placing Blocks With Our Visual Page Builder Glazed Builder 

Glazed Builder lets you place any Drupal block with our visual drag and drop module. The only blocks that will be missing from the blocks tab are views blocks. This is because we treat all views displays equally and put them under the Views tab. Here you will find every single views display, including Master displays. Moreover we allow you to override some useful views parameters, like pager settings, pager offset, exposed filters, and contextual filters. This is very powerful and you can use Glazed Builder to make news portal layouts, magazine layouts, and even personalized user dashboards.

Creating A Footer Block In Drupal 8

I made a little video showing the complete process of creating a footer block in Drupal 8, you probably already found it at the top of this page. We start by adding a simple Copyright notice block using Drupal's native CKEditor. Then we show how you can build a 3 column footer easily with our frontend visual page builder. With Glazed Builder you can add any Drupal blocks and views in the footer, as well as all the standard drag and drop elements, and the extendable suite of HTML snippets in the Glazed Builder sidebar. If you add a drag and drop block to any region in your theme, you can view, edit, and save the block on any page where the blocks shows. It's very convenient and easy to get used to. Glazed Builder handles multiple blocks per page, automatically saves new revisions, and is also language aware.
Apr 16 2018
Apr 16

Media management is one of the areas where Drupal was lagging compared to competing systems, like WordPress. In Drupal 8 Media management has improved greatly! With the Entity Browser you can create highly customized user experiences to manage your creative assets. In the early times of Drupal 8 it was difficult to set up the Entity Browser but in the meanwhile turn-key solutions have become available that do the tedious configuration work for you. 

Entity Browser Meet File Entity Browser

If you're using SooperThemes Drupal themes you have the option to use our demo content installation profiles. This is a real time-saver because the demo profiles do not only contain demo content; they come with a complete configuration of all the Drupal features you need. We chose to include the File Entity Browser in Glazed CMS for it's beautiful masonry grid and extended features. This module configures and extends the Entity Browser modules with media library views, mass upload with drag and drop support, and a useful image-preview feature that lets you check the quality your assets while browsing the library.

view on sooperthemes.com if you can't see the video

The preview tool even has an option to preview images in all your image styles, allowing you to decide the right compression/quality trade-off for your creatives!

Media Management In Glazed Builder 8.x

In Drupal 7 our Glazed Builder Drupal page builder module integrates with the Media module. The Media module integrates seamlessly with Glazed Builder, offering all creative assets in Glazed Builder that you have uploaded elsewhere in your Drupal site. Of course any images you upload in the Glazed Builder interface are also available in the media library elsewhere in your Drupal site. 

We achieved the same feat in Drupal 8. Getting there was not easy: the Media module in Drupal 7 offered an API to integrate media library in your frontend application but there is no such API in Entity Browser

Of course we don't let that stop us from building exactly what we want, and we achieved the same seamless integration with Entity Browser that we have with the Media module. 

SooperThemes Open Source Contributions For Entity Browser

In order to get the media management experience up to our standards we made some improvements to the experience and functionality. We contributed several patches to Entity Browser and File Entity Browser.

Supporting field cardinality in File Entity Browser and visual cues for media selection limits

Out of the box Entity Browser does not limit the number of files you can select based on field cardinality. On a single-image field you can select more than one image. Our patch doesn't just limit the number of files you can select based on the field settings but also adds a layer of visual cues that let the user know when he cannot select more images. The patch is unfortunately not committed at the time of writing this blog because there is uncertainty about whether this functionlity beling in Entity Browser core or in the File Entity Browser add-on module.

Check out this video to see how the patched version of File Entity Browser handles fields with unlimited, multi-value, and single-value cardinality:

Apr 02 2018
Apr 02

Our latest update for Drupal 8 and 7 fixes a bug with Chrome browser's latest release and the 3rd level "dropdown" menus in mobile navigation and side-header navigation. If your websites does not use 3rd level dropdown menus these updates are probably not important for you. We also use the opportunity to get our Drupal 8 products up to date with Drupal 8.5 and we made sure everything is tested to work with the recent highly critical security updates.

Drupal 8 RC3

Fixing an issue with Font Awesome 5 Pro icons and some other minor issues, our RC3 release is ready to quickly transition into a stable release. We're now focused on updating our product pages, documentation, and other sooperthemes.com infrastructure to make sure downloading, using, and updating our Drupal 8 projects will be a smooth experience. We expect to be ready for the official Drupal 8 launch of all our products in about 2 weeks, but this release candidate is a perfectly fine starting point if you're already looking to start a Drupal 8 project with Glazed Theme, Glazed Builder, or our SooperThemes Portfolio module.

Glazed 7.x-2.6.9 and Glazed Builder 7.x-1.1.8

We release patch updates for Drupal 7 Glazed Theme and Glazed Builder, making minor improvements to both products and of course we've done extensive testing to make sure everything works after the recent Drupal core security updates that touched some very "core" parts of Drupal. See the Glazed CHANGELOG and Glazed Builder CHANGELOG for an overview of changes. No changes related to the security update were made.

SooperThemes Updates Coming Soon

The Drupal 8 stable release has been a long time coming, and now the product is ready. We're just holding off the official launch until our website and documentation are also brought up to date to support Drupal 8. If you're interested in our progress just keep an eye on the website. Sooperthemes.com will be undergoing changes in both content and design. For a sneak preview check out our "work in progress" Glazed Builder product page, which now features tons more information than before. You'll also find that I'm experimenting with a video format that I'd like to use for both documentation and marketing communications.

When we are finally completely stable with all our Drupal 8 products we will develop new product features and Glazed Theme demo designs. All product updates will be available to both Drupal 7 and 8 product versions. The specifics of development we'll be focussing on will be determined in the near future by asking you guys what you want and need.

Open Source Contributions Scheduled After Stable Drupal 8 Release

I regret that while working so hard on our Drupal 8 product updates for premium products, our open source projects have been neglected. This was an inevitable result of our Drupal 8 work overrunning budget and timelines by huge margins. I'm looking forward to start investing again in the free version of Glazed Theme we host on drupal.org, and of course publish a stable Drupal 8 version of the free theme and Glazed CMS distribution on drupal.org. We'll make sure Drupal 8 gets the free theme it deserves, with more flexibility and customizability than any other free Drupal theme. 

Feb 21 2018
Feb 21

Drupal 8 SooperThemes: After nearly a year of work we're almost there!

It has taken us twice as long as we originally estimated. Drupal 8 itself has had its delays so maybe there is no surprise that updating our complex Drupal 7 theming and drag & drop platform with 15 unique theme designs and 1000+ demo content items is delayed. We now have a feature-complete stable version or Release Candidate for all our products ready for you to test! Besides that, we just moved to a new server that has all the infrastructure upgrades in place for our Drupal 8 launch.

Migrating 15 Demos With 1000+ Content Items

The past 6 weeks have been spent mostly on migrating all demo content and designs to the Drupal 8 framework. This work mostly consisted of copying, manually testing, and re-exporting pages, images, menu links, configuration etc. The glorious result of this painstaking work can be seen here: https://demo.sooperthemes.com/

Can I start using this on production?

Not just yet, we recommend to hold off for the stable release before taking this puppy to production! However, the RC1 will be easy to upgrade to the upcoming stable release so I suggest you can start building your Drupal 8 project using our theme or builder, report any issues on our support forum, and launch it when we launch our stable release.

Having spent the last year just coding away at the Drupal 8 product line I now have to quickly put on my documentation and marketing hat and start churning out content and documentation updates for the website. We will spend the coming 2-3 weeks to update our website and then immediately put out a stable release for all products.

What's Next?

Of course we won't get bored after completing this monumental update. To SooperThemes the D8 release is a major milestone that brings us to the next chapter in the life cycle of our business. After the Drupal 8 release we will start paying a lot more attention to documentation, customer support, and marketing. We're excited to now have a product that exceeds everyone's expectations both in capability and now compatibility. We're going to keep developing our products, and also work on making ourselves more known inside and outside the Drupal community. 

Get Testing!

If you're already on board with Sooperthemes.com you now have access to all Drupal 8 downloads in the Downloads page. If you want to help testing, or if you just want to get started with your Drupal 8 project head on over!

Open Source Contributions

Now that we have our core business covered with our Drupal 8 products, we're going to continue making live easier for the Drupal community at large with our awesome free theme and module contributions. We want to make the free version of our theme the best Drupal 8 and 7 theme on Drupal.org. Of course our premium theme will retain some features that will remain exclusive to our patrons but even if we slice the feature count in half we probably still have the most loaded, flexible theme on drupal.org. Since our free Glazed theme is also the default theme for our Glazed CMS Drupal distribution, we also intend on having the best looking distribution our on Drupal.org. Stay tuned for updates! 

Dec 16 2017
Dec 16

Drupal 8 Products Now Feature-Complete with New Media Library

A few months ago we released our first Alpha release on Drupal 8. Now we have full support for image re-usability thanks to the Entity Browser module and are ready to release our first beta! The beta hits feature-parity with the Drupal 7 products so you can start upgrading your websites if you're willing to be an early adopter. Download the beta here to test our Drupal themes and Drupal Drag and Drop builder:

The result of our work with Entity Browser is a slick interface to search and select images. It's really a step up from Drupal 7's Media Browser. Entity Browser is becoming the standard for media management in Drupal 8 and we've made some contributions and customizations to get the interface up to our design standards. Here's a little demo video:

Shooting For Early January Release Of All Drupal 8 Themes And Modules

It's going to be a hell of  a lot of work to get all 15 demos running on our Drupal 8 framework. The demos use different (probably some untested) features and additional contrib modules on top of what the main demo uses. This means there's not just the work of migrating and testing hundreds of content items but also different interactions between Glazed Builder and several modules. We're aiming for an early January release but can't make a hard guarantee. However, since the beta releases will be backwards compatible you can already start building our Drupal 8 projects if you're with being a beta tester and you don't need the demos that are yet to be ported. 

Refinements and Minor Bug Fixes: Patch Release On D7 Products

We've been cleaning out out some minor bugs for Glazed Theme and Glazed Builder, trying to get the bug counter to zero before we release on Drupal 8. You can check the release notes for a full report but here's the management summary:

Glazed theme:

  • Added support for Navbar module (backport from D8 navbar)
  • Fixed issue with page titles hidden between page title background image
  • Fixed issue with secondary header region expanding when sticky footer option is enabled
  • Fixed issue of body scrolling while swiping mobile menu backdrop
  • Updated all colors to reflect 2018 Glazed branding

Glazed Builder

  • Fixed layout bug for websites using non-bootstrap theme with Glazed Builder
  • Updated design of image selection widget
  • Fixed issue with color picker
  • Added category selection to icons widget
  • Made icon search much faster (dropped jQuery ui from widget)
  • Fixed bug with Carousel element prev/next pager in Bottom-Left position
  • Updated all colors to reflect 2018 Glazed branding

Something else was released this month that we're very excited about.. after many years of using Font Awesome 4 we now finally have Font Awesome 5 Pro! Because SooperThemes is a backer of this million dollar Kickstarter project we can now provide you with the Pro version of this enormous icon kit. Font Awesome 4 is not going anywhere, and will continue to exist along with Font Awesome 5 solid, light, and regular stroke icons.

On top of that we also added the 900-icon Google Material Design icon kit! We thought it would be a nice contrasting option compared to the more round lines of Font Awesome. Material Icons are more tightly drawn and perhaps more suited if you're going for a stark, hard-edged look.

We're super excited for everyone who's been waiting and emailing us about our Drupal 8 products, we're now confident you can start your Glazed project if your project's release is scheduled for january/february! If you're just curious you can spin up our Drupal 7 admin demo here: http://trysooperthemes.com/. To try our Drupal 8 beta release you'll have to sign up. Subscriptions start at just $78 USD and are guaranteed by our 20 day refund period.

Happy holidays! If you've got sales questions about our Drupal 8 products feel free to email us or drop a comment here. For feedback from testing the beta please use the feedback thread in our support forum.

Nov 22 2017
Nov 22

Our very first official Drupal 8 product release is our SooperThemes Drupal Portfolio Module! While working on a full release of all our themes and modules we saw an oppurtunity to re-invent our portfolio solution and wrote a new module from scratch, ensuring compatibility and ease of maintenance across Drupal 7 and Drupal 8 ecosystems. We're telling you that our new portfolio module is better, faster, sexier, and easier to use than any portfolio module you're used before, on Drupal or elsewhere.

Creating Professional Portfolio Views Has Never Been Easier

You only have mere seconds to impress people with your website. SooperThemes Portfolio offers 65 design settings and unlimited control over animation, color, and content to help you get it right the first time.

Leverage query building, ordering, and contextualization that made Views and Drupal big. Whether you're displaying nodes, files, or custom entities SooperThemes Portfolio will handle it.

65 Settings, 14 Caption Designs, Advanced Motion Design... And Still Easy To Use

As you've come to expect of SooperThemes' products customisability is something we pay attention to. Without being overbearing we provide settings that allow you to match your portfolio, showcase, or e-commerce grid to you site's branding and content. We implemented color pickers that support transparency, example caption designs, and individual motion design options for loading the image grid, filtering, and hovering items. 

Get the details on our portfolio module landing page:
Portfolio Drupal Module


Upgrading Your Drupal 7 Site From Glazed Portfolio/MD Portfolio

First of all, if Glazed Portfolio is working fine for you, you don't have to upgrade. While the new module provides more features and easier customisability this doesn't mean it's worth your time to configure new views with SooperThemes Portfolio  if you're going to end up with the same design that was already working fine for you.

However, if your portfolio views are up for a make-over, or if some of the little bugs and limitations in the old module are bothering you this is the time to upgrade! Since both modules are based on the same grid system the views settings will be familiar. 

Upgrading is very simple:

1. Install new module

2. Create new view or edit example view. Customize to your liking

3. Reference the new view in your menu links and drag and drop pages

4. Uninstall glazed portfolio/MD Portfolio

Where are Drupal 8 Glazed Builder and Glazed Theme at?

Releasing SooperThemes Portfolio is just one of the stepping stones on the way to a full Drupal 8 release for our flagship products. The only 2 remaining stepping stones are finalization of our Entity Browser/Media integration in Glazed Builder and the migration of our theme demos to the Drupal 8 ecosystem. The release itself will take some work in terms of updating our provisioning software and content/documentation on sooperthemes.com. Expect new updates in December!

Nov 16 2017
Nov 16

We're super excited for you to have 4 smoking hot new designs as well as some awesome improvements to our Drupal 7 products! Our updates are available for download immediately!

4 Hot New Theme Designs

With our Drupal 8 development nearing completion we're making sure all our designs are looking their best and are ready for prime-time. SooperThemes is all about empowering users with top notch design and we produced 4 smoking hot new demos for Photography, (Drupal) Agency, App, and Marketing Agency websites.

Gradient Design Tool For Stunning Section Backgrounds

Design stunning, layered backgrounds for your sections without photoshop! All the beautiful multi-colored sections in our new App demo were made with Glazed Builder. Our gradient tool supports color transparency which means you can create stunning gradients and then blend them with patterns or photography to create mesmerizing designs. If it's your job to create engaging landing pages your job is now easier with Glazed Builder. 

We Listened: New Button To Add Sections Anywhere In Your Page

When landing pages get very long dragging new sections from the top of the page can become tedious. You complained and we listened! A popular request was to make the main Glazed Builder controls float and follow along with you when scrolling down the page. However, this solution can cause conflicts with other controls, and can become confusing when using nested Glazed Container. Instead we designed a new solution that is both clear and effective:  

Save Precious Time With Single Click Inline Editing

Glazed Builder is all about getting things done fast and with ease. Previously inline editing required 1 click to initialize the editor and a second click to place the cursor where you want to start typing. From now on the first click is not needed any more and you can click and type directly, saving you precious milliseconds and providing a more intuitive editing experience! 

Using External Images in Glazed Builder

Thanks to the fully featured media library integration managing images in Glazed Builder was already a great experience. However, we have now exposed the image url on all image widgets in Glazed Builder so that you can directly reference external images, without needing to import them to your media library. 

Vertical Centering Option On Sections

Sections already had a full width option and a full height option. We added a vertical centering option. Vertical centering was already possible using padding but since full height sections with centered text are now a popular design pattern we decided to add this option that makes a good companion to the already existing settings for full width and 100% height.

CMS Portfolio Module Revamped And New Module To Be Announced Tomorrow

For the production of our Photography demo we launched many new capabilities in our portfolio modules. The Glazed CMS Portfolio module previous offered just 2 displaying images: stacked images and thumbnails that link to a lightbox. We needed this component to be more flexible so that we can customize image display for different use cases. The result is a fusion between field formatters, views, and our portfolio images field. You can now use views to format the image field in portfolio pages. Furthermore, you can select any field formatter and view on a per-node basis as well. Our photography demo has a complete dropdown menu showcasing different variations (It's the Gallery Pages dropdown).

On top of that, we have dropped the MD Portfolio module from our products and wrote a new module from scratch for both Drupal 7 and 8. This new module is called SooperThemes Portfolio and will be the topic of another blog post tomorrow! If you're looking to update your website and it uses our portfolio modules it's recommended to wait for tomorrow's blog post.

As always, see our changelogs in the documentation section for a more complete list of changes and feel welcome to give us feedback in the comments! For bug reports please use our support forum.

Aug 12 2017
Aug 12

Today we announce updates to our Drupal 7 Glazed Theme and Builder, an update alpha2 release for Drupal 8 (Testing only) and announce the Unsplash Media module.

Media Unsplash: Free Photos Without Leaving Your Website

This week we're adding a new module to our Glazed CMS Distribution that will be especially exciting to all designers, publishers, marketers, and lovers of photography. Rather than searching Google for free photos, you can browse the Unsplash collection of over 200.00 free photos right in your Drupal 7 Media popup. To the uninitiated: Unsplash is a carefully curated collection of professional photography that has been shaking up the stock photography market in the past few years. All photos are provided totally free with a do whatever you want license. This module provides a simple search interface right in your Media popup, see how simple it works in the video:

This module was built by Vallic based on our initiative/idea, collaboration and co-sponsoring. It was an especially smooth collaboration because Vallic has previously ported the media_pixabay module and allthough the Unsplash API was slightly more complicated, the scaffolding of that module could be re-used.

Integration with the Drupal 7 Media module means that the Unsplash library is also available when configuring theme settings, building pages with our Drupal Drag and Drop Builder, and in any other form that leverages the Media browser.

Drupal 8 Alpha2 Test Release

Just 10 days after our first test release for Drupal 8 we are bringing you alpha2! If you are a customer and curious (or excited) about Drupal 8 please join us in the alpha2 testing and feedback thread! The more testing we can do now, the faster we can release the beta and stable version when Drupal 8.4 comes out. Join in and test our latest and greatest today!

Changes in alpha2:

  • Demo Content Import now works if you select and import any language in the installer! The content will be naturalized to match your selected language. This means you can edit demo content and translate it as if it was initially created in your webite's primary language.
  • Fixed missing titles on views and blocks in Glazed Builder
  • Updated branding & Design
  • Minor performance improvements

Link (subscribers only): Drupal 8 Alpha2 Download & Feedback

Glazed Theme 7.x-2.6.5 Release

Today's updates for Glazed theme include a number of minor bug fixes as well as improvements to the admin interface for themers. Several performance improvements were also realized. We added minification to more of the custom Glazed javascript files, we updated some 3rd party libraries (animate.css), and dropped the modernizr dependency for our animated mobile menu. See Changelog for more details.

The branding and design of some elements are slightly changed to reflect the changes we are making for the Drupal 8 release. There's even a single SVG icon that made it into this release, it's from Font Awesome 5 (beta). Expect more where that came from!

Glazed Builder 7.x-1.1.4 Release

This minor release for Glazed Builder includes small bug fixes, some editor-experience enhancements. Modernizations in code and design that reflect the work we are doing for the Drupal 8 release are also included. See Changelog for details.

Important NoteS If You're Updating A Complete Installation Profile

We open sourced our GridStack Drupal module! Now our profiles includes sooperthemes_gridstack. This is a rebrand of the glazed_gridstack module that you might have in your website. If you're updating your installation profile you should check if you use any GridStack view on your site. If you do, you can choose to either disable the sooperthemes_gridstack module, or rebuild (or export/import) them using the SooperThemes GridStack module and then disable and uninstall the glazed_gridstack module. This goes both for customers using our premium theme and for people on the free Glazed CMS Distribution.

Join SooperThemes Or Upgrade To Unlimited today!

We're super excited about our Drupal products and we think you will be too! If you're on the fence about getting a subscription, or waiting for the Drupal 8 products, wait no longer! Join now and get 10% discount if you join our newsletter. Once you've tried Glazed Theme and our Glazed Drag And Drop Builder you''ll never build Drupal sites the old way again. Joining is risk free, no questions asked refund policy if you change your mind within 20 days after purchase.

Aug 02 2017
Aug 02

Have you been waiting for this update? Yes it's that time, I can finally show you the Drupal 8 products we've been working on! In the last 4 months we were 100% focused on upgrading all products to Drupal 8. I tagged today's updates as alpha releasea but the products have come a long way and are practically on par with their matured Drupal 7 counterparts.

Considering the size and scope of this enormous update, we are excited to get people involved in testing the products and to begin testing as soon as possible. To facilitate this I put a link and feedback thread in the support forum, it's only visible to registered users: Glazed Drupal 8 Alpha1 Download & Feedback thread.

For people who are not yet subscribers of our Drupal themes shop, now is the time to get in and get early access to our awesome Drupal 8 product line. Join here to start downloading Drupal 8 themes!

Sneak Preview

Drupal 8 Related Questions

Will Drupal 8 products cost existing subscribers more money? (No)

At SooperThemes all our subscriptions, including the entry level subscription give you access to all themes and modules. No exception. Drupal 8 products are immediately available to all subscribers regardless of subscription level or sign-up date.

When can we expect a stable release of all products?

We will integrate drupal 8.4 Media fields across all our products so that we don't miss out on critical media-reusability features. This means we are bound by the Drupal 8.4 release schedule with our Drupal 8 products and installation profile. Drupal 8.4 is supposed to have a beta release on September 14th, a release candidate on September 20th and a stable release on October 4th. We will try to provide backwards-compatible beta releases as soon as Drupal 8.4 has a beta release. Before then we recommend you only use our Drupal 8 products for testing, unless you are prepared to migrate or manually fix file fields on your content.

What can we test today?

The alpha release contains the full Main Demo with all features and demo content. It includes upgraded versions of Glazed Builder, Glazed Theme, SooperThemes GridStack and contrib modules. The Glazed Portfolio module built on top of the MD Portfolio module has been phased out. We built an all-new SooperThemes Portfolio module from the ground up. This module has surpassed feature parity with the Glazed Portfolio module and now provides even more features and design options.

Jun 13 2017
Jun 13

Drupal 8 adoption has been very slow, and many people have been putting it off. Some even gave up on Drupal because of D8's (perceived) complexity, focussing their career or hobby on easier CMS software. The past 3 months I've been fully engaged in embracing Drupal 8 and moving my premium Drupal themes along with the supporting ecosystem of modules, installation profiles, and infrastructure to Drupal 8! Going forward we will develop and maintain our products on both Drupal 7 and Drupal 8. 

It's been an interesting but also difficult journey and I'm writing to tell other Drupal professionals (and hobbyists) about my experience. I divided this long read into several chapters so you can skip to whichever topics you care about most. If this topic is important to you, please do comment and share your thoughts and experience!

Theming: Easier and Better But Completely New

Drupal 8 uses a new templating system for theming called Twig. While skeptical at first about having to learn a new language, I've grown to like Twig a lot... but to be very frank I would have been totally OK with keeping PHPTemplate in Drupal 8. It's what I've been using for 10 years and it's what I know. My Drupal 7 theme is full of preprocessing, custom features, and integrations with certain modules, and it's all coded in PHP. The transition to Twig means there is a huge amount of work for me to not just convert templates but also re-architect all the logic and features in the theme. I'll say that Twig works great and has a bright future but I'll also say that I can empathize with all the Drupal themers who are unhappy about having to learn a whole new way of working.

Theme Settings

If you develop base themes or premium themes like I do I have some good news as well: Theme Settings are largely implemented the same way. For me this means that many hundreds of lines of FAPI code for the 200+ theme settings in my flagship Glazed Theme can be copied and pasted into the Drupal 8 codebase and 80% of the form generating code just works. Of course the code that reads the theme settings still has to be ported from PHPTemplate, preprocessing and custom PHP to use Twig and Drupal 8's APIs. 

Logic Inside Twig Templates

The most confusing thing when starting out with Twig was that all logic for printing classes happens right inside the Twig template. For years I've been telling people to use preprocess functions for any logic, whether it be if/else or some code to retrieve a field value. In Twig any logic related to printing template code (that includes classes and other attributes) goes right into the twig template. I'm not yet entirely happy about have a lot of logic in my template files. Then again I can also imagine that to the unitiated the Drupal 7 architecture with classes being added in preprocess, or process functions that can be in multiple locations could be even more confusing.

To show you what I mean here is an excerpt of my html.html.twig template:

{%
  set html_classes = [
    theme.settings.sticky_footer and not theme.settings.boxed_layout ? 'html--glazed-sticky-footer',
  ]
%}
{%
  set body_classes = [
    'html',
    logged_in ? 'user-logged-in',
    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
    node_type ? 'page-node-type-' ~ node_type|clean_class,
    db_offline ? 'db-offline',
    theme.settings.navbar_position ? 'navbar-is-' ~ theme.settings.navbar_position,
    theme.has_glyphicons ? 'has-glyphicons',
    theme.settings.header_position ? 'body--glazed-header-side' : 'body--glazed-header-top',
    not theme.settings.header_position and not theme.settings.header_style == 'overlay' ? 'body--glazed-header-not-overlay',
    not theme.settings.header_position and not theme.settings.header_style == 'overlay' ? 'body--glazed-header-' ~ theme.settings.header_style,
    not theme.settings.header_position and not theme.settings.header_top_sticky and theme.settings.header_top_fixed ? 'body--glazed-header-fixed',
  ]
%}
<!DOCTYPE html>
<html {{ html_attributes.addClass(html_classes) }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
  </head>
  <body{{ attributes.addClass(body_classes) }}>{{>

Some templates, like my menu--main.html.twig template that is responsible for rendering dropdown menus contain more advanced logic, including a powerful Twig tool called a  macro. The ratio of markup to logic is so low in this template that it kind of seems to defeat the purpose of having a templating system. Then again, if I look at the equivalent of PHP code I've had to write in its D7 counterpart it's equally cumbersome.  

Despite my reservations about twig, looking back at the work I've done so far in porting my theme to Drupal 8 (it's about 75% done) I'm creating a more maintainable, better product. And that's what Drupal 8 is all about. There's some pain in migrating all your work but in return you get what I believe is a more solid and maintainable theme.

Site Building: Pretty much the same

For a CMS that was basically built differently from the ground up, the authoring and site building experience is surprisingly similar to Drupal 7. You're still going through the same steps and forms to create content types, taxonomies, views, nodes etc. This is because the idea of Drupal as a flexible and powerful CMS has remained the same. For Drupal 7 users who didn't do much coding before, not much will change when upgrading to Drupal 8. Without investing at all in learning new things you can hit the ground running and install a nice Drupal 8 theme or distribution and it's business as usual.

Module Development: Definitely harder

Building Drupal 8 modules is not rocket science. It's just that there is a lot to learn before you're fluent at it. New APIs, more complicated object oriented architecture, services and plugins. The learning curve is steeper and higher than ever. However, if you start small, read the docs, and copy code from the examples module it's doable. The learning process very much reminds me of my first experience building my very first Drupal (5.x) module.

This is why I decided that building our most complex Drupal 8 modules should be handled by experienced Drupal 8 experts and not me. While I started upgrading some tiny modules as well as our theme I contracted Ivan (Chi on d.o.) and Jay Friendly (Jaypan on d.o.) to build the SooperThemes Portfolio and Glazed Drag and Drop Builder modules... completely written from the ground up for Drupal 8's architecture. Without their help there's no way I would have upgraded these modules myself without first spending at least 2 months learning Object Oriented Programming and the inner workings of Drupal 8. If anyone is looking to consult about Drupal 8 upgrade work I can highly recommend both Ivan and Jay. Jay is currently writing a book on Drupal 8 development that is targeted at Drupal 7 veterans as well as completely new users.

Development has been in full swing for the past 2-3 months and it has been the most intense and sometimes stressful time in my years building SooperThemes products. All of our products are now almost finished but still being tested and refined. It has been a great learning experience but also a great lesson in technical debt and the reality of Drupal 8's complex architecture. For me personally with my background in theming, design, and marketing I feel intimidated by the complexity introduced by Drupal 8. Conversely I feel that my customers will have more easy to use, solid, reliable and performant website thanks to Drupal 8. Luckily for many of my customers the whole point of my products is that you can build and customize everything without coding, using our Drag and Drop tools and extensive theme settings. 

Plugins, Services, Controllers, and Schema Metadata

That is a list of some of the software architecture concepts I've had to get acquinted with in the short time of 2 months. I can't say that I've learned these concepts just yet. In Drupal 7 understanding the hook system and Forms API could really get you a long way building even very large Drupal websites. In Drupal 8 not so much.

Before I started feeling like I'm on a learning curve, I ran into a wall. Drupal 8 really demands you delve deeper into software architecture than before. It's hard but the beauty of the new system is that as you're learning Drupal you're also learning Symphony and proper Object Oriented Programming design patterns. Those who can make the neccesary investment of time and energy will come out of it with skills that are valuable beyond the Drupal ecosystem.

Installation Profiles: Similar But Better

Installation profiles are a critically important part of our business at SooperThemes. We don't just sell themes, we develop, support, and maintain all the Drupal code that brings our designs to life. For our customers this means they can download a turn-key installation profile that contains their selection of designs, features, and demo content.

For us this means we maintain a ton of configuration, demo content, and modules, and wrap it all into installation profiles. We even provide an interface to generate customized installation profiles and install them on your hosting fully automatically. My experience so far with Drupal 8 installation profiles has been great. 

Demo Content

A notable improvement is the great support for demo content in Drupal 8 with help of the Default Content module. In Drupal 7 the go-to module was UUID Features. Over the past years I've spent many hours fixing bugs, implementing file support, and patching up poor support for referenced entities and menu links in Drupal 7's UUID Features code. 

The Drupal 8 Default Content module is still in alpha and if you're doing a lot of default content work you still might need to hit the issue queue and download (or contribute) a little patch but this module already feels more stable than the UUID Features suite. D8 and Default Content also import content faster, allowing even the lowest of low-end hosting to install our bulkier demo installation profiles.

Configuration 

I've read that Features is still a thing in Drupal 8 but I've not yet found the need to try it out. Whereas previously we used Features to package all our CMS components into modules this is now done with Drupal core's configuration system. It's working well so far. Automatic exporting of configuration and dependencies into modules is done using drush, and we can now split optional and required configuration which is also great for components that include lots of views that add value but are not indispensable. I did experience some quirks with optional configuration not being installed during the profile's installation process even while dependencies were certainly met.  

Media: Work In Progress

It took many years for the Media module to have a stable (2.x) release in Drupal 7. Drupal 7 Media works great and  it handles drop-in file uploads, multi-file uploads and various media gallery browsing features excellently. In Drupal 8 great work is being done to bring Media features into core. I'm a big fan of the initiative but I'm also concerned about how to provide provide future proof media featurs in my installation profile right now. 

Drupal 8 Entity Browser

At the moment of writing this, the successor of the Media module is Entity Browser. The module File Entity Browser (it builds on top of Entity Browser module) will give you a media library popup browser similar to the D7 media module's browser. Installing this module requires 5 modules (dropzonejs, embed, entity_browser, entity_embed, and file_browser) and 3 external libraries: dropzone, imagesloaded, and masonry. Part of the Drupal 8 media initiative is to include features similar to what the File Browser module provides in core, but in a cleaner architecture with fewer dependencies.

A module similar to File Entity Browser is Media Entity Browser and the major difference is that it uses the more flexible Media entity as opposed to the file entity. What exactly this means and how all this will be upgraded to the new Drupal 8.4 core features, I'm not sure. Therefore I decided to launch my distribution and products without image re-usability on Drupal 8.3. To protect my customers against potentially needing complex upgrade processes I'll hold off on advanced Media management until Drupal 8.4 comes out. It's planned to come out late this summer and I'm looking forward to it. 

Improvements In Documentation

This is not really a Drupal 8 improvement as much as it is a Drupal.org improvement. The quality of documentation available to day is so much better than on the day Drupal 7 came out. The new documentation page design immediately gives more credibility to the content and the content is carefully curated and better written. Even though this is not really a feature of Drupal 8 it certainly is a great benefit to those starting to learn Drupal 8 today. 

I also want to give a shout out to Drupalize.me, who are giving away free subscriptions for their premium training videos to people who have contributed on Drupal.org. Terms and details.

My Prediction: Drupal 8.4 Will Bring Up The Numbers

I see Media features as the #1 core advantage of WordPress over Drupal. Other major weaknesses of Drupal are a leaner offering of themes and niche-specific tools like portfolio plugins, drag and drop building options, and other fancy add-ons. But those can be fixed by contrib projects and through premium themes. Media is a challenge that took too long to get right in Drupal 7. It was only several months ago the Drupal 7 Media module had it's first truly stable Drupal 7 release. Thanks to this development, we can now expect to see more niche-specific add-ons for the Media module as there is a stable API to build on top on. Next week I will blog about the release of such an add-on module that SooperThemes has co-sponsored and co-developed. 

If the Drupal 8 Media Initiative is executed according to plan Drupal 8.4 will bring features to that will appeal strongly to the masses of Drupal site builders who are unable or unwilling to create custom configurations for Entity Browser. Drupal 8's more rapid emergence of a stable Media API can awaken growth of Media contrib modules that make the lives of content creators and site builder easier.

SooperThemes Drupal 8: Upgrade Status

To those who are waiting: Please be patient as we're finishing up and fine-tuning. I meant to release a public beta of some products this week but I decided it's better to focus on finishing the components that are currently <90% done. I'll re-evaluate the possibility of public beta testing  next week, and the week thereafter.

SooperThemes Products Drupal  8 Upgrade Progress  %_of_total** Glazed Theme 75% Complete 25% Glazed Drag and Drop Builder 95% Complete 25% Sooperthemes Portfolio (replacement of D7 glazed_portfolio) 90% Complete (only missing hover effect designs) 15% SooperThemes GridStack 95% Complete  5% Glazed Helper 75% Complete (only missing Page Design tools) 7.5% Glazed Drupal CMS Distribution (drupal.org/project/cms) 95% Complete (finetuning, future-proofing) 10% Demo Content and Installation Profiles 0/15 Completed (pending completion of above) 5% Product infrastructure* 50% Complete 7.5%

* demo sites, trysooperthemes.com, automatic installation profile testing and provisioning, support forum, etc. The kind of stuff you don't think about before starting a big Drupal 8 upgrade project.

** Estimated proportion to the total amount of work of all items in the table

Mar 27 2017
Mar 27

Today I'm excited to announce a new Glazed Builder and Theme release... Imagine having a meeting with your client tomorrow. You've promised your client the ability to update landing pages without needing any help. The client imagines he'll just be changing images and simple text blocks. Then you show him the Glazed Builder Sidebar and it's filled with your custom designed icon boxes, testimonial block, and even custom branded sliders. All accessible and editable without needing even basic HTML skills.

Custom HTML Drag and Drop Elements in the Glazed Builder Sidebar! 

Adding elements to the sidebar is now extremely easy, you don't need to have a custom module or even any PHP code. You just drop a folder with your custom elements in your theme or subtheme folder and your custom elements will magically appear as editable drag and drop elements. You just to add a class or two to indicate editable portions of your HTML elements and that's it. Of course, you can find all the details and an example zip file in the sidebar elements documentation

Various Fixes

We made various improvements to the Glazed Builder and Theme user experience, details of which you can read in the Glazed Builder Changelog and Glazed Theme changelog. We're ironing out as many little issues as possible while working on the Drupal 8 theme releases!

Need any help with sidebar elements? Just create a ticket in the support forum and we'll try to help you out and simultaneously improve our product to match any expectations you have that we did not think of.

Mar 22 2017
Mar 22

Between the rush of product updates we're putting out lately, a moment of reflection...

Like many other Drupal shops and theme/product developers I've been taking it easy with major investment in D8. But times are changing. Now we are seeing a time where Google searches including Drupal 8 are more numerous than searches containing Drupal 7. This is by no means a guarantee that D8 is a clear winner but to me it is a sign of progress and it inspires enough confidence to push ahead with our Drupal 8 product upgrades. SooperThemes is on schedule to release our Drupal themes and modules on Drupal 8 soon and I'm sure it will be great for us and our customers.

2017 will be an interesting year for Drupal, a year in which Drupal 8 will really show whether it can be as popular as it's younger brother. The lines in the chart might be crossing but Drupal 8 has some way to go before it is as popular as 7. Understanding that Drupal 8 is more geared towards developers one might say it never will, but I think that it's important for the open web that Drupal will stay competitive in the low end market. Start-ups like Tesla and SpaceX have demonstrated how Drupal can grow along with your business all the way towards IPO and beyond.

Is your business ready for Drupal 8?

Personally I think I will need a month or 2 before I can say I'm totally comfortable with shifting focus of development to Drupal 8. Most of my existing customers are on Drupal 7 and my Drupal 7 expertise and products will not be irrelevant any time soon. One thing that is holding me back is uncertainty about media library features in Drupal 8, I hope the D8media team will be successful with their awesome work that puts this critical feature set in core.

If you are a Drupal developer, themer, or business owner, how do you feel about Drupal 8? Are you getting more business for Drupal 8 than Drupal 7? How is your experience with training yourself or your staff to work with Drupal 8 and it's more object oriented code? 

Let me know in the comments if you have anything to share about what Drupal 8 means to you!

Mar 01 2017
Mar 01

It's the details that make the difference between a good product and a great product. The past 6 weeks were spent on refining the design patterns that constitute the Glazed branding and products. The result is a product that feels tight and inspires confidence. Just 2 years young, Glazed Builder is the new kid on the block but the progress since 1.0 has never slowed down. With the seeminlgy everlasting lack of quality Drupal themes for Drupal 7 and especially 8 I think that with Glazed Theme and Glazed Builder we have the platform that is needed to really fuse Drupal's powerful backend with beautiful designs in a maintainable, responsible way. In the future we'll be working hard on realizing this ambition, and publishing new designs for different niches.

Glazed Builder is different from consumer tools like Wix and Squarespace because it doesn't put limitations on where you place elements. Our grid system is based on bootstrap and our tools allow you to use Bootstrap elements like you would if you were custom coding. You're coding without having to write or see the code. The consequence was that sometimes nested rows, tabs, accordeons etc. had so many controls that they could overlap. 

This problem is was not easily solved, that is probably why you find very few drag and drop builders without some restrictions to where you place your elements. With this week's release the problem is no longer a problem. We're introducing a new algorithm for controls positioning. Thanks to advancements in browser APIs it's now feasible to do hit detection efficiently. This means we create space for icons when necessary, but we leave the layout intact where we can. This doesn't just solve the overlapping controls problem but also creates a much closer WYSIWYG experience.  

Performance Improvements for Theme and Builder

With Mobile performance more important than ever it's our responsibility to be vigilant about performance and take action when we see opportunity for improvement. One such improvement is our menu system. Our unique mobile menu provides an unparalleled navigation experience, and uses a bit of JavaScript to manage this. This caused a menu flickering on long page because the menu initiation happened close to the bottom of the page. This code was moved to the beginning of the page to speed up the menu render.

Other improvements have been made by replacing jQuery with browser native APIs, partly using the new knowledge that was gained from creating our unique controls positioning algorithm. 

Material Design box shadows are now available in the style tab using a simple slider. The slider represents the "surface level" metaphor used in Material Design's documentation and it renders elegant and simple shadows that are taken directly from Google's recommendations about drop shadows in Material Design.. 

Ready for Drupal 8

We're currently developing the Drupal 8 version of the Glazed installation profile and we are starting to upgrade our theme and modules.​ We previsouly aimed to release our Drupal 8 beta alongside the Drupal 8.3 release, but now that the D8media initiative has postponed their work to be released in Drupal 8.4 we are relaxing this deadline.

We're taking our time to make the right decisions about our installation profile, our theme, our drag and drop builder, and all the thousands of lines of code that make up our themes and demo websites. Expect to see Drupal 8 beta products somewhere after the 8.3 release of Drupal core and before the 8.4 release.

For more details about this week's updates:

Jan 16 2017
Jan 16

2017 is going to be an incredible year for SooperThemes and for you! We kick off with the first official major version update for our drag and drop builder! Today we introduce you to Glazed Builder 1.1.0. We have rebranded Glazed Builder to Glazed Builder and developed some major new features, including entity revisions, full support for filtered contextual views and RGBA color sliders!

This is a monumental update. Glazed Builder is currently not only the greatest and fastest drag and drop builder for Drupal but also a very competitive product in the wider site building landscape. Going forward we'll not only develop more features and designs but we'll also start developing even more complete and complex turn-key Glazed demos. In addition this release marks the start of our Drupal 8 upgrade sprint. Yes, you heard that right, with the D8Media initiative aiming to add much needed Media improvements in Drupal 8.3 we feel like now is the right time. 

The Admin demo is free, no card required!

Redesigned for 2017

Glazed Builder has a fresh look that is designed for fast intuitive site-building. The speed of an interface isn't just about fast code, it's very much about fast design too. The new controls are all-white and while animation is used on the drop shadows the actual controls appear and respond immediately.

The colors and branding are matched to the Glazed brand, to emphasize the uniform experience you get when you combine our Glazed Theme with the builder. That said, Glazed Builder is still an independent module that can work with any Drupal theme! 

Views with Contextual Filters

Perfect if you're making a magazine website or more serious blog or commerce website! Now you can design taxonomy term or e-commerce pages with dynamic views displays. It is now fully supported to load views in drag and drop pages, override their filters and pagers in Glazed Builder, and let these views take default arguments based on url parts.

This feature is not just awesome for magazine websites but also for government websites, intranets, communities... Basically anyone who builds websites with large amounts of structured content will love this update.

Better Equal Heights Rows And Vertical Centering, RGBA Color

Having an alpha slider on every color setting in Glazed Builder allows more creative freedom for designers and makes it easier for site builders to implement designs that use translucent elements. We also improved equal heights rows by replacing the old jQuery trick with faster, reliable Flexbox CSS. In addition we enriched the column element with a Vertical Centering option. This let's you add vertical centering to columns independently of sibling columns. 

Saving Revisions

Some updates are invisible: Glazed Builder now automatically detects entity types that support revisions and will create new revisions when saving to fields on these entities. It doesn't matter if your field is on a node, bean block or custom entity. It doesn't even matter if you have have 10 Glazed Builder instances in one page, saving to multiple entities in the backend. It all just works and with revisions you'll easily undo those regrettable changes that seemed right in the spur of the moment.

Goole AMP

Google AMP is seeing more and more adoption and we integrated Glazed Builder with the Drupal AMP module. AMP is very restrictive so it won't allow fancy elements like circle charts and image comparison widgets but it should work fine with non-interactive markup generated by Glazed Builder. We welcome feedback from AMP experts on how to further extend AMP support!

Glazed Theme 2.6.0

While this releases focuses on the Glazed Builder update, Glazed Theme also received new features and consequently a major version bump to 2.6.0. Less spectaculary but still very useful: A Import/Export interface was added to the Glazed Theme Settings interface. All those settings that collectively make up your sites' unique design can now easily be copy-pasted between environments, or into a new subtheme .info file.

Drupal 8 Themes and Builder

As a subscription Drupal theme shop, we really focus on building long-term relationships with our customers and that's why we carefully chose important moments that affect the products we make and maintain. Choosing the right moment to make the D8 move was hard, because Drupal 7 is just so good that it was hard for Drupal 8 to take the crown. 

From my perspective, this moment is the release of Drupal 8.3 with contrib in great shape, improved media handling, and hopefully a media browser in core! The moment that it no longer makes sense for anyone to start a Drupal 7 website is approaching and we're going to make sure all our products are running smoothly on Drupal 8 by that time.

For more details about this update:

Nov 11 2016
Nov 11

First of all, sorry for the late blog. This blog refers to the drupal themes updates on November 1st. I'm currently travelling China and while I rushed to get the release out before my departure, the blog had to wait a little longer.

TL;DR

Glazed Logistics Design And Reaching Product-Market Fit

With the release of the Logistics design we addded a unique and beautiful theme to our collection while at the same time the core products only needed minor adjustments. This is an indication that the products have achieved a state of stability and product-market fit. SooperThemes now pivots to focus more on creating new designs and features based on the current core products. Of course this doesn't mean we don't add new features at all, there will always be a need for change in a turbulent environment like Drupal frontend development. 

Creating Great Design For The Drupal Community

In the past year we have laid the neccessary ground work that is needed to provide the Drupal community with much desired high quality designs. The site building workflow with Glazed theme and Glazed Builder is incredibly fast, efficient and produces precisely designed responsive Drupal websites. This doesn't just improve productivity of our customers and our customers' content creators but also our own productivity. At this point we completely design our Glazed demos using just the theme and drag and drop builder, no photoshop or coding. This big gain in productivity really allows us to focus more on art direction, photography and design. For our logistics demo we created a set of unique 3D isometric line icons, and we curated a collection of beautiful stock photography to really create the right atmosphere for our niche design. We can afford to produce such detailed niche designs thanks to the productivity gains we made with Glazed theme and Glazed Builder. Our goal of closing the gap with the top tier multi-purpose WordPress themes is now appearing on the horizon.  

Glazed Magazine Component and Drupal 8

This stability also means we will start planning our Drupal 8 upgrade and migration paths. The next couple of months we will focus on ramping up the design release cycle and on adding a new magazine component to our Glazed CMS distribution. We want to avoid spending months on Drupal 8 migration while the Drupal 7 product offering is only at an 80% market fit. We are aiming to offer more than just great theme settings and drag and drop functionality: expect a multitude of niche designs with fully features demo content in a turn-key installation profile. We strive to become Drupal's first "Mega Theme".

Value As A Service

As a subscription Drupal shop, we really focus on building long-term relationships with our customers and with the Drupal community at large. We make decisions based on what we think provides the most value to the most people. An important part of making those decisions in listening to the community. If you can spare a minute, please write a comment on the blog and describe what you would value the most in a Drupal theme. One feature I'm think about adding to the distribution is ready-made translation configuration as an optional component in the Glazed CMS distribution, let me know in the comments if that is something you would value.

Oct 18 2016
Oct 18

Years ago there was Drupalmodules.com. It had instant search, module reviews and an always up to date feed with the newest Drupal modules. It was wonderful. I was subscribed to their RSS feed with the latest modules because I felt like I was ahead of the curve for knowing all the latest contrib additions for Drupal, I learned about a lot of useful little (and big) modules that way.

Now Drupalmodules.com is no more, there is just a ghost of a website. Ironically one of it's latest news articles headlines "Where did we go for 5 days". That was almost 5 years ago. In the meanwhile the Drupal Reddit community has grown to 6000 subscribers. I frequently visit /r/Drupal, it's a great resource for industry news. It is however not a replacement for Drupalmodules.com.

Presenting /r/Drupal_modules and /r/Drupal_Themes

That's why I created /r/Drupal_modules and /r/Drupal_Themes. I was playing with the idea for a while already, and then on /r/Drupal I saw I was not the only one looking for a feed with new Drupal modules. I went ahead and developed a python script to scrape newly added modules and themes from drupal.org and post them to  /r/Drupal_modules and /r/Drupal_Themes. Oh and there is also /r/Drupal_Distributions, almost forgot about that. Interestingly, I now see that very recently there is more new projects in the Distributions feed then in the themes feed.

The idea is that these subreddits are used only to list Drupal projects. I set this up about a month ago to just see if the system works OK so far it looks good. Now I want to invite everyone to use the comments for module/theme reviews, use upvotes and downvotes to rate your favorite projects, and last but not least: submit links to new projects that are not on drupal.org. As we don't currently have a central respository of Drupal modules that are hosted on github and elsewhere, we can make it happen on reddit.

And a last note: I didn't scrape all existing projects on drupal.org. I think a lot of d.o. projects are not maintained anymore, possibly made obsolete by newer modules, and there are just too many to scrape without having to worry about performance and politeness. Feel free to submit any modules you think are useful to have in the subreddit listings. 

Oct 11 2016
Oct 11

Before jumping into the release details I wanted to repond to the recent Drupal Planet blog posts about the fact that Drupal 8 has so few themes. In my opinion the short answer is: Drupal 8 adoption is very slow.

The slightly longer answer is that Drupal also faces more competition in the lower end of the market, where themes are most often used. WordPress' growth has been great and is now stagnating, but online site builders like Wix, Weebly, and squarespace are growing and their products are maturing. Another factor that I think relates to Drupal 8's slow adoption especially in the lower end of the market is that Drupal 8 will rely more on distributions due to increased complexity of assembling a fully featured site. As someone who manage a Drupal distribution full time I can tell you it's not as easy as it should be.

Glazed 2.5.3 Release

Today we release what is just the start of a new class of Drupal themes. Over the past year our Glazed theme and Glazed Builder combo has stabilized and proven it's capabilities. With our latest Landscaping Theme Demo we are showing that our framework theme is capable of so much more than your average Multipurpose WordPress theme or Bootstrap template. With refined design options and microinteractions we are pushing our Glazed framework theme forward to make way for a future full of beautiful, effective Drupal theme designs. New header options were added, our main menu system got some improvements.. 

TL;DR

  • Added pull-down header design
  • Improved overlay menu style
  • Support for transparent and full-width menus
  • New minimalistic form theming
  • New design for portfolio pages
  • Image Compare 
  • Lightbox Gallery for portfolio pages
  • Next / Previous node pager
  • CHANGELOG Glazed Theme
  • CHANGELOG Glazed Builder

Glazed Landscaping Theme

As you can see on our roadmap SooperThemes is currently focussing on designing a large collection of Business niche themes based on our Glazed framework Drupal theme and Carbide Drag and Drop Builder. Our most recent addition is Landscaping and Gardening theme. We are not in the business of designing generic niche themes, we aim to release the best niche themes. We developed additional features for this theme including a unique new header and main menu design, an image comparison widget and a lightbox gallery option for portfolio pages. 

Check out the Landscaping & Gardening live demo to view our latest niche theme!

New Header Options

While designing new niche theme I quickly realised that our generic bootstrap navbar layout was the most important bottleneck preventing us from producing truly great niche business website designs. The Glazed Settings for the header were refactored, optimized and extended with new style options and 11 new color options. These options are now also made available in our Glazed Content Design field collection so that you can customize headers for specific landing pages and match your creative content. 

You can now view all these header in our live demo under the new Headers Dropdown menu!

Image Compare, Lightbox and Portfolio Page Design

For a landscaping business it's important to showcase your best work to potential customers. The portfolio content type was extended with additional layout options. New features include a Next / Previous node pager at the bottom, an advanced lightbox gallery system for viewing portfolio images and last but not least: an image comparison widget. The comparison widget really makes your case studies stand out, providing an effective and fun way to demonstrate the awesome service your business provided to your customer.

The comparison widget is touchscreen compatible and responsive. 

New Form  Design & Theming

The default Bootstrap 3 forms already started looking dated. We replaced it with a minimalistic new design. Forms now blend in perfectly with any design. Form elements are sublty colored only when interacted with. The selectbox now features are custom themed dropdown icon that is themed using the default font that you configured in Glazed Settings. The selectbox also sports are a subtle microinteraction animation when hovered.

The Landscaping contact form uses the webform bootstrap 3 layout module.

Looking Ahead

In the future look forward to more Drupal Niche Business themes, as well as our move into Magazine themes. WordPress magazine themes have seen a surge in sales on themeforest recently and I think there is oppurtunity for Drupal to shine in this growing market. After all, Drupal is naturally best at managing large amounts  of structured content and magazines are just that. Combine that with the capability of our drag and drop builder to easily generate attractive creative content and there you have a basis for best-in-class magazine themes. If you are interested in joining our little theme shop you can join now for just $48.

Aug 30 2016
Aug 30

Just over a year ago I started with something small. I combined some existing technologies to create a drag and drop builder/theme. A combination of jQuery UI, CKEditor, Bootstrap 3 and Drupal. The result was far from perfect but interesting enough to get a bunch of people excited and involved in helping me find out how to improve the product.

Glazed Construction Design, Product Updates

Today's blog celebrates the new Construction design that is available today to all SooperThemes members. We've been working towards this release for nearly a year and the reason it took so long is that the core of the Glazed framework theme and drag and drop builder needed to be 100% up to the job. The reliability, sophistication and flexibility of our framework theme and drag and drop builder are lightyears ahead of the minimum viable product we released 14 months ago. To our customers who joined us in the beginning and are now renewing for the second year: Thank you so much! 

Our construction theme (click to view demo) is not the prettiest design I've ever created but that's not really the point. The point is that it looks like a construction theme all the way. It doesn't look like a generic theme that was customized to look a little bit more "heavy industry". Our Glazed framework theme allows you to completely design every aspect of your Drupal site from typography, to colors, grid design and navigation. Combine this with our drag and drop builder and everything you need in a business website can be designed and developed in the browser. From a blank canvas all the way down to the pages, views and forms everything in this demo was created in the browser, without writing a single line of code. 

No templates were edited, no CSS was written, not even a single hand coded HTML tag was needed to build this unique 40 page Glazed demo.

For more details about todays products updates check out the Glazed Changelog and Glazed Builder Changelog.

Why WordPress Is Taking Turf From Drupal 

It's simple economics. You can buy a WordPress theme for $59,- USD and a few days of customization and content editing later and your client is impressed and your project is comfortably on schedule and on budget. WordPress themes have become a major source of innovation in recent years, offering drag and drop builders, and niche-specific features for magazine websites, directory websites and all sorts of small business websites.

Themes are becoming more sophisticated and crawling into Drupal territories like for example education, magazines and community websites.

10 years ago I moved away from WordPress and Mambo because I simply felt Drupal was better, and I still feel that way. While these WordPress themes are loaded with features, they lack Drupal's modularity, coding standards and interoperability. I sincerely believe Drupal can be a better platform for all these themes. After all, Drupal has built in support for content types, relations, versioning, configuration management, and superior user management and access control.

Starting from today I will focus on offering as many niche designs for small businesses, large businesses, NGOs, governments, educators and online magazines. I hope that you will join sooperthemes.com and help us with our mission to show the world that Drupal is capable of doing what WordPress does and more. 

Our mission as SooperThemes is to promote Drupal as the #1 platform to author content on the web and at the same time to remain the #1 provider of designs and design tools for Drupal. See our roadmap for more details. The way to make Drupal the number one choice again is through the same economics that made WordPress so big, so our initial focus is to disrupt the market with a 90% decrease in costs of building and running a Drupal website.

Enjoying The Ride 

The past year has been a big adventure but also a lot of grinding, bug fixing, technical debt problems and all the things that new products face when they enter the market. However it has mostly been fun and exciting to develop these new technologies for the Drupal community and the reception of our updates is really motivating and powering our new developments.

Allthough pioneering in the area of next gen (drag and drop) Drupal themes meant facing a steep learning curve it can be said that Drupal is actually easier to build on in the long term. Our Drag and Drop builder is very similar to a frontend framewor that uses the CMS as an API. This is somthing that needs hooks and AJAX capabilities. Something that Drupal provides out of the box.

If you are reading this as a prospective customer: please join Sooperthemes and enjoy the ride with us. To our existing customers: keep your eyes open for exciting new features and designs. 

Jul 15 2016
Jul 15

New Typography Controls, New Layout Capabilities, Drupal Block Design, and much more!

Today after about a month of coffee-infused delays I'm happy to announce Glazed 2.5.0. and Glazed Builder 1.0.11. Our framework theme has just become massively more powerful, with design tools that help you create any design imagineable without the hassle of writing and testing code. While on the surface our Glazed Builder module received a smaller update, it had a massive architectural update under the hood.

The free version of glazed on drupal.org will soon get a 2.5.0 release as well with reduced but still awesome features!

TL;DR

Professional Typography

With 2.5.0 you get an all new Typography design tool. With pixel-perfect precision you can set the font size and line-height everywhere in your website. The Advanced Type Controls give you fine-grained control over the exact size of every level in your typographic scale. There is also an option to set your headings in uppercase, and a setting to set the letter-spacing in your headings (this is often needed with uppercase headings).

In 90% of all cases you don't even need to touch the advanced typography settings. As you can see in the animation below, there is a Typographic Scale Factor that calculates all other font sizes using the body font size as base. This slider acts as a master slider for all the advanced settings and generates a perfectly balanced typographic scale. You can still fine-tune individual type sizes bu in 90% of all cases this probably isn't even necessary, because designers typically use typographic scales as a design tool.

Style all the Blocks!

A completely new feature is our Glazed Settings Block Design Tool. This tool gives you fine-grained control over the look of Drupal blocks across your website. This gives Glazed the capability to reach one more place that was previously unreachable without custom theming. While providing dozens of settings to have extensive creative control over block design we again implemented a shortcut that will save you most of the trouble of exploring new settings. The Block Design settings come with a dropdown that holds 10 presets. Each preset represents a collection of settings that produce a popular block style.

Live Preview

Any changes you make ot the block settings is immediately reflected in the 2 demo blocks next to the settings. Live previewing makes it much more intuitive so design with Glazed settings and it's a feature we plan to push further in both our theme and drag and drop builder.

Massive New Layout Capabilities

A feature often requested was the capability to make any region full-width. This gives more creative freedom over the look of your header, navigation, footer and other regions. Now it's possible to use Carbide Drag and drop builder to craft big footer blocks that have several layers with full width background. An example of this is the new footer in the Glazed 2.5.0 main demo: 

Beyond full width regions you can now also specify which content types should be in full width containers. Previously only the drag and drop content type in our Glazed distribution was capable of having full width sections. Now you can select any content type. This allows you to easily create custom drag and drop content types that have 100% of our page builder's capability, without needing any custom theming.

Boxed Layouts, They're Back

If you feel boxed layout sounds like something from 10 years ago you're right. But now boxed layouts are back as cool new design tool to better accomodate the increasingly popular 27-30" screens with massive screen resolutions. The image below is a boxed layout example where I simply set the box width to 1920px and the content width to 1600px. This gives an extra visual layer of structure when viewed on big screens and gives the website a massive, spacious look while having more of a together feeling than a traditional full-width, wide-set layout.

The code that makes this work is 100% mobile friendly, it will still look great on mobile. Like the rest of our Glazed theme, it's 100% flexible responsive, so it looks pixel perfect on every screen size.

New Menu Effects

Additional options have been added to Glazed menu settings to give you more options in deploying creative, interactive hover effects using a border. Put the border on top, or at the bottom, or anywhere in between. You can animate the border from left to right, from middle out, etc. A completely configurable border effect has been added to the option of menu hover styles. This gives your website just that little bit of extra branding and it works especially great if your site's design already makes uses of big dividers or hairline separators. 

Dividers as design tool

Another, more subtle improvement in both Glazed and Glazed Builder is more control over the look of divider elements, or <hr> tags if you know your HTML. Using dividers, short and thick or long hairlines as design tool is an increasingly popular effect. Use designers to fit a sophisticated look and feel, or use them to direct the viewers' eye to the important areas in your page.

You can first set the default divider element styling in Glazed theme settings. You can then add dividers in blocks using Glazed Block Design settings, and you can add divider elements anywhere in your content using Glazed Builder.

The divider element styling you configure in the Typography Design section in Glazed Setting applies globally to your website. However, you have full contextual control over your in-content divders as well as over the divider style in Drupal blocks.

Glazed Builder Improvements

On the surface you won't see a lot of changes in our drag and drop page builder module, but under the hood thousands upon thousands of lines of code are updated and moved around. Major code refactoring was needed to prepare our drag and drop builder for easier development in the future. With our newly re-architectured code we are now more than ready to handle new requirements for magazine sites, large enterprise level implementations and simply adding new elements to keep up with demands and opportunities in the ever-changing world of front-end design.

What's In it for Me?

To be very honest, this release contains a lot of new features, fixes and refactoring that I wanted. But the good news is, our new development has paved the way for all the things that you will be very excited about:

  • New, better Glazed designs and demos
  • More capabilities for your customer websites, with less code
  • Faster iterations for feature and bugfix updates
  • Magazine themes (yes, now they are really coming soon)
  • Easier bugfixing thanks to changes under the hood

Our focus will now be on documentation, creating new designs and catching up on improvements to support service. If you have any feedback, ideas, features requests, awesome websites that you'd like to see as a Glazed demo, just drop a comment!

May 23 2016
May 23

Introducing Zero-Touch Drupal Product Provisioning

2 years ago I started working on a Drupal CMS distribution that makes it less painful to launch a fully configured Drupal website. Today we're proudly launching what I think is the best CMS installation experience you've ever seen. Pantheon and Acquia cloud might be great tools for people like me who work with Drupal on a daily basis but there is a huge community of people who need something more simple. Our goal was for users to install a fully configured and themed Drupal website, with fully configured CMS components and demo content without requiring any user interaction. In less than 5 minutes.

Our Deployment tool currently does the following on auto-pilot:

  1. Runs tests to see if the receiving server ready for installation
  2. Generates custom build of our CMS installation profile with only the CMS components you need
  3. Uploads the files straight from sooperthemes.com to your server
  4. Uses Drush to go through the entire installation on your server
  5. Installs demo content

Looking For Drupal Hosting Partners

From a wider perspective, I see this kind of service as an answer for the Open Web to the more streamlined experiences provided by companies like Wix and SquareSpace. They are the walled garden alternatives for small businesses. In that light I want to integrate with as many great Drupal hosting providers as possible. The first Hosting partner I integrated is A2hosting, because they provide SSH and Drush automatically to all users. I'm looking for other hosting providers who offer this, if you know of or are such a company please let me know in the comments!

Our service launched in beta but theoritically this should work fine on an Drupal/Drush capable server. It doesn't matter if you run Apache with MySLQ or nginx with PostgreSQL, our software has only the following server requirements:

  • Drupal capable stack
  • Drush
  • Rsync
  • SSH with password authentication

Looking For Testers

This means you can try it out right now on your VPS development server, all you need to provide is an empty web directory and database. If you're trying this and can't get it to work on your Drupal/Drush capable server please let me know in the comments. We did a lot of testing but the variety of server configurations is so vast that I'm sure we can improve our software's compatibility. Just to be clear, you don't need to be a subscriber or even registered on sooperthemes.com to use this. As a guest user you cannot choose the premium themes in the form but you can install any configuration of our CMS distribution with the Glazed Free theme.

It has been an adventure developing this new deployment tool. If you are excited too please test it and let me know what you think!

In Other News: SooperThemes Rebranding. Glazed 2.4.10 and Carbide Builder 1.0.10 Released

This week I've also updated the SooperThemes logo. For the past year the sooperthemes.com website has reflected what our new product was: Completely new and finding out where it wants to go. Now the logo more reflects the values of simplicity, open source and friendliness. These are the values I want to embed in our products. The logo is much simpler than the old one. The openings in the O are for open source. And the last detail is the Happy e's. This little touch of Dutch Design is a tilted back lower case e, it was invented by Heineken and reminds of a laughing head.

Today you can also download the latest patch-level release of Glazed theme and Carbide Builder. These releases contain no new features, only bug fixes. See the Glazed CHANGELOG and Carbide CHANGELOG. We've also updated the YouTube background feature and put a usage example in the bottom of the Sections and Backgrounds demo page. Enjoy!

May 02 2016
May 02

Glazed Drupal CMS 1.0

After over 100 git commits over 4 weeks, including weekends and late nights I can present to you Glazed 2.4.8. This release includes not only an update to the premium Drupal theme and the drag and drop builder: the Glazed Drupal CMS distribution on drupal.org finally reached the 1.0 milestone! The backend distribution started as an experiment 2 years ago. I tried to find the perfect bundle of features to jump-start development of Drupal CMS websites.After nearly 100 beta releases I finally settled on the formula for features and flexibility that is now in the Glazed Drupal CMS 1.0 release. To make the distribution truly useful, it of course had to have a beautiful theme, and the distro now includes a free slimmed down version of our best-selling Glazed framework theme: Glazed Free.

Glazed Drupal CMS 1.0 Features

  • Fully Loaded WYSIWYG Editor
  • Built In Media Library
  • Glazed Free Theme included
  • Multilevel Responsive Main Menu
  • Blog Content & Views
  • Portfolio Content & Views
  • Event Content & Views
  • Event Registration
  • News Content & Views
  • Bootstrap 3 integrated
  • SEO Optimized
  • Demo Content Included

Glazed Drupal CMS on Drupal.org

Glazed 2.4.8 Comes with a ton of improvements, bug fixes and shiny new demo pages!

Glazed 2.4.8 Release Highlights

Search all the things!

Full screen search is a really exciting new UI feature in Glazed. Search is becoming a key factor in navigation on increasingly large and dynamic websites. Thanks to our full screen search design you can provide a unified search experience no mobile and desktop. The search feature is based on Drupal's core search, with just a theming and behavioral overlay by Glazed. This means you can use all your favorite search modules and plugins along with our full screen UI.

We added this search enhancement with the goal of powering larger, more dynamic sites. If you have any ideas to further improve our search be sure to hit the comments! (One thing I'm looking at is using the Fast Autocomplete fac module).

View Full Screen Search demo

Stunning Animations At Your Fingertips

It has never been easier to create stunning animations. We added a new demo page to to showcases our newly added floating animation. This page is also great for learning how you can use animations and apply in your own projects. If you are interested in our improved animation features check out the animation page. If you want to try the animation engine, to spin up a private demo at trysooperthemes.com.

My goal at SooperThemes is to strike a balance between features, performance, and usability. I actually cut the animate.css library in half, because it had some many animations that are just ridiculous and have no place in a professional product. I then added the custom floating animation for our new Apple style demo page and the whole animation library clocks in at just 4kb. It only loads on pages with animations, because we care about performance.

View Animation Demo Page

Enjoy easy animations for callouts, meaningful content enhancement or simply to impress your client or improve website visitor engagement. Or just for fun, but don't overdo it.

GridStack Views: Stack Your Featured Content

We've been working on features that will be used for our future Magazine designs for Glazed. This is one of them. Using the GridStack JS library and our easy to use Views integration, you can create dynamic "stacks" of your most important content. The views plugin gives you total control over layout, gap size, colors, all inside the Views module. You can use it for homepage headers, footers, or even for a full-page gridstack with all your content!

This is one of those little features that make your content more fun to interact with, and more personalized.

Creating custom stacks:

View GridStack Module Page

 

Carousels For All Content

There are 2 kinds of sliders in our Carbide Builder drag and drop tool. This first is a Bootstrap based simple image slider. Then There is the Carousel Element, which is like a swiss army knife of sliders. It will do regular sliders, fading sliders, carousels, and more. It will slide anything you throw at it, including videos, images, and HTML content with layouts.

The Carousel element gives you the awesome power of the Owl Carousel library at your fingertips. Here is an example slider that I created by copying the Position Elements container demo contet in 2 slides:

View Carousel Demo Page

View Positioned Layers Demo Page

  

Improving Drupal Views Integration

The most exciting improvements in 2.4.8 to me are all in the Views integration. We tested and improved exposed filter integration. The awesome power of views' exposed filters and sorting is that unlike with contextual filters you get a human-friendly form that allows you to personalize the view. When exposing a category filter, you get a nice hierarchical selectbox to choose a category. When you want to expose  something more massive like a node:author field you can use an autocomplete field.

The power of views integration will become more obvious when we start release magazine designs for Glazed. Keep an eye on the blog/newsletter!

New Pages in the Glazed 2.4.8 Main Demo

All new and updated demo pages:

For a complete list of changes check out the Glazed and Carbide Builder changelogs:

CHANGELOG Glazed Theme
CHANGELOG Carbide Builder

Improving Drupal's Distribution Experience

Since Distribtuions were announced as a feature for Drupal I thought it was a great idea, and now SooperThemes is working on making distributions even better. I think we are the first distribution to have a custom build option but that is just the beginning. We are currently testing Auto-Deploy & Install tools that we've been working on for 4 months. (Think fully automatic deployment and installation on your server or even shared hosting).

Bonus GIF

Here's a GIF image of our completely re-architected multi-level responsive main menu:

Have a great day!

Feb 25 2016
Feb 25

The latest new feature on our premium Glazed theme is a MultiLevel menu solution that creates smart megamenus based on simple nested lists. This means you can create a menu structure in your Drupal main-menu and the theme will generate the best layout based on your structure. No extra modules required.100% mobile friendly.

This feature marks version 2.4.4 of Glazed theme and it's the most exciting release to date. With 2.4.4 a lot of ideas for Glazed 2.4 have come to fruition, including moving the drag and drop builder out of the theme and releasing it as a standalone premium Drupal module. Now would be a great time for you to join our premium Drupal themes club or upgrade to our Unlimited Subscription!

Drupal Themes

Some experts call megamenus an outdated design pattern and I think they are partly right. If you create massive mini-sites inside your dropdowns you will not create a good experience on a small phone. The simple fact is that 5 screens-full of menu will confuse anyone who is looking for the contact page, which is typically the last link in the menu. However, mega menus can still be useful, especially on large-scale websites that provide a lot of structured content. Some of the most prominent Drupal-powered brands are using mega menus, for example Acquia.com, Whitehouse.gov, and Economist.com. While these menus work fine on a large screen, the experience on a phone is less than ideal.

Bootstrap 3 MultiLevel Menus

Bootstrap 3 does not support multilevel menus by default. However, with some simple CSS you can make your nested menu lists visible and with some jQuery you can divide your dropown in columns. I designed the desktop version of the menu to show all nested menus in a dropdown at the same time:

Drupal Themes

This effect is achieved by using some jQuery to create the columns and some CSS to show the dropdown menus.

Smart Layouts

The menu system is smart in the sense that it makes decisions about the layout based on the kind of menu structure you create in the backend. If a dropdown contains more than 7 list items, it will split the menu into even columns. If a dropdown contains 3 levels, it automatically uses the structure to create columns. If a menu contains 3 or more columns, it will automatically become a megamenu (spanning the width of the website). Here is a GIF that demonstrates all these cases in the Glazed main demo website:

Drupal Themes

Delightful Mobile Experience

Creating a near-native mobile experience based on a multilevel menu structure was a big challenge. Even in 2016, there does not seem to be a widely supported jQuery or Bootstrap extension that provides that native feel. Finally I found this gem in the codrops blog: http://tympanus.net/Blueprints/MultiLevelMenu/. Thanks to the hard work of the codrops team we now have a solution that provides meaningful animation and clear, immersive navigation to your Drupal website. The result is a mobile solution that is both elegant and clear:

Drupal Themes

It took some work to integrate it into the theme, especiall considering that the Glazed header and menu theme settings demand that the menu works in different page layouts and with varying content and menu structures. In the situation where a user chooses the top header by default, the theme will dynamically respond to changes of the browser window dimensions. This could be from a user dragging the edge of the browser, or from a user switching between portrait and landscape mode on his mobile device. When this happens Glazed theme will reflow the page and put the menu in the correct position and attach the correct behaviors. This ensures the menu is always working and always in the correct mode for the current viewport size.

Replacing TB Mega Menu

This new menu design replaces the TB MegaMenu module in all our Drupal themes. To be honest it was always a pain working with this module. even after I converted it to work with Bootstrap 3 the maintainers keep including Bootstrap 2 in the module. Even in the Drupal 8 version. Moreover the module's menu structure is not exportable, has bugs with translation, breadcrumbs, menu active trails, caching and more. Since the Glazed theme menu system works purely based on Drupal's core menu system all these problems are gone and our customers enjoy installation profiles with complete megamenu structure.

Are you interested in learning how the menu works? You can try a backend demo of our Glazed premium Drupal theme on trysooperthemes.com and see how easy it is to edit the menu. Our brand new menu system already has a documentation page too. If you are in the market for Drupal themes or our Drag and Drop site builder: you can have it all by joining the community on sooperthemes.com for just $48!

Jan 05 2016
Jan 05

Later this week I will write a full blog post, with an overview of new features, new options and entirely new capabilities in the SooperThemes product line. For now: just a sneak preview. During the last 2 month fo 2015 we made a huge effort to produce the biggest update ever for our premium Drupal themes. As with any big software adventure, we had a quick and productive start, then some setbacks on difficult components, and then some setbacks on small details that turned out to be –not so small–

Over the coming 2 weeks we will publish more content, covering the new capabilities in detail and with illustration. For now just a sneak preview and a list of changes that I will scrape from the commit log. Happy 2016 from sooperthemes!

Our free open source variant also got a huge upgrade and a new free version of the premium theme.

Introducing Carbide Builder 1.0

The success of glazed theme was as much in its design components as in the integration with our partner's drag and drop builder: Azexo Composer. Unfortunately this project is not maintained anymore and the owner is now fully focussed on developing wordpress themes. This forced us to continue its development internally. The result is Carbide Builder: A page builder that looks like it's predeccessor but is different mostly in that it's not buggy and has been streamlined and refactored for greater usability and performance.

Inline editing, Views integration and fixing bugs

One component that we knew was going to be tough is inline editing. It took Drupal core some years to get this right. We planned to integrate it in our drag and drop builder in a 3 week code sprint. CKEditor Inline is basically pretty straightforward to integrate but you need to look out for edge cases. Our text elements are editable in the standard modal window, on the node edit page, and now also in the inline editor. There is content coming in from multiple angles. Besides being editable, our text elements are also clonable, draggable, templatable, and deletable. We also use CKEditor in some ways it's not intended to be used: for managing single text strings rather than complete web pages. Carbide Builder fields can easily have over a dozen inline editors and these need to be managed so that their contents and behavior play nice with all other features of the drag and drop editor. This was a tough but finally the result is worth the trouble.

We also spent time on advancing our views integration. Most importantly we now support setting contextual filters on views displays right in the drag and drop interface. This means you can build complex magazine homepage, portals and dashboard pages simply by dragging and dropping the same views displays and setting the contextual filter. Right in the frontend!

While exploring and expanding the codebase of the drag and drop builder, we also fixed numerous bugs. Certain components were unfinished or simply not working at all. In our 1.0 release all components are tested to work, without exception.

You can now try an admin demo!

Go to Trysooperthemes.com

Changes

As an appetizer for richer coverage of our new product line, here is a list of changes that I'm scraping from 300 git commits:

  • Cleaning and refactoring code
  • Coding standards
  • Fix blockquote
  • Fixed image height rendering
  • Restoring web tab for media browser
  • Add support for empty elements in Carbide Builder drag and drop snippets
  • Added onBeforeUnload message if unsaved content
  • Added views integration Contextual Filters
  • Added views integration Exposed Filters
  • Added views integration Exposed Sorting
  • Added Carbide Builder branding
  • Removed Impress.js presentation element
  • Removed JParallax
  • update 3rd party libraries
  • Removed site export/management related code
  • Updated and simplified animation engine
  • Fixed youtube background
  • Support responsive layout in video element
  • Disabled form component, can be added back if it's more reliable and useful
  • Refactor loader JS system for managing JS init and Just-In-time configuration code
  • Split views and blocks in tabs
  • Added views tag filter
  • Removed linkit
  • Fixed backward compatibility with azexo composer
  • Add Glazed Theme color palette to Iris color picker default palette
  • Add inline editing
  • Tweak tune and debug inline editing
  • Added new button styles
  • Added color overlay utility classes
  • New form styling
  • Social links element
  • Refactored icons element(s)
  • Refactored asset management for sidebar elements (now Carbide Snippets)
  • Refactoring row element and controls
  • Initiating row element with 1/2 + 1/2 layout
  • Refactor parent/child integrated control buttons
  • update jumbotron styling
  • Fixed major clusterfuck with lots of components by simply updating from jQuery 1.9 to 1.10
  • Add build scripts for trysooperthemes.com
  • Add hook_enable code for backwards compatibility
  • Improve help texts
  • ...
  • Lots and lots of UX improvements
  • Lots of bug fixes
Nov 02 2015
Nov 02

When you have a website or a blog, your credibility is important.  If your site is new this can be hard to achieve because you’re not a well-known company like Microsoft or Apple is and you need credibility in the marketplace. You need to have trust with people online to get customers and business.

Why Credibility Matters

Online there’s simply far too many websites and blogs going after the same audience you are. All of these sites compete for business and you need to establish a solid reputation online so people come back to you time and time again. The main thing is that this is hard for new companies to achieve: you have to work hard at establishing your credibility online. People are cautious online because there’s a lot of scams and shady websites that they don’t trust. People are less likely to buy from a website they have never heard of before and that may include your site.

Having credibility is very important to your website or blog. Here’s 20 ways that you can establish credibility with your audience.

1. Have a Professional Website Design

One of the first thing you can do is have a website that looks professional. There are far too many sites that look sloppy and this causes your visitors to click away quickly. It’s estimated that 75-94% of people will make judgements based upon the first glance at a site. You need a site that’s professionally designed and looks good to the users as this will keep them there for a longer period and increase your trust.

2. Avoid a Broken Site

You need a Drupal site that is functional. You can’t have broken links or missing images as this isn’t professional. You need to test the functionality so everything fires on all cylinders. Make sure the site loads quickly and people can find what they need right away.  Broken pages and images were shown to be a one of the most powerful factors that damage your credibility!

3. Make it snappy

Having a slow site is bad but having a site that performs average is not where you want to be at as well. Many Drupal websites struggle to manage 3 second pageloads. You can set your site apart by leveraging Varnish and the Advanced Aggregation module to create sub-second pageload times. Group together your css, group your javascript files and make them load asynchronously where possible.

If your site has an international audience it’s even more difficult to get those sub-second pageloads across the world. Your DNS response time and server latency will be slow for connections that cross oceans. Fortunately there are now affordable Content Delivery Network services that speed your site from many servers distributed globally. Cloudflare even offers a free basic package and they also happen to be one of the fastest DNS in the world. Consider outsourcing your caching to a CDN provider and you won’t have to manage a Varnish or nginx cache anymore while getting worldwide top performance.

4. Have Your Portfolio Displayed Prominently

People want to know that you’re the best business for them so show them that you are. You want to show people your portfolio of completed work so they can make their own judgements. By showing your previous work, you’ll establish trust. The portfolio should be easy to find with one click and contain numerous samples of your work for people to look at.

5. Use Product Reviews to Your Advantage

If you can get reviews of your products this will help you a great deal. People tend to trust products which have a lot of reviews. You can see this in action when you visit Amazon which has a lot of product review.  This works on the physiological level as people will buy based upon product reviews quite often as they tend to see a product with lots of reviews as something they want to buy. Try to get reviews of your products from your buyers as this will establish trust and credibility with your site and what you have to offer buyers. Negative reviews aren’t as bad as they seem as they add to the credibility and make the reviews and entire site more authentic.

6. Have Customer Testimonials

For a service-based business it can be difficult to get product reviews so use testimonials instead. This allows a buyer to see what type of job you’re doing for your customers. Try to have these on the homepage or a sidebar where they can be easily accessed by browsers to your blog or website. For greater impact the testimonial needs to be real. Some common tips for testimonial effectiveness are as follows:

  • Have a quote from a real user
  • Have the persons name and a quote
  • Have an image, quote and the business or person’s name
  • Have a video testimonial (best)

If you can get a person that’s respected in your industry to do a testimonial as this will create even more credibility for your website or blog.

7. Have a List of Clients You Have Worked With

You can enhance your credibility if you have a list of clients you have worked with. This can be a huge advantage if the client is a well-known company.  This works because established brands don’t do business with just anyone and if they happen to work with you, this boosts your credibility. They see you as being in the top bracket of websites since you have worked with the big boys. Bloggers can use a “as featured on” section to get results.

People tend to want to do business with companies that work with a lot of clients. This shows that the company is well established and respected. It also shows that big trust factor with the buyer. If you’re already established use “social proof” to let people know the number of clients you have served.  On a blog you could even list this on the homepage to let people know how many you have helped or sold products to.

8. Simple language

People don’t trust language they don’t understand. Complicated language can make your communication unclear, or seem unauthentic. If you write like you talk to your friends, people will feel closer to you and more willing to accept your message.

It’s also important you proofread your content and don’t miss any broken grammar or incorrect spelling. Overcomplicated language is bad but incorrect spelling makes you even less credible. It’s bad business when you make these mistakes on your blog but unforgiveable on your homepage or product pages.

9. Have an About Page

A business is run by real people so have an about page where you showcase personal experience, philosophies, and skills. You want to be open with your visitors and a good about page can help with this. You can highlight the people in your business on this page if you like. Mention who you are, what you do, how the company began, where you want the company to go and so on. Make it personal as it will resonate with readers and they will be more inclined to purchase from you if they know who you are.

10. Show yourselves and your office

An about page can be good, but bio pages for each of the team members can also help to establish your credibility with visitors. This can help to establish trust and you can highlight the experience as well as credentials of the team members here.

You also want to use real team members here. Don’t use stick images or try to make the team seem larger than it actually is. People will pick up on this and think negatively about your business.

A photos of your office helps to show there are people working full time on your products or service. This inspires trust and makes you more credible or valuable than competitors who could be unavailable most of the time while they’re on their full-time job.

11. Consider Your Prices Carefully

You don’t want to use prices that are too cheap. If it’s too good to be true, then it is! If a product on your site is deeply discounted, this can be a red flag for a buyer. People want sales, but if the price is far below what they expect, they will ask questions. You want to seem legitimate and prices that are far too low and backfire for you.

Your prices need to be reasonable. If you’re able to supply low prices because you have an advantage in the marketplace this is fine, but you have to think carefully about your prices too; sometimes a higher price can set you apart from the rest and communicate superior value. People can be skeptical so make the prices reasonable from the eyes of the buyer. Be honest when you set prices and make sure they work for your website.

12. Have Guarantees for the Customer

People will spend if you have a guarantee for them. If they are unsatisfied, they want to know they can get their money back from you. If you have a guarantee this will boost your credibility with users a great deal. You’ll establish trust with users as you are taking on the risk, not the customer.

A money back guarantee is a good idea because you want to reassure people that want to buy from you. You show confidence in your products when you do this and thus help to alleviate customer concerns about buying from you. This can help a lot when you’re selling “digital products” as it makes the transaction risk-free for the buyer.

Ensure you have refund policies as well as warranties on the goods to establish credibility with your user base.

13. Have a Physical Address

You should display your brick and mortar address on your website as it shows that you’re accountable and this makes the visitor feel comfortable. If someone buys from you and the product doesn’t work they want to be able to contact you in as many ways as possible, not just by email or telephone number. If you have a physical address this reduces the concerns the buyer will have in dealing with you. There are a lot of scams online and people will only deal with you if they have various ways to contact you and a physical address helps with this.

14. Customer Support

You want the ability to talk with your customers directly through customer support. This will put you ahead of the competition that doesn’t offer this right away. This shows that:

  • You can showcase your expertise one-on-one with clients
  • It shows that the people behind the business are real
  • You help reduce customer concerns quickly

Try to have personal interaction with clients as this enhances credibility. The order of effectiveness is:

  • Phone support – This offers quick response time and offers good personal interaction. Just by having a phone number present on the site will reduce the concerns of the website visitor, even if they never call at all.
  • Live Chat – This is less personal, but offers a quick response time which customers appreciate.
  • Email Support – You need this if you don’t offer the other forms of support which are more effective. You need to check this inbox on a regular basis and respond quickly.

15. Have a Blog

To showcase your expertise and insights into your industry a blog can help. This allows you to showcase your content on a regular basis. A blog will help you establish your credibility. Here’s how you can establish credibility with your blog content:

  • Create content that solves the common problems your clients have. This shows you understand the niche you’re in.
  • Create content that asks for nothing from the client. It’s not a sales pitch it’s just valuable information they can use.
  • The content should link to other credible sources such as blogs in your industry or reputable research organisations, which further enhances your own credibility
  • Have the content backed up with real world data. You should use real statistics here. You don’t want to mislead clients with information that isn’t true or isn’t based on facts.
  • Make sure the content looks great and is free of errors.

16. Make Sure the Blog is Updated

You want to create content on a regular basis. A dead blog will drive users away quickly. If people see the blog isn’t updated they will assume the business isn’t running or that you just don’t care and you’ll lose customers and credibility quickly this way.

You have to be ready to commit to a blog so be ready to manage it. The schedule of posts should be something that you can manage. Try for weekly or daily posts if possible or at the very least a monthly post. Make sure the content you provide is valuable to users. If older content no longer works you can hide it or delete that content.

17. Have Case Studies

A case study can boost your credibility by a lot. These are effective because they show results that people can relate to. The person featured in the case study should be someone the potential buyer can relate to. These are like super-charged testimonials. A spot on the site for customer spotlights can work wonders.

Have a Lot of Product Information

Before customers spend money, they need to know as much as possible about your products. If you leaven anything to doubt, can go elsewhere for their product. Make sure the buyer has all the information that they need to know about your products. You should have good product descriptions.

The main features, purpose, and use of the product should be described. Product specification can help too, especially with complex products like electronics. Product descriptions boost your credibility in the following ways:

  • They show that you understand your products
  • It shows you care about your business and your buyers
  • It informs the buyer as much as possible about what you’re offering them

If you’re the manufacturer of the product, then the product information is very important to the potential buyer. If you’re a service provider then you have to explain to a potential buyer what they are getting, what you do, how you do projects, and what results you got in the past.

18. Symbols that Establish Trust

People want to feel safe when they shop online. So you need to convince them of this fact when they shop with you. A good idea is to have a SSL certificate, as you need this for security. The SSL certificate encrypts the confidential details of the customer such as credit card information and offers a secure connection for buyers. An encrypted connection has HTTPS and the lock icon. This can help users make a buying decision because they know their information is safe when they buy something from you.

Security seals from trusted companies will also help establish trust with buyers such as McAfee or Norton. This ensures users that their data is protected when they buy from you. Also do a Google search for the certificate vendor before buying SSL. Some vendors, like Symantec, have been in the news recently and could loose their status as trusted SSL authority. This means your website could loose the lock icon, and generate browser warnings for your visitors.

19. Have Multiple Payment Methods

You want to have more than one payment option. Many people use PayPal, for example, but not everyone can access PayPal. You need to offer more than just PayPal on your website. Furthermore, PayPal is often associated with smaller businesses and hobby sellers because of the ease of setup. If you want to be seen as a professional entity, you can’t offer just PayPal.

You need the ability to process credit cards too and payment merchants like Stripe make this easy. You can offer PayPal, but have other methods that allow people to pay you. By having more payment options, you’ll increase sales.

20. Be Authentic

You have to be authentic with your website. Many strategies like testimonials, customer numbers, and awards can be faked. You don’t want to mislead your customers as people will pick up on this fact. Be authentic and provide real numbers. If you don’t have the numbers just be as open as possible about what you offer the customer.

In whatever you do, make sure you’re authentic as this will boost credibility with clients and bring new customers to your business.

Conclusion

A buyer has to be able to trust you or they aren’t going to buy from you. Put the strategies listed above to good use with any Drupal site that you build. If you do this, you’ll build your credibility. You also want to ensure that you don’t do too much to enhance your credibility. You can overdo it, which will look weird too. You want to use these strategies in a subtle way.

Credibility will help to boost your conversion and bring you the sales that you’re looking for online. Being more credible can impact your site tremendously if you’ve never thought much about it before.

Sources

Oct 15 2015
Oct 15

When SooperThemes launched the Glazed drag and drop theme in June this year it quickly became the most talked about Drupal theme in our 8 years of history. Community support for our premium drupal themes even resulted in my case study being featured on the Drupal.org homepage.  Now in version 2.3.1 there is a ton of new stuff and I worked out some of the kinks that a minority of customers on windows machines and $2 hosting were experiencing during installation.

After designing and developing the new Canvas sub-theme, I worked tirelessly for 9 days on improving the installation experience. What I initially planned as a 2 day excursion into the installation performance issues, turned into a long grind of testing, profiling and refactoring. The result is a speedy and dynamic installation process that adapts itself on your hosting environment by doing realtime performance profiling on your server. 

Canvas Sub-Theme

Canvas is a clean, modern sub-theme with a focus on pageload performance and SEO optimization. The canvas sub-theme shares the main demo content that you'll also find in the Main Demo and Dark Demo. With the canvas sub-theme release we added a collection of ready-made pages and layouts the the main demo content package.

Premade Homepage Layouts

Glazed Drupal Theme Homepage Templates

In addition to the 30+ elements pages we added in a previous release we created 7 readymade drag and drop homepage examples that combine elements and animation in interesting ways. Besides pure drag and drop based homepages we also introduced pages that combine views inside the drag and drop layout. Check out the blog homepage and portfolio homepage

Premade Page Layouts

Glazed Drupal Theme Subpage Templates

To further demonstrate the power of combining drag and drop elements with real content we create 11 new ready-made sub-pages. These range from simple layouts like the restaurant menu page to more advanced applications like a Drupal user registration page that hides the menu. Glazed Theme now offers readymade templates to create business websites, restaurant websites, creative portfolio or agency websites and much more.

New Portfolio Layouts

Glazed Drupal Theme Portfolio Templates

To showcase the powerful combination of Bootstrap and Drupal we user the Bootstrap Views module as well as a premium portfolio module to create a massive 24 portfolio layouts. They are all made with the views module so you can easily clone them and customize them. Some of these layouts simply showcase various bootstrap grid applications and some more advanced portoflio views using category based filtering and inline modal node views.

New Blog Layouts

Glazed Drupal Theme Blog Templates

Through an application of Bootstrap views and adding layout to blog displays using Field Formatter Class and Field Group modules the CMS Blog component got a big update. By pulling the service links module into the component and giving both the pages and comments a make-over we created more engaging Blog layouts, like the classic and modern layouts, or the minimalistic grid views.

Free Giveaway: Comment to win a free 1 year SooperThemes subscription

To celebrate this substantial update and to kick off the start of Glazed Theme 2.4 I want to ask your help in making Glazed 2.4 another great leap forward. Glazed 2.3 already has features that are never seen before in a Drupal theme, like visual (frontend) drag and drop, an extensive user-friendly theme settings dashboard, and a susbcription that gets you a regular flow of new designs you can easily import and use in your Glazed sites.

I want to know what it is that you want to see in the next Glazed Theme update: 2.4. The 3 most compelling and well thought-out comments that address the 2.4 roadmap will win a 1 year premium themes subscription on SooperThemes. To see an overview of what's already possible with Glazed take a good look at the Main Demo site.

Up Next: More Drupal Themes and Glazed 2.4

With all these new features and pages in our flagship Drupal theme the focus will first be on creating new designs. Glazed Drupal theme is promoted as the revolutionary new way to create more appealing Drupal websites in less time. This efficiency also allows SooperThemes to produce new designs with high efficiency. Expect to see trendy, user-friendly and engaging new sub-themes to roll-out in November and December. While getting inspired by new design trends and UX studies we'll be posting updates as we develop a roadmap for Glazed 2.4 feature updates. Based on your input and our experience, I'm sure it will be an exciting release.

Glazed Drupal Themes: Canvas

Oct 01 2015
Oct 01

Yoast Drupal SEO Module: Tested and Reviewed

Yoast SEO is a household name in the WordPress community and as a premium drupal themes shop owner I was jealous of their favorite tool. Yoast SEO gained popularity because it didn't just make SEO finetuning possible in WP, it made it fun.  Important onpage SEO factors are pulled together in a container below the texteditor. Yoast SEO gives you feedback on basic metrics like keyword density and post length, but also more advanced feedback... It will tell you if you remembered to use your keywords in the meta description, and if the length of your page title is optimal for a nice click-through-rate in search results pages.

Yoast Drupal

I've been waiting a long time for Yoast to come to the Drupal ecosystem, and I'm excited it's finally here! I was also a little skeptical. I feared they might have done a straight port of all WP code to Drupal, ignoring gems in the Drupal ecosystem like the Metatag module. I was happy to see that my fellow Dutchies at Goalgorilla and Yoast have done a good job and built the module the Drupal way. Yoast Drupal SEO is interoperable with both the Metatag and XMLSitemap modules. 

There are also some new additions to the module, like a Flesch reading test metric that tells you if your text is easy to read. I think this is great because I have a natural tendency to get a little academic with my language. Instead of rewriting my text after proofreading I'm now made aware of my writing style while I'm writing.

First Experiences

After installing Yoast Drupal SEO it attached itself to all content types of my sandbox copy of the SooperThemes website. This was a little overkill because I don't need SEO feedback on support tickets, contact forms and archive pages. This is easily fixed by disabling Yoast Drupal SEO on  the relevant admin/structure/types/manage/page content type admin pages. 

The next problem was a bit more serious. I use CKEditor on all my sites and alltough the module does come with a CKEditor integration, this had to be the one component that was broken. I did some work on it and submitted a patch. Now the module is working great on blog posts and I'm using it to write the post you're reading right this moment.

Issues with Markup-heavy pages

While the module is now working for my blog posts I cannot say the same for my homepage. The homepage on this site is built with Bootstrap 3 and the Glazed theme drag and drop page builder. If you haven't seen this wondeful tool yet check out my Drupal themes homepage where you'll find a video demonstration. Yoast was reporting a word count of around 600 even though the text is only around 300 words. It looks like the module is counting HTML tags as words.

I verified this by creating a simple drag and drop page with the Glazed Drupal theme page builder: a section with a row and 3 columns with Lorem Ipsum. Upon saving the page, the Yoast Drupal SEO module made a bit of a mess by creating a meta description entry with the following contents:

<p>&lt;div id=&quot;b2&quot; class=&quot;az-element az-section  &quot; style=&quot;&quot; data-az-id=&quot;b2&quot; data-azb=&quot;az_section&quot;&gt;&lt;div class=&quot;az-ctnr container&quot; data-azcnt=&quot;true&quot;&gt;&lt;div class=&quot;az-element az-row row&quot; style=&quot;&quot; data-az-id=&quot;b3&quot; data-azb=&quot;az_row&quot; data-azat-device=&quot;sm&quot; data-azcnt=&quot;true&quot;&gt;&lt;div class=&quot;az-element az-ctnr az-column  col-sm-4&quot; style=&quot;&quot; data-az-id=&quot;b4&quot; data-azb=&quot;az_column&quot; data-azat-width=&quot;1/3&quot; data-azcnt=&quot; 

Limited support for fields

Currently the module only looks at body fields, which is a bit of a shame if you have a homepage with a bunch of peripheral content in blocks, or if you want Yoast to analyze your image fields. The problem is even more real for people using the paragraphs module. It would be neat if Yoast could be more clever with understanding HTML and complete webpages. After all, we're optimizing our content for Google and Google is definitely very advanced at parsing our pages.

Yoast Drupal SEO vs SEO Compliance Checker

I was previously using SEO Compliance checker to get similar SEO metrics on SooperThemes. SEO Compliance checker has similar goals but it's not as complete and refined as Yoast SEO.  Yoast Drupal SEO is a project in early development and obviously it has a bunch of issues, but it's the clear winner in usability. It surprised me with it's refinement and interoperability. For example, when creating a new blog post it shows a Google search preview snippet and it's prefilled with dummy text that reads "Please click here to alter your page meta title". When you click it you can enter you title/description right in the snippet preview. It will then add your text to the Metatags vertical tab. This is interoperability at its best.

Good Job

Now I'm finishing up this blog post and Yoast Drupal SEO is giving me the green light for "good job". The admin content overview however is still giving me the red light: There is still some work to do before this project is ready for integration in my premium drupal themes product line.

Aug 14 2015
Aug 14

Configuration > System > Backup and Migrate > Restore database..... Did I just load my database export on the live website? oops

If the stress of pressing the wrong button on a live website is familiar to you, you need the Environment Indicator module! On large Drupal projects you will often be using multiple environments. Local development, online development, test, acceptance and finally 'production'. Environments are easily mixed up as they probably look identical in every way except the url in the address bar.

To help you keep sane the environment indicator module will tell you clearly which environment you are currently looking at. Until recently it showed a, frankly rather unpretty, vertical bar adjacent to your page. With a recent update the module got an aesthetic make-over. Now the environment is indicated by coloring the toolbar and adding a label to the toolbar. This is integrated seamlessly with a number of different toolbars, including my favorite: Admin Menu toolbar. I've been testing this version of Environment Indicator for a few weeks now and I really like it. Using a green toolbar on dev, pink on test and red on the production environment I'm always 100% confident about which environment I'm working in. Even after importing a product database into a local development installation...

Regex matching your hostname

If you move content or configuration between your environments by copying over the database, in previous versions this would overwrite your setting environment setting. The latest branch of the module is smarter: it supports Hostname matching to make your site aware of its environment even if after copying around databases:

By entering a regular expression in the Hostname field: .*\.dev.* the module knows that any environment that lives on a .dev hostname should get the green color and "Development" label. I develop sooperthemes.com on a hostname called sooper6.dev, so I get a green label. If I create a new environment at sooper6-jQuery2.dev it will automatically get the development indication as well.  

Aug 05 2015
Aug 05

Node teasers simply work right? Wrong...

Node teasers are broken and most developers don't even know it, meaning it can be a pain for content creators. If you're building large websites that constantly pump out content, then read on to learn how we fix Drupal's teasers with one simple module...

I think the reason that many experienced Drupal developers don't know exists is due to the fact that they are not full-time content creators. The problems surface when your job is to create great content on a website and your company has a workflow that involves editing and checking your content meticulously. I had been working as a Drupal developer for many years before I was in a meeting, during which the content creators of a large Drupal content platform were complaining about inconsistent display of their article teasers on various parts of the website.

In fact, there were 2 problems my clients were pointing out. The first problem is that when they edited their article to have a nice summary on the blog page, the article did not have the same teaser in the homepage sliders, or elsewhere on the website. Thinking back to this moment, I now realize that I already knew on some level that Drupal's teasers were not reliable enough to use in places where trim length makes or breaks the layout. Like in the homepage slider, which uses a very confined space to show the teaser. To "solve" this, I adopted the practice of using the views module to trim teaser lengths in the slider as well as in other pages that list teasers layouts that required carefully trimmed texts. My clients were unhappy about this; they wanted uniform teasers across their site. More accurately, they wanted control.

What is wrong with Drupal core's teasers?

There are several issues with the text_summary() function that Drupal uses:

  • The function counts HTML tags and their attributes when determining teaser length. This means a 400 character teaser with a 200 character link tag will display a teaser that is only 200 characters long
  • It can generate invalid HTML, breaking up your code without a closing tag
  • Read more links always show, even if there isn't any text to read
  • It provides no control over markup that is allowed in the teaser

Smart Trim to the rescue

Smart Trim introduces a new field formatter for textfields that improves upon the "Summary or Trimmed" formatter built into Drupal 7.

The Smart Trim field formatter gives you the following additional control over display of your teaser:

  1. The trim length excluding HTML
  2. Whether the trim length is measured in characters or words
  3. Appending an optional, configurable suffix at the trim point
  4. Properly displaying an optional "More" link immediately after the trimmed text
  5. Stripping out HTML tags from the field
  6. Preserve certain tags when stripping out HTML

Personally, I especially like the last option. For most teaser displays, I want to strip out all HTML but sometimes I want to preserve emphasis and leave in the <strong> and <em> tags. For some teasers, I may want to leave in the links, but in the featured content slider I want to strip them out. Smart Trim gives me this level of control. I'm looking forward to implement this little module in the next release of our drag and drop Drupal theme.

Node Teasers and Trimming in Drupal 8

There is a very old thread in the issue queue where a discussion about these problems is ongoing. Development for new fixes has moved to Drupal 8.x. Wim Leers points out that perhaps auto-truncating should be removed completely to enforce manual teaser creation. I think this is not a great option because it adds to the content creators' workload and will probably also lead to even less consistent teasers in a website with many contributors.

What is your opinion on node teasers and auto-truncating? Let us know in the comments!

Jul 01 2015
Jul 01

After I posted a case study last week I had a number of readers ask me if they could try a demo and see how it works. There is no try-out demo yet but in the meanwhile I produced a video that demonstrates the basic controls:

[embedded content]

If you have any questions about integration and the open source library that powers it feel free to contact or comment!

Jun 12 2015
Jun 12

We had this discussion 4 years ago. Why bring it up again now? Because several big CodeCanyon projects are coming to Drupal soon and I think it will have an impact. One of them is Slider Revolution. Slider Revolution is an "All-purpose Slide Displaying Solution that allows for showing almost any kind of content with highly customizable transitions, effects and custom animations". With nearly 60.000 sales at 18 USD it's the second most popular Wordpress plugin on codecanyon. The number of sites using this module is much greater because hundreds of premium Wordpress themes ship with the slider built into the theme. 

To refresh our memories here are some quotes from 2011:

the DrupalAppStore that killed drupal

MortenDK, http://morten.dk/blog/drupalappstore-killed-drupal

..one thing that open source doesn't do a good job with: building teams of people with complementary skills to make sure that the software is a good experience for the customer. Why? Because there is no customer. Oh sure, hundreds of thousands of people use my software and they consider themselves customers, but ultimately they are not. Why? The definition of a customer involves, among other things, providing a revenue stream.

Earl Miles (merlinofchaos), http://www.angrydonuts.com/contributing-to-open-source

The pay-per-copy business model just doesn't work very well, practically, unless you have the completely artificial system of copyright restrictions to prop it up. (Physical objects have a natural scarcity that makes pay-per-copy vastly more practical.) When you're dealing with copyleft software, it works even more poorly.

Larry Garfield, http://www.angrydonuts.com/contributing-to-open-source

Sometimes I keep wondering why on almost every drupaller comment I read on the net is against making money on selling modules but it is OK to sell themes?

If themer can get away / circumvent GPL by licensing their css/images/js in different license than GPL why can't module developer create a separate php class api that doesn't touch any of drupal api and license it with commercial license?

Jason Xie, http://drupal-translation.com/content/it-evil-request-payment

With respect to the question "How" this last commenter was on to something. Large projects on CodeCanyon protect themselves against redistribution by having a functional code library that can work independently from the CMS integration. If there is any open source lawyer reading this I would love to hear comments on GPL compatibility of this structure.

My opinion

As a (premium) Drupal themes developer I have a special interest in development of these plugins: they provide great value to clients of my premium theme. For only around 100 USD I can buy an extended license for a module that cost the developer hundreds of man-hours to develop. By including several plugins into my theme which costs 48 USD, a lot of value is added instantly. In general I have a positive attitude to CodeCanyon developers joining the Drupal community. However, there will be some modules that are good for Drupal and others that could be bad for the Drupal ecosystem. 

For example, me and several other Drupal developers have been working on improving Bootstrap+Views integration through the views_bootstrap module: https://www.drupal.org/node/2203111. In the meantime, some guy on CodeCanyon seems to have all our problems figured out already and he is selling a very sleek Views+Bootstrap module on CodeCanyon. The code he sells is all Drupal-integrated programming. As far as I understand GPL this means that all his code is also GPL. So what can we do, is it legal to copy his code into the views_bootstrap module? Is it compliant with the rules and code of conduct on Drupal.org? Is it morally OK? 

Jun 05 2015
Jun 05

On June 1st 2015, SooperThemes.com released the first Drupal Theme that integrates a visual front-end Drag and Drop page builder. I have worked on this project for almost a year, with some breaks in between for client projects that pay the bills. With the release of this theme I have retired all other SooperThemes drupal themes. All new designs will use Glazed theme as a platform. It was a great adventure and I feel proud to show you what I think is the best I could do.

Project Goals

1. Empowering novice users in building high-end responsive websites

I think the Wordpress ecosystem for paid plugins has worked rather well for the WordPress community. Wordpress has various plugins that do Drag and Drop better then any other web application. Now there are also various open source solutions emerging for WordPress. This is an example of how the WordPress community profits from a thriving paid-plugin ecosystem. 

Drupal is really lagging behind in the user experience for building responsive websites. I hope that my Drag and Drop theme will help reverse the trend and attract more young people who are interested in Drupals' flexibility and power as a CMS. In Glazed theme, building grids and setting breakpoints is all done without writing a single line of code:

2. Helping experienced site builders work faster through development automation

Amazee Labs employs three back end developers, but nine site builders

Michael Schmidt, Amazee Labs

Like many Drupal shops, Amazee Labs has discovered you can provide the most value to your customers by hiring several site builder for every programmer in your team. Automation is good for everyone: you can build more websites in less time and with less training.

Drag and drop web building is not just a gimmick anymore. The tools have evolved to be more powerful, produce better code, and leverage MVC frameworks to create a fluent site building experience that runs mostly in the browser. In Glazed theme this experience is integrated with Views and the block system: you can create highly dynamic pages and even dashboards with Drag and Drop, without loosing re-usability of components you build.

Visual Design and Front-end Architecture

Glazed at the core is architected to be a platform for design. Still it's neccessary that Glazed has a visual identity through which it can demonstrate how good Drupal can look right out of the installer: 

Glazed Drupal Theme Main Demo

There are also several demo packs that demonstrate different niche-designs that are built with Glazed.

Bootstrap to the bone

One of my goals with Glazed theme was for everything to be naturally mobile-friendly. The decision to integrate with Bootstrap 3 seems like an easy one but at first it was not. I was always wary of CSS frameworks because they somewhat limit design freedom, whereas Susy and Zen grids are more sophisticated tools that I had always used in the past. However, the overwhelming availability of Drupal integrations with Bootstrap 3, and the excellent documentation and support that comes from the Twitter Bootstrap team sealed the deal for me.

Glazed theme integrates with Bootstrap on many levels:

  • Bootstrap based Drag and Drop page builder
  • Bootstrap views integration
  • Bootstrap fields API integration
  • Bootstrap block class integration 
  • Bootstrap shortcode library
  • Bootstrap basetheme
  • Bootstrap image style and media integration
  • Bootstrap based Drupal Distribution ( CMS Bootstrap )

SASS Bootstrap and a library of CSS Elements

I just love SASS, it makes writing CSS a joyful experience without nasty browser prefixes and futile code repitition. Having an awesome Drag and Drop page builder is boring if you don't have beautiful design elements to drop into your website. Glazed comes with an army of naturally mobile-friendly beautiful elements. To get an idea of what this means take a look at the Motion Box, Time Line and Pricing Table elements in the main demo. These elements can be dropped anywhere in a your webpage and you can edit them without writing a single line of code! This is a one-step process and you get fully customizeable elements.

Icon Box Element

In order to keep track of the design elements and element variations I was coding I felt the need to have more order and logic in the HTML code that marks up the elements. After research in existing CSS namespacing methods I decided on a BEM (block__element--modifier) namespace. 

.stpe-imagebox__figure {
  &.stpe-imagebox__figure--akan {
    .stpe-imagebox__image {
      opacity: 0.7;
    }
    .stpe-imagebox__fig-caption {
      top: auto;
      bottom: 0;
      height: 50%;
      text-align: left;
    }
    .stpe-imagebox__title, .stpe-imagebox__fig-content {
      transform: translate3d(0, 40px, 0);
    }

Improving Drupal's HTML Output

  • Fences
  • html5_tools
  • Metatag

Drupal does not naturally produce the HTML code that frontend-developers will fall in love with. Fortunately, this is easily fixed with a few add-ons. The first is the Bootstrap basetheme, which overrides most of Drupals' templates. This will not only get you nicer formatting but also cool Bootstrap forms and form buttons. Looks great on administrative pages!

To gain even more control of Drupals' HTML I integrated the Fences and HTML5_tools modules. This adds field-level control of HTML output. I integrated the metatag module for better SEO general future-friendliness. Metatags give search engine and other non-human readers a deeper level of information about the pages and structure of the website.

Drupal integrated Drag and Drop page builder

  • Front-end visual page building
  • HTML5 Based.
  • Pages work fine in regular backend WYSIWYG
  • Blocks, Views integration
  • Refined user experience
  • Naturally mobile-friendly
  • MVC with Backbone and Underscore JS

You may have seen drag and drop builders like Visual Composer in Wordpress. Visual Compores is the best selling Wordpress plugin ever. I think the page builder experience in Glazed is even better. More visual, more editable, less shortcodes. In fact, no shortcodes are used. The Glazed drag and drop builder leverages Backbone and Underscore JS. This means that the document (webpage) is the data. All of the controls and metadata are valid HTML. No shortcodes, no processing needed to render a page after you save it.

The UI is also very user friendly. There is a sidebar that contains visual shortcuts to pre-made beautiful design elements. You can drop them anywhere in your page and edit them, make them bigger or smaller. No problem. The grid system is based on bootstrap. With the greatest ease you can make 3 columns, 4 columns, or anything you can imagine within a 12 column grid system. You can easily control for each row individually at which breakpoint (Screen size) the layout will collapse to a vertical, mobile-friendly stack. 

Views, Media and Blocks integration

Our drag and drop builder is not just a vanity tool. It's integrated with Drupal and makes available all Drupal blocks as well as all views. This allows you to create dynamic, complex pages. For example, on sooperthemes.com I could easily re-create and improve the customer dashboard with our drag and drop tool. The dashboard contains several views that show download links and documentation for products that are bought by a user. It was no problem to drop the views into the page and then surround them with drag and drop mobile-friendly peripheral content and imagery.

Managing images is done with the Media module. Images can easily be added, used, re-used and then resized using bootstrap-grid image styles. Moreover, our page builder features an awesome animation engine and a number of preset image effects that help you build an immersive experience. My favorite element is the CSS3  Motion Image box:

Motion Image Box Element

Installation Profile Builder

  • Open source CMS Drupal Distro
  • Auto-download custom selection of features and dependencies
  • I plan to add hosting integration in the future

All these modules, libraries and settings need to be carefully set-up to make all this code work. To this purpose I have built an open source Drupal distribution called Drupal CMS Bootstrap. I have blogged about CMS Bootstrap before so I will skip that and talk about Custom Installation profiles. Drupal distributions are a great way to ship different kinds of Drupal. Unfortunately the way distributions are processed and displayed at drupal.org is very rigid and not enticing to prospective users. What I built at sooperthemes.com is a custom installation profile build interface: http://www.sooperthemes.com/minisites/drupal-cms-bootstrap-custom

Thanks to CMS Bootstraps' autonomous CMS components you can configure a Drupal installation profile that contains only the features you need. Once you make a selection my webserver will download all modues, libraries and patches that are needed for your selected feaures. This service is totally free! The installation profile even contains block/region layout configurations for dozens of free themes, so that all blocks will be in the right region for each installed feature. My server has already built over a hundred custom installation profiles for CMS Bootstrap and I'm actually surprised it's holding up. I hope people will also be interested in buying a subscription for Glazed on sooperthemes.com so that I can buy a new server. I'm not running a trusty but laggy 7 years old AMD Dual core machine.

Community Contributions

SooperThemes loves Drupal and is committed to improve Drupal not only in the premium themes landscape but also as an open source platform. During a year of development for Glazed theme and its backend tools I contributed a number of modules as well as a bunch of patches and the Drupal CMS Bootstrap distribution.

Drupal CMS Bootstrap

CMS Bootstrap is a collection of CMS related components that are enhanced and glued together by the cms_core module. You actually don't need to use the installation profile or cms_core module to use the components, they are all autonomous and you can easily add cms_blog or cms_events to add functionality to any existing Drupal 7 website.

Thank you for reading my case study. If you are still interested to learn more, check out my drupal themes website. I'm also working on a video tutorial that demonstrates the Drag and Drop interface, keep an eye on my blog or twitter or linkedin to get an update for that.

_

Jan 21 2015
Jan 21

This tutorial will showcase how we have made Bootstrap 3 and especially its responsive grid system and integral part of the platform, and will show you how to use some easy tools to make any website component or content mobile friendly!

About Bootstrap 3 in CMS Bootstrap

The Drupal CMS Bootstrap disbitrution has made Bootstrap 3 an integral part of the platform. The main reason we did this is to leverage the Bootstrap 3 responsive grid system. This grid system is not just functional, practical and effective.. it's also widely used, widely understood and very well documented. On top of that, Bootstrap 3 is an active open source project, like Drupal, and also supported very well with Drupal through a basetheme and various modules. This tutorial will teach you about these integrations and how to use them to create awesome responsive websites with ease. This tutorial will focus more on Drupal integration than on the gridsystem itself. For a quick introduction to the grid system check out this tutorial. For real life examples check out our Drupal themes.

2.1 Bootstra p on blocks

Forget about themes with 16 regions, or 25 regions. If your'e using Bootstrap you really only need full-width regions that stack on top of one another. The horizontal division will be provisioned by block classes, with responsive layout switching that is customized for your content, not for your theme (-designer) or for an outdated wireframe.

In Drupal CMS Bootstrap I added the block_class module and added a patch that assists in our responsive designing labours by auto-completing the Bootstrap 3 grid system classes. 

2.2 Bootstrap in Views

To use Bootstrap 3 in views we will use the views_bootstrap Drupal module. Let's take a look at how this module is used to create a Portfolio grid page for theDrupal CMS Bootstrap Portfolio component.

Live demo of portfolio grid.

The views_bootstrap module provides an array of new Views display plugins:

  • Bootstrap Accordion
  • Bootstrap Carousel
  • Bootstrap Grid
  • Bootstrap List Group
  • Bootstrap Media Object
  • Bootstrap Tab
  • Bootstrap Table
  • Bootstrap Thumbnails 

This grid of portfolio thumbnails uses the Bootstrap Grid views display plugin. The Bootstrap Grid plugin allows you to output any content in a grid using Bootstrap's grid html markup. A current shortcoming in the module is that it only allows you to select the number of columns for the 'large' media query. Fortunately, there is a patch for that:

https://www.drupal.org/node/2203111

The Drupal CMS Bootstrap distribution has this patch included and uses it in views to create truly responsive grids, where you can set the number of columns per media query. It works quiet well out of the box. Here is the views format configuration used for the portfolio:

As you can see it's real easy to create responsive views with this Views Bootstrap 3 integration! Without writing any code you can leverage the tried and tested responsive systems that are provided by Bootstrap. The views_bootstrap module gives you a whole set of tools that help you build responsive layouts and widgets using your trusted Views backend interface. This means site builders can rely less on themers/programmers and get work done quicker.

Using custom markup in views

The View Bootstrap module is great at organizing rows of data into responsive layouts, but it doesn't have the same level of support for fields inside a row of data. This is what we did to create a responsive events listing for the Drupal CMS Bootstrap events component:

Drupal CMS Bootstrap Events Component

Live demo of events view.

The events view uses the 'Unformatted list' plugin that is provided by the views module itself. This prints each row of data in a div container. There are 2 ways to make the contents of these rows responsive. One would be to generate node teasers inside the rows, and configure the content type's teaser display mode to use grid classes on the fields. This method will be covered in the next part of this tutorial. For the events view we don't use teasers, we are building a fields view because it gives us more flexibility in the fields we show in our view. Luckily the views interface makes it easy for us to add grid classes right where we need them. First, we will add a row class to each views row by clicking Settings under Format and adding row in the Row class field:

Now we can add responsive column classes to our fields and they will be organized within each row. We simply add classes by clicking each field and editing the Style Settings CSS class field:

The only thing we need to do here is check the Create a CSS class checkbox, and a textbox will appear that allows us to add grid classes to the field. This field uses the class col-sm-6, which makes our event title use 50% of its parent container's width (because Bootstrap uses a 12 column grid) when on a small device. This means that on an extra small device there is not grid class active and the title will use 100% of it's parent container's width, as you can see in the mock-up above. We can't say this method is as easy as the point and click method discussed earlier but if you are familiar with the views interface already this method will become intuitive with a little bit of practice and will allow you to have very fine-grained control over responsive behaviors in your views.

2.3 Bootstrap in Fields

Often you want to organise content fields in a layout. A module that can be of help here is Display Suite, but even with the ds_bootstrap_layouts extension this will give you a limited set of layouts. We can easily build any layout by simply adding bootstral grid classes on fields. This is not to say I don't like Display Suite but since CMS Bootstrap focuses on simplicity I will choose the simplest solution. 'Big' tools like Panels and Display Suite are definitely more appropriate for larger Drupal projects.

To make an example I will start building a new Drupal CMS Bootstrap component. There was a feature request for a 'shop' component, so we will be building a content type as part of a simple component that will help brick and mortar shops display their inventory. First we will create a new content type called Object.  Since Bootstrap columns need to be wrapped in row classes, we are adding the field_group module. Once you have downloaded and enabled the field_group module, you will have a new option 'Add new group' under the manage fields tab of your Object content type. We are adding a group called Bootstrap row using the default widget fieldset. Now drag the image and body field to the indented position under the Bootstrap row field group. This will create a visual indication in the node/add and node/edit interface that fields belong to the same group. Your Manage Fields interface should now look like this:

Bootstrap field group interface

Next we will go to the Manage Display tab of the Object content type. This is where the Bootstrap magic happens. Our goal is to display the body text and image field beside eachother on big device and above one another in small devices. First, we have to create our Bootstrap row group again, this time we add a group named Bootstrap row and make it the 'Div' format. Give our field group the following configuration settings:

  • Fieldgroup settings: open
  • Show label: no
  • Speed: none
  • Effec none:
  • Extra CSS classes: row (you can remove the default classes)

Next we wil drag the Body and Image fields to the indented position under the field group. Now we simply configure the field formatters to use the Bootstrap grid classes of our choice. To add these classes in the Manage Display interface we are going to install another module: field_formatter_class. Once you have downloaded and enabled this module you can go back to the Manage Display interface and you will see an option to add a class on each field. You will now set both the Body and Image field to have the Field Formatter Class col-sm-6. This will create a 2 column layout on devices wider than 768px and a stacked layout on smaller devices. If you are using Drupal CMS Bootstrap, you can set the Image style of your image field to Bootstrap 3 col6. This will resize the image to exactly fit the 6 column grid container.

Your Manage Display tab should now look like this: 

Bootstrap field group interface

Now if you create a node using your new content type it should look similar to this:

Bootstrap enabled node display

Using our new fieldgroup tool we can easily add bootstrap rows and columns to any content type, and since classes are listed and edited in the Manage Fields interface, it's relatively quick and and easy to manage per-node layouts. At least it's a step up from managing a ton of node templates.

2.4 Bootstrap in Content: Shortcodes

Sometimes you (or a client) just want to create a special page that needs more attention than other pages of the same type. Unfortunately there aren't any free tools that give our clients a true WYSIWYG experience for creating responsive Bootstrap grids. If you know one please let me know! Our fallback option is the bs_shortcodes module that I ported from a Wordpres plugin. This module let's you add nearly all Bootstrap components, including grid elements, using a WYSIWYG-integrated form. 

To see the power and flexibility of what you can do with these shortcode check out this demo page:

http://glazed-demo.sooperthemes.com/content/responsive-columns

This system leverages the Drupal Shortcode API, which is a port of the Wordpress shortcode API. The Drupal CMS Bootstrap distribution ships with a WYWISYG component that includes CKEditor 4 with the neccesary Shortcode API and shortcode-provisioning submodules. Since the configuration of this setup is complex and beyond the scope of this article I'm just going to assuming you are using Drupal CMS Bootstrap and ready to use the WYSIWYG with Shortcodes integration.

To create a simple 2 column layout like in the previous examples we first add a row shortcode:

Then we select the column shortcode and find the code that corresponds to 6 columns on a small devices:

Now if we use 2 6 column shortcodes and put in the same content used in the Field and Field Group tutorial in will look like this in the editor:

After saving the page it will look exactly as the Test Object page we created in the previous tutorial. I admit that shortcodes are a rather crude tool for a complex problem but anyone who is willing the learn the basic principles of a 12 column grid system will have a huge amount of flexibility and capability in creating responsive content. When you combine the Bootstrap 3 grid documentation, the WYSIWYG integration, and for emergencies the documentation of the Wordpress plugin you already have a fully documented tool for savvy clients who don't want to deal with raw HTML code. Shortcodes don't seem like the most userfriendly tool but I've seen clients pick it up quickly and appreciate the flexibility it gives them in organising their most important pages. In the future we migh see improvement in this area from tools like Visual Composer and the Drupal-compatible alternative Azexo Composer.

In Part 3 of this tutorial series I will write about using shortcodes as a site building tool and demonstrate what you can do with shortcodes in a real life Drupal CMS project. To get a sneak preview of the shortcode elements I will be using, check out our Drupal themes.

 

Jan 07 2015
Jan 07

With Drupal CMS Bootstrap you can build a beautiful responsive CMS website in 5 minutes

Drupal CMS Bootstrap

That basically covers the primary goal of the CMS Bootstrap distribution: to make Drupal easier and less intimidating to new users. Drupal has a problem: it is relatively difficult to set up and has a steep learning curve. This impedes Drupal's growth as a small-business CMS and by extension it is costing the Drupal community as a whole precious talent: beginning developers, designers and enthusiasts who learn Wordpress and develop awesome plugins and themes for Wordpress because it was too difficult to get started with Drupal.

Another project that tries to make Drupal into something more comprehensible is Backdrop CMS, but I believe Drupal can be user-friendly and developer friendly without needing a fork. While Backdrop focuses on creating a more newbie-friendly code architecture I'm trying to focus on awesome tools Drupal offers to 'develop' websites without writing any code. 

If you are reading this, you probably at some point installed Drupal and realized that it's powerful modular architecture and contrib modules make it a way more extendable and customizable tool than say, Wordpress. We love Drupal because in many ways its better than the competition, better than Joomla, Django, sharepoint or Wordpress. Still, somehow even very prominent Drupal agencies choose to build their site in Wordpress. And they are right, for a small responsive website, you can download and customize a themeforest theme and be done much quicker than with Drupal. What does Wordpress have that we lack? A built in WYSIWYG editor, handy shortcodes, WYSIWYG site building tools... and an enormous selection of premium themes. But it doesn't have a fine-grained permission system, views (unless you shell out 100 dollars for a premium plugin), webform etc.

In flexibility and extendibility Drupal is still better than Wordpress, but I think Drupal doesn't have to lag behind in user-friendliness and that's why I built this distribution; to offer fully configured CMS components and responsive design out of the box. Building this distribution was a challenge but it also showed me that Drupal has potential outsmart Wordpress in the areas where Wordpress is currently better. A common complaint about themeforest Wordpress themes is that their installations are heavy and slow. Thanks to the configuration-in-code architecture of CMS Bootstrap I was able to make a custom-build interface so that you only get the code you really need:

http://www.sooperthemes.com/minisites/drupal-cms-bootstrap-custom

Just pick the features you plan to use in your project and download a customized build. 

What do I get?

At a Glance

  • Responsive Design
  • Fully configured CKEditor 4 WYSIWYG
  • Light and heavy WYSIWYG profiles
  • Media library for content images
  • Shortcodes for graphical elements
  • Shortcodes for complete Bootstrap 3 support in content
  • Image resizing that matches Bootstrap grid
  • Integrates Views and blocks with Bootstrap 3
  • Blog component*
  • Events component
  • Event registrations component
  • Portfolio component
  • News component
  • Contact form component
  • Demo content
  • SEO Optimized
  • Frontend and backend performance optimized

*In CMS Bootstrap a component is a fully configured feature, often including a content type and one or more views and whatever else is needed to create a user-friendly, good looking website component.

Author Empowerment

WYSIWYG

Especially for beginning Drupal users, adding a WYSIWYG editor is a difficult task. Even experienced Drupal professionals can be surprised by some the capabilities of modern WYSIWYG systems like CKEditor 4. WYSIWYG editors are an important part of the author experience on your website and  CMS Bootstrap has ships with 2 fully configured WYSIWYG profiles. There is a 'full' profile that offers a wide range of rich content tools and a 'simple' profile that shows a toolbar with only simple text editing tools. 

Shortcodes

Shortcodes allow you to create rich content and layouts without using any HTML or CSS code. Using WYSIWYG integration you can even generate all the codes without having to remember  the codes. This is great for clients who want to have control over columns and buttons in long pages but it can also be great  for site builders who know HTML and CSS. I personally prefer to use shortcodes over HTML to great bootstrap grids within content because using the WYSIWYG button I get a form that listsall the breakpoints that bootstrap uses and I can easily fill in column sizes that fit the content I'm working on right now.

Other shortcodes I like to use as a site builder are Bootstrap tooltips, popovers, carousels and other interactive elements, because I don't know all the  syntax of these elements by heart. It's great to just highlight a text or image in CKEditor and then use the shortcode button to create a popover bubble with additional information.

Media Library

A media library is great because it allows you to re-use assets on your website without having to re-upload them for every page. The Drupal media module is pretty incredible, it pulls together uploaded files, it can integrate media from many internet sources including youtube, media, soundcloud etc. It also gives you a nice overview and history of files that are part of your website and gives you a sense of control over content added by yourself and other contributors on your website. The downside of the media module is it's complexity: It was a lot of work to create a nice basic media library experience in CMS Bootstrap and the finaly product uses the latest development branch and a number of patches to create a smooth user experience and integration with Bootstrap 3 column sizes in the image resizing interfaces. Luckily for you, this is now available to you in the CMS WYSIWYG component in Bootstrap. 

Site builder tools

Plug and Play CMS Components

Drupal CMS Bootstrap is built as a core distribution with add-on components. This architecture was chosen because from my experience with other Drupal distributions (and wordpress themes) I know that you often get much more features than you need. The result of this is not only a slower, heavier website but also an interface that is more complicated than it needs to be. If you want a website with a blog and a news section, you need need to have modules, content types, blocks and views for events and portfolio content. Your administration interface is cleaner and simpler if you only install the modules you will actually need, and that is what the custom build interface is for.

Bootstrap 3

Nowadays any website that isn't responsive is leaving money on the table. More and more internet users access websites on their portable devices. Google has also started integrating mobile-friendliness in their results page rankings so possible you are even missing out on desktop users when your site is not mobile friendly. This is why CMS Bootstrap has made responsiveness an integrated part of the project. The powerful Bootstrap 3 responsive grid system is used throughout the Bootstrap components: views, fields, and blocks are responsive out of the box.

The WYSIWYG component also includes an extensive bootstrap shortcodes library, giving you access to all Bootstrap 3 components right in the WYSIWYG.

If you are not familiar with Bootstrap 3, you can still use Bootstrap together with a custom theme and custom grid. Being a designer myself I used to dislike any grid frameworks because it limits what you can do creatively, but the 12 column grid in Bootstrap 3 is divisible by 2, 3, and 4, making it a hugely practicaly tool to translate any content smoothly to devices of all sizes. I previously used custom grid system tools like Susy and Singularity but now I feel confident I can create anything I need with the Bootstrap 3 system. Bootstrap isn't the best choice to create that unique 7 column layout that you have in mind for some funky design concept, but really when is the last time you actually used a unique layout system for an edgy design concept? It's not worth the hassle. 

Themes

Works with any theme, 25 officially supported themes

The extra benefit you get from the officially supported themes is that I tested them and added code to the installer that puts blocks in the right regions. Bootstrap is built to look as good as possible out of the box but to be as extendable as Drupal itself. This means you can develop themes (and modules) for CMS Bootstrap as you would for any Drupal website. You can build a theme with or without Bootstrap 3 for Bootstrap, but I would recommend giving Bootstrap a shot, it has proven to be a big time saver for me.

Premium Themes

Premium themes, especially the Glazed theme are available to take your Bootstrap site to the next level, on a small budget. The Glazed premium theme is built for and with the CMS Bootstrap distribution. It offers additional features including advanced theme options, premium shortcode elements and an advanced mega menu. The Glazed project and the CMS Bootstrap distribution were developed together, and I hope that revenues generated from the premium themes club allow me to keep improving Bootstrap, and to port it to Drupal 8. 

SEO done right

Drupal's SEO is not bad out of the box, but with additional modules and metatag configuration you can have top tier SEO, on par with the popular Wordpress+Yoast combination that is used by many SEO professionals. CMS Bootstrap comes with automatic semantic path aliases and redirects, but also implements more advanced techniques to Drupal. For instance, the metatag module is used to limit duplicate content problems and focus your link power on the right pages. In the Events component this is done by putting no-index metatags on the Events archive views, which basically only contain duplicate content of your event pages. This makes sure your link juice is spent on actual event pages.  

100% Drupal

The CMS Bootstrap project is a Drupal distribution. Distributions are installation profiles that install Drupal + a number of features that relate to a specific type of website. For example, for e-commerce there is Drupal Commerce and for advanced group/community websites there is Drupal Commons. Dries wrote about distributions in 2006:

The fact that Drupal 5.0 will support distributions is big, and most people have yet to see its full potential. I don't think that any other Open Source project has done something like this before -- or at least, not on the scale that we might end up doing this.

Dries Buytaert

Clearly there were high expectations of distributions in Drupal, even in 2006. From what I can see the concept of distributions did not really catch on as much as expected. I think this is in part because the framework to create distributions needed to mature but also because Drupal.org is not offering a good portal for distributions. That's why I chose to create a separate interface for composing and downloading CMS Bootstrap. The one Distribution that did breaking through the 10.000 active users barrier is Drupal Commerce Kickstart, and it's easy to see why. They put a ton of effort into both the distribution and the installer. If CMS Bootstrap gains some traction I hope to develop it into something of similar quality.

I will try to regulary write more tutorials to show you how Bootstrap can be used to create awesome websites like civinex.nl and lorenagarcia.nl in record-breaking time. I promise the next tutorials will also be more tutorial-esque than this introduction.

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