Drupal 8 which has now become the most leading drupal ever build and surely it will add more feature compare to other CMS which are out there. Technologies like Symfony, YAML, Twig, and Backbone.js are the main power of Drupal.

Theming in drupal has undergone a lot of changes since drupal 7, especially when talking about the twig template - a known template engine for PHP framework.

Many things has changed from Drupal 7 to Drupal 8 and we will discuss it in the following sections.

• mytheme.info.yml
  The .info file which was used in drupal 7 to define the theme has been changed to .info.yml extension in drupal 8.
  YAML ()
   
• mytheme.libraries.yml
  In this configuration file you will have all your stylesheets and javascript libraries included.
  Note: It will store the path of the css and js file which is to be used in your project.
   
• mytheme.breakpoints.yml
  This is the file to set up the breakpoints of the responsive custom theme.
   
• mytheme.theme
  This is the file where all of the preprocess functions is stored. Similarly to the template.php file used in drupal 7
   
• Template (*.html.twig)
  The template pages like page.html.twig, html.html.twig has been introduced in drupal 8.

Theme folder new structure

Below is the screenshot of newly introduced theme folder structure in drupal 8 to be followed.

mytheme.info.yml

mytheme.info.yml file is similar to like .info file , which contains the information about the theme name, description , libraries regions ,settings etc…

name: mytheme
It contains the human readable name that will appear in the Appearance page in your drupal site. The name will be displayed in the theme list.

description:’A drupal 8 theme’ :
A short description of the theme that will appear in the appearance page.

type: theme
Keyword to differentiate between module, theme or profile.

package: Custom
Main function of package is that it allows to group the themes together which can be seen in the appearance page of your drupal site.

base theme: Classy
It act as an inheritance like in Object oriented programming where a child inherits the property of parent , similarly here our theme will inherit the properties of the classy theme.

core: 8.x
The core specifies the version of the drupal that your theme is compatible with.

screenshot: screenshot.png
The screenshot of the theme will be displayed on the appearance page.

libraries: mytheme/global-styling
The libarary is used to asset library which contains both CSS and JS to all the pages. It adds both the global and the custom CSS and JS file. We have used mytheme/global-styling, here mytheme (key) is the name of the custom theme and global-styling (value) is the reference to the library name that we use to define the assets.
We will discuss more about this section little later.

regions:
Regions are nothing but naming the sections in the webpage that will be formatted in the template page (page.html.twig) ...
e.g , header : Header :

Here on the left is the machine name which can be used for formatting and on the right is the human readable name for the regions that has been defined.

mytheme.libraries.yml

The file contains the location of the asset where the CSS and JS are located.

Below is the basic demonstration of the .libraries.yml file.

Here we have two asset containers, global-styling and custom-assets:

While including the libraries the format should be like

libraries: - mytheme/global-styling - mytheme/custom-assets

Proper spacing should be kept in mind as YML follows text indentation so the spaces should be specific.

Each of the CSS librarry should be written in this format -

css: theme: css/style.css: {} css/layout.css: {} css/print.css: { media: print }

Here we have added three css files style,layout and print.

Similarly the JS file is also included with the proper text indentation.

js: js/mytheme.js: {}

Here is subfolder of the css and js file which is included in the asset library

mytheme.breakpoints.yml

Breakpoints are the points where the theme will adjust its layout based on the browser width. Breakpoints are mainly given for the mobile tab desktop view . These breakpoints can be achieved through media queries in CSS.

In order to setup this configuration we need to create file mytheme.breakpoints.yml

In each label we have assigned a unique name as mytheme.mobile, mytheme.tab, mytheme.desktop with the following properties:

• label
  Readable name for the breakpoints
• mediaQuery
  Proper media query syntax which defines at what point the breakpoint should occur
• weight
  The order in which the breakpoint should occur
• multipliers
  Supports pixel resolution modifiers.

mytheme.theme

This file has the same functionality as template.php in drupal 7 . So all the hook preprocess functions are added here.

Below is an example of preprocess function for adding classes in the body tag when the page is loaded.

Here layout-two-sidebars css class will be added to the body when there is both the sidebar present in the page.

Twig template file

Twig templates are introduced in Drupal 8 replacing the php templates which was used earlier in Drupal 7 to theme the pages, nodes , taxonomy terms etc.

Given below is an example of twig template engine which is used as a base theme in classy.

Twig Syntax

{% ---%} : Checks the logical code
{{ -- }} : Print the region

This is just the part of the page.html.twig file to give demonstration of how the twig file works. To know more about twig templates you can visit the site twig.sensiolabs.org

This is list of Twig template files which can be modified for custom theme

HTML (template)

• html.html.twig

Page template

• page.html.twig
• page–node.html.twig

Regions

• region.html.twig
• region–.html.twig, ie: region–right-sidebar.html.twig

Blocks

• block.html.twig

Nodes

• node.html.twig

Taxonomy terms

• taxonomy-term.html.twig

Comments

• comment.html.twig

Maintenance page

• maintenance-page.html.twig

Search result

• search-result.html.twig

Locating Template Files with Debugging

While adding the content we do need to override the template files. It’s important to know which template should be overridden to affect the theme.This can be done through by enabling the theme debug option in services.yml file.which is located in sites/default/services.yml

Search for twig.config and change the value of debug to true

And this wraps it up for now. In the process of experimenting I learned a lot about creating a custom theme in drupal 8 and working with twig. To develop a custom theme I will recommend to is to take classy or bartik or any core theme as a base theme so that customizing and overriding the template can be done easily.

I will be writing a series of article on Drupal-8 Headless. This article will focus on simple headless hello world. We will first learn how to create a Hello World Module in Drupal-8. Oh! but this hello world page will return JSON Data :-) Then we will be creating a NodeJS+Express project which consume the JSON data from Drupal and display it.

Node JS

It’s like Apache server for PHP. Just like Drupal Application needs Apache or Nginx. For running a Javascript Application on Server we require Node JS to be installed. Read more about installing and using Node JS.

Express JS

Express JS is a server side Javascript framework that provides features including server side routing, MVC, etc.

1. Install a standard drupal-8 profile
2. Create hello world module
   Create a helloworld folder in modules directory.
   Create a file name helloworld.info.yml with content
   Create a file name helloworld.routing.yml with content
    

   name: helloworld
   type: module
   description: Hello World JSON Return
   core: 8.x
   package: Other
       

   Create new directories src and src/Controller. Create file src/Controller/DefaultController.php with below code

   headers->set('Content-Type', 'application/json');
       return $response;
     }
   
   }
   

3. Enable the Hello World Module in Drupal
4. Create a new Node Project (say meand8)
   From your terminal type:

   $ mkdir meand8
   $ cd meand8
   $ npm init # initiate the node project. Choose all default options. 
   $ npm install express —save # add dependency on express js.
   
   

   It will create a file named package.json with content similar to:

   {
   "name": "meand8",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
   "test": "echo \"Error: no test specified\"&& exit 1"
     },
   "author": "",
   "license": "ISC",
   "dependencies": {
   "express": "^4.13.3",
     }
   }
   

   Create new file index.js with following content

   var express = require('express');
   var http = require('http');
   var app = express();
   var http = require('http');
   
   /* Assuming that you can access your drupal via http://localhost/d8 
   Make a http get request to drupal hello world page, that returns a JSON */
   
   http.get("http://localhost/d8/helloworld", function(res) {
     console.log("Got response: " + res.statusCode);
     res.on("data", function(chunk) {
       http_req = "" + chunk;
     });
   }).on('error', function(e) {
     console.log("Got error: " + e.message);
   });
   
   /*Create the landing page of Express JS App and return the Content from Drupal Hello World Page
   app.get('/', function(req, res) {
       res.send(http_req);
   });
   
   app.listen(3000);
   console.log('Listening on port 3000...');
   
   

5. Start your node server

   In terminal type
   $ node index.js
   Listening on port 3000...
   Got response: 200
       

6. Check in browser localhost:3000

Drupal’s power lies in its flexibility, and the fact that developers can create complex content models.

An admin interface helps developers manipulate the backend content repository, to reflect changes in the front-end framework, and vice-versa. This tight coupling between the frontend and backend have been used to develop some of the best websites, e-commerce applications and web-apps. Over the years, Drupal has emerged as a very powerful framework.

However, this approach was more relevant a decade ago when mobile applications were still in their infancy, and when enterprise applications worked in silos without too much interaction between them. But a lot has changed since then. Today, the mobile web is changing the way business is done.

Simply replicating a part of the desktop application on a mobile app is not only costly, but also robs the app of its power. A more efficient and cost-effective approach is to have the backend content repository deliver content to a variety of powerful applications working on various devices. This means, a single backend Drupal CMS should be able to push content to a mobile app, and any other enterprise application at the same time. Using Drupal in this way is what we call “Headless Drupal”.

The necessity of such ‘cross-platform publishing’ is what is driving the popularity of Headless Drupal or decoupling of the backend CMS from the front-end framework. But this is not the only reason Headless Drupal is relevant but equally important is the fact that creating unique user-experience is differentiation strategy for business organizations.

A whole new set of front-end technologies have emerged using which we can create faster, responsive and interactive apps that offer a rich experience to the end-user. Front-end developers need not know the intricacies of backend drupal programming and still they can harness the power of Drupal’s powerful content-modeling capabilities, and its equally effective editing interface.

So how is Headless Drupal different from regular coupled CMS systems?

A traditional CMS has three components to it:

1. The database which stores and maintains the content
2. An admin interface that editors can be use to manage the content models in the database
3. The templating layer: basically front-end that is use to implement unique look and feel for the website

In a Headless Drupal website or web-app, the content for the site/app is accessed using an API through formats such as JSON or REST. And front end specific application framework like Angular, Backbone, Ember or Knockout delivers the API output onto the front-end template layer. We do not use default Drupal templating layer to display the data or content.

So when should we go for Headless Drupal?

• If you are building your website where content can be consumed by different applications and repurposed based on context. Headless Drupal will allows you to have different architecture for editorial system and the publishing system. You can event have one common editorial system for multiple publishing system.
   
• You want to rely more on front-end architecture for scalability. And it makes more sense as having no heavy CMS in the delivery architecture means less of server processing. Static HTML files are easier to handle anyway from scaling perspective.
   
• You are building an application where managing content is just one part. CMS is secondary function of the larger application.
   
• Or sometimes you want to create two different application where one is used to create content like we do in staging environment. And after final approval, content is published to another publishing system. You do not require front-end for staging environment where content is created and reviewed only.

Headless Drupal is not without its share of adversaries or criticism. However in certain scenarios, its benefits far outweigh its drawbacks. In a world where user experience is critical for long-term success, decoupling CMS and front-end, which is what Headless Drupal achieves, is no longer an option, but a necessity.

With the evolution of Headless Drupal, Drupal is moving towards on being a preferable content storage to serve the data. But how is Drupal when being used as a Front end consuming remote data instead of proving it?

In one our recent project we have to achieve the same. Drupal is being used to display the remote data which is being provided by RESTful APIs. The catch was the data that was being consumed should not be saved in the Drupal database. So it was purely used just to display the data. Not only that we need to use the consumed data in views, and panels.

There are a few ways of doing this. One being using drupal_http_request function to consume the data and use it. But that would require a lot of customizations and in the long run would be very difficult to maintain.

In comes Web Service Data module

According to its documentation:
“Web Service Data is a collection of modules allowing you to interact with web services using entities and fields in Drupal.”

It was a perfect match for our requirement. The module will consume the data from Web Services and display it without saving any of it in the database. Plus it have fields, views and panels integration. So it was a win win situation all together.

So I am going to discuss how to use the Web Service Data module to consume Web Services and use them just as normal fields.

Enable the following modules:

1. Web Service Data – Parent module to handle all the web services.
2. Web Service Data Configuration – It enables to add the web service configuration from where we will fetch the data.
3. Web Service Data Fields – Attach the power WSData module to fields.
4. Web Service Data Fields Views Handlers – View handler for fields which are powered by WSData module.
5. Web Service Fields Storage – Storage controller for fields to load the data.
6. WS Data Demo – A demonstration on how to the module in action.

Once enabled if you go to “admin/structure/wsconfig/type” you will see a configuration type being added by the demo module.

In the Web Service Configuration section we define the endpoint of the service.

Next we go to “admin/structure/wsconfig”. The demo module has added a configuration for the type prescribed above. The configuration defines what CRUD operations for the service along with the method for it.

The demo module have also added a content type “Linked Data” with a title field and body field. The body field is provided by Web Service Data Fields module. In “admin/config/services/wsfields_storage” you can see the field being declared and configured to fetch data from the web service configuration.

So, we create a content for Linked Data. In the form we just need to enter the title. Lets say we enter “Drupal”. Once the content is saved you will be taken to the node page where the body of the content will be filled up by the Drupal wikipedia page.

Now let's use this module to fetch some remote data and publish it on our Drupal site. For this lets say we have an endpoint called http://examplesite.com/api/article/{article_id} which gives us details about an article.

1. Go to “admin/structure/wsconfig_types” and add a Configuration type.
2. Next we add a web service configuration for the type. We select the EventCampus Articles configuration as our endpoint.
3. Add the required fields you want to fetch from the web services in “admin/config/services/wsfields_storage”. You can select what type of data you want to fetch and to which entity you want to attach the data. In the Web Service Remote Data Key you need to specify which field will hold the argument to the web service call. Like in our case title was the holder for the remote article_id argument.
4. Now when we create a content of type article we can see the data pulled from the remote web service and being displayed in the node page.

This data can be used like default node fields in Views or Panels without any problem.

Currently once a few types of fields can be handled using the WsData module. But you can easily create handler for other fields which are not there like email, links, etc...

Conclusion, it’s a great module when we want to display data fetched from web services with saving in Drupal database. It comes packed with a good API system which we can extend to use it even in custom entities.

We are happy to announce that we are running Drupal training sessions on Saturday, 21st Nov as part of the Global Training Days. The initiative is run by the Drupal Association to introduce newcomers to Drupal.

Come and join us to learn about what Drupal does and how it can help you. We will learn about Drupal and build our first website live.

What is a Drupal Global Training Day?

Drupal Global Training Days is a worldwide initiative to increase the adoption of Drupal. All across the world, people are teaching and learning Drupal, and sharing that open source love.

What is it? 

It's a full day introduction to Drupal. Attendees will leave having successfully built a Drupal site. Part of the Drupal Global Training Day initiative by the Drupal Association.

What we are going to do -

1. Install Drupal 8 using Acquia Cloud - https://www.acquia.com/drupal-8
2. Familiarize ourseleves with the new User Interface and options
3. Learn about how to create content
4. Experiment with the inbuilt views as well as image handling
5. Create new blocks and understand about regions
6. Manage users
7. QnA
8. Celebrate D8 release

Whose it for? 

• It's for those interested in taking up Drupal as a career path.
• Web developers/designers willing to get started with Drupal.
• Project managers managing or considering Drupal projects.
• Decision makers evaluating Drupal. 

Cost? It's FREE. Venue provided by Valuebound.

WHY IS THIS SESSION FREE?

Introducing Drupal among students and amateur designers free of cost is one of the many ways by which we thank this open source community.

Valuebound Interactive is solely dedicated in helping organizations and individuals to adopt Drupal in their operations in the most effective manner. At Valuebound, we believe in giving result oriented training sessions which will help you to build impeccable websites.

Limited availability to ensure personal guidance throughout the day.

Valuebound celebrated 69th Pre-Independence Day Celebration cum Ethnic day with lots of fun wearing traditional dresses,decorating office in the spirit of Independence Day with tri colour balloons & Indian flag, followed by some group activity & Pizza party.
 
It was real fun seeing the amount of participation & Enthusiasm in office.

Proud to be Indian!

I am running my machine with nginx & php 5.6, First make sure that you have already installed Xdebug. We can check this with php version command

$ php -v

If you see ‘Xdebug v’ that means XDebug installed. If you do not see then install XDebug using PECL

$ pecl install xdebug

If the extension is added to your php.ini file automatically, remove the following line:

zend_extension_ts="xdebug.so"

And replace it with:

zend_extension="/usr/local/php/lib/php/extensions/no-debug-zts-20131226/xdebug.so"

Restart your nginx and confirm XDebug is installed by checking php version OR you can also check with phpinfo in the browser.

Note =: to find php.ini or xdeboug.so use $ locate or check phpinfo for php.ini location.

How to configure XDebug for PhpStorm ?

Open PhpStorm -> File -> Default Settings -> In the search box search with ‘debug’

Change ‘Debug port’ to 9001, apply and ok.

Open File -> Default Settings -> Search for ‘IDE Key’

Set IDE key as ‘PHPSTORM’, Apply & OK

Now we need to add following XDebug values in php.ini, restart nginx & php-fpm

xdebug.remote_port=9001
xdebug.remote_enable=1
xdebug.idekey=PHPSTORM

How to Configure Xdebug for Google Chrome ?

Enable google chrome extension Xdebug helper

Once you have enabled extension then you need to add Debugger bookmarklets for chrome. Go to https://www.jetbrains.com/phpstorm/marklets/ page & Generate XDebugger bookmarks

Note : IDE key should be PHPSTORM, as we set in PhpStorm settings.

Now Drag & drop - Start debugger & Stop debugger to chrome bookmarks Bar. You should see the screen like below

Test debugging with Breakpoints for drupal 7

Now it’s time to debug our drupal 7 site with phpstorm & chrome

Open PhpStorm with drupal 7 project & click ‘Start listen for PHP Debug connections’ (These option are at Top Right corner)

Now open google chrome browser & click on ‘Start debugger’ in the bookmark toolbar.

Now add breakpoint in index.php file in PhpStorm.

Then again visit chrome and load any page of these project (localhost/drupal7). For the first time phpstorm will ask for confirmation dialogue box to accept connection from google chrome. Once you accept it, you will see debug information like below.

Now you can debug by putting multiple breakpoints on your code.

Valuebound conducted ‘Drupal in a Day’ workshop at Brindavan College of Engineering on August 11, 2015. 

The one day workshop comprised of one hour awareness sessions and four hours  of hands on learning about installing and configuring Drupal, an open source content management system. The response from students and faculties were encouraging throughout the session

Brindavan College of Engineering’s Management extended their full support to our one day workshop. The workshop witnessed an attendance of more than 160 pupils from B Tech and MCA Final Year. The session has reportedly impressed professors and students in Computer Science faculty, as they openly expressed their desire to take up Internship project on Drupal CMS. 

After the completion of workshops, many lecturers and students asked about a possible internship and project which can be given by on various Drupal companies.

Bangalore Drupal User Group in collaboration with Valuebound & TIME Inc India will be conducting a free Drupal training on Global Drupal Training Day, Sat, 29th Aug.

What is it?

It's a full day introduction to Drupal. Attendees will leave having successfully built a Drupal site. Part of the Drupal Global Training Day initiative by the Drupal Association.

Whose it for? 

It's for those interested in taking up Drupal as a career path. Hobbyist or entrepreneurs who wants to learn site building on your own.

Cost? It's FREE. Venue and lunch provided by TIME Inc India.

Venue

Time Inc.
RMZ ECOWORLD, PLOT C1, CAMPUS 8A, 5TH FLOOR OUTER RING ROAD BENGALURU, INDIA - 560103
Phone: +91 80 7105 7100

I have been working on Drupal 7 for almost two years now. During these two years I have worked on many hooks but hook_menu_alter() hook is the one of the mostly used one. Today i going to explain my experience with this hook.

Change theme of particular page/menu:

I have discussed this one of earlier post in detail. There we have used hook_custom_theme() hook to change theme on particular page. Instead of this we can also use hook_menu_alter() as another way to achieve same feature.

/*
 * Implements hook_menu_alter().
 */
function custom_module_menu_alter(&$items){
  // Change 'node/add/page' page to admin theme (Assume by default node/add page uses default theme)
  $items ['node/add/page']['theme callback'] = variable_get('admin_theme');
}

Change title of page/menu:

Menu provides page titles. If we are in ‘node/add/page’ then we see page title as ‘Create Basic page’ but what if we need custom title like ‘Add page’. We can achive this using below custom module.

/*
 * Implements hook_menu_alter().
 */
function custom_module_menu_alter(&$items){
  // Change 'node/add/page' title to 'Add page'
  $items ['node/add/page']['title'] = 'Add Page';
}

Customize accessing a page/menu:

For many pages/menus we restrict access to different users or on conditions. Let’s say we want restrict ‘user/register’ page in particular times.. I mean no registration will be done in 12AM - 06AM.

/*
 * Implements hook_menu_alter().
 */
function custom_module_menu_alter(&$items){
  // Restrict 'user/register' page in 12AM-05AM
  $items ['user/register']['access callback'] = '_MY_MODULE_time_access';
}

/*
 * Access callback function to restrict user registration in particular timings
 */
function custom_module_time_access(){
  // Get current time hour like 0,1,2,3....23
  $current_time_hour = date('G');
  
  // if current time is between 0 & 5 then return false
  if($current_time_hour >= 0 && $current_time_hour <= 5 ){
    return false;
  }
  return TRUE;
}

Create duplicate page/menu:

We can also use hook_menu_alter() hook if we want to create a duplicate page, a page with same functionality but with different url. Let’s say we want a url ‘add/page’ which acts same as of ‘node/add/page’.

/*
 * Implements hook_menu_alter().
 */
function custom_module_menu_alter(&$items){
  // Copy ‘node/add/page’ page to ‘add/page’
  $items ['add/page'] = $items ['node/add/page'];
}