Feeds

Author

Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough
Jan 21 2021
Jan 21

Mobile app development is not rocket science in today's day and age. Making a good mobile application, however, is a process that requires a very lengthy pre-planning process. It could be as simple as launching the IDE, putting a few items together, doing a quick round of screening, and uploading it to an App Store, all achieved in half a day's work, to create your mobile application. Or you can render it a deeply engaged process involving comprehensive up-front design, QA testing on a range of platforms, accessibility testing, a complete beta lifecycle, and then various forms of deploying it. Your vision is given form by the direction you chose. With that said, here is a look at the lifecycle of app creation and the priorities and obstacles along the way.

1. The Research

Even if yours is only for getting a mobile app presence, every app development starts with an idea. Refine the concept into an application on a solid basis. Make sure that your initial research covers your buyer persona's real demographics, motivations, activity trends and objectives. Keep the end-user in mind during each point of the process. Now, try to think of the lifecycle of your client, until their features are pinned. They need to be obtained, transformed, maintained and their loyalty nurtured after you meet them. In the end, you can understand how the digital product would be used by the client. Doing this will put you on a solid footing at the very beginning, and your transparency will give you and your investors much-needed confidence.

This phase is critical because you lay down the required groundwork during this phase for what is to come next. Before heading on to the next step, do your bit of intensive studies and strategizing. And evaluating competition is another essential part of this point. A thorough review of the software of your rival can assist you to find out what features are lacking in your software so that you can incorporate it into your app to make it pop out.

2. Wireframing

The next step is for the app to be registered and wireframed. While time is not on your side at this stage, it allows you to uncover usability problems by actually drawing thorough sketches of the envisaged product. Sketching does a great deal more than just tracing the moves. It can be a strong instrument for cooperation and interaction. Wireframing will help refine the concepts when you're finished sketching and organise all elements of the design correctly. In this initial step, you can resolve any technological limitations found in the context of back-end development. Now, try to build a better picture of how a working app can fuse the suggested designs and ideas. To show the relationship across each screen as well as how the users can move through the app, you can also establish a roadmap or a template. Look for ways to integrate the brand, concentrate on the user experience and take into account the variations in how people use a mobile phone app and a mobile browser.

3. Technical Feasibility Assessment

Now though, you may well have a good understanding of the graphics, but you must still take into account if the back-end frameworks would be able to maintain the interface of the app. You need to gain access to public data by accessing open APIs to know if the concept of your application is technologically possible. There will be various specifications for an app, based on its size (smartphone, tablet, wearables, etc.) as well as the system (iOS, Android, etc.). The team will have fresh concepts for the app by the conclusion of this phase or have concluded that some of the preliminary functionality is not feasible. Brainstorm a little at this stage, ask questions, and check the status.

4. Prototype

Build a simple prototype. The keyword here is Rapid. Before and until you contact the Software and see how it functions and flows, you can't fully grasp the touch experience. But, to see if it works with the most popular use case, create a prototype that brings the app idea into the hands of a user as soon as possible. For this step, use rough and not detailed wireframes. If you are bringing stuff in the right direction, this will help you see. Include in this phase the stakeholders, enabling them to access the prototype will offer you their input and apply it in your work. And, also, the prototype will provide the first look at your app to various stakeholders and will help you verify the data you have collected.

5. Design

You can plunge into programming once you get this phase-out of the way. The connection between design elements is architected by your user experience ( UX) designer, while the user interface (UI) designer creates the app's look and feel. With its various review steps, this is a multi-step process. Blueprints and visual direction are what you get, reminding the engineers of the final product envisaged and how interaction can shift, feel and flow. This design process can be done in a single afternoon or can take a team a whole lot of hours, depending on the project scope and app budget. And by playing around with the layout of control, buttons and other graphic cues, remember to make several variations of a computer. The more your product differs, the greater the chances that your UX will be original. Designing applications can prove to be a multi-step process, and the results should be simple visual instructions that provide the final product with an abstraction.

6. Develop

Generally, the production process begins very early on. In reality, a working prototype is created after an idea gets some maturation in the conceptual stage, validating functionality, assumptions, and helping to provide an understanding of the scope of work.

The app goes through a series of phases as the production progresses. The core functionality, while present, is not verified in the initial stage. Seeing that the app is very buggy, there is no non-core functionality at this stage. In the second level, most of the proposed functionality is implemented. Ideally, the software has gone through light testing and bug fixing, but there may still be some problems. In this step, for further testing, the app is released to a certain group of external users. The app will pass to the deployment stage after the bugs in the second stage are patched, where it is ready for release.

Make note of the agile approach if yours is a complicated task where user requirements change frequently. Flexible preparation, progressive growth, early implementation and continuous changes are supported by this. A large framework can be split apart into smaller components, and each of these minor bits can be added to agile methodology.

7. Testing

It's a good way to check early and often in mobile app growth. Doing so will keep your final expenses down. The deeper you go through the growth cycle, the more expensive it becomes to patch bugs. When building the different test cases, relate to the original design and development documents.

Application testing is comprehensive, so ensure all the relevant aspects of it are covered by your team. Usability, functionality, protection, interface tests, stress, and performance should be checked for the application. You explore whether or not your mobile app works with your intended users during user acceptance testing. To test this, provide a few individuals in your target audience with your app and ask specific questions. You know your approach "works" after your application passes the user approval test, and further make your application available for a beta trial, either by the registration of previously established groups or an open request for participants. The reviews you get from beta users will assist you to find out if the features of the app perform well in a real-world situation.

8. Deployment

Your app is ready for submission. Select a day and initiate a formal launch. The rules for the release of an app are appropriate for various application stores. And note, this is not the end. Creation of apps doesn't stop at launch. Input will flood in when the application gets into the hands of consumers, and you will need to integrate the input into future iterations of the software. Updates and new features will be required for any app. Usually, the development cycle starts again as long as the first version of the software is released. To sustain your item, make sure you get the resources. Bear in mind that it is a long-term investment, aside from the money spent in creating a digital product.

The key thing to note is that a constant and continuing phase is the creation of apps. It just doesn't end with the release of the final production, it's just the beginning. More reviews and suggestions will come in as the app gets more users, and you will have to incorporate the requisite improvements in the form of potential app updates. Follow the above steps to make your app hit the pinnacle of success if this is your debut attempt at app growth. The mobile app development process is very intricate. Mobile app development companies and agencies are in great demand because the customer base for it is large. The back end of your mobile app is made by app developers using specialised mobile app development software and tools. Developing the apps we love and spend our days’ scourging is being created with a lot of care by mobile app development companies. Mobile app development companies in India have greatly evolved and are at par with others on a global scale.

Jan 21 2021
Jan 21

It's essential that companies have a presence online in the digitalised global economy. Enterprise web development is thus, naturally, an important opportunity for a company to achieve online exposure and enter a broader audience. Web creation for business is essentially the method of creating a company-level website.
Enterprises run the gamut from mid-sized to large-scale enterprises and institutions (governmental, for-profit or non-profit) to organizations and collectives (healthcare, education, philanthropy, or any other group with a common purpose or similar goals).


Developing a company website requires a huge joint project with a web development firm, as the design of an organization website is extremely complicated. In this blog, we'll address what web commerce is, what it does and, most significantly, what it can do for your company.


Significance of Enterprise Web Development

Web creation provides a global platform essential for communicating the business model of a company to specific customers. Business websites are an excellent channel for the promotion of products, services and even ideas.

In addition, with a growing amount of business being done online, it is safe to assume that in the coming years a company without a high-quality website will find it extremely difficult to maintain itself.

A website is the initial point of interaction with prospective clients in the modern age, and having a beautifully crafted website can help to improve the brand and increasing customer retention. mid-to client website goes beyond advertising and helps companies to conduct a significant portion of online operations effortlessly.

They vary from receiving and executing requests to supplying consultancy services and responding to inquiries, to offering information via blog posts or video clips.

Because of advancements in web technology and increasing value of enterprise web development, websites and web applications are predicted to become more creative and offer companies and customers several more advantages.

Read more to understand how web development for enterprises will increase your business opportunities.

How Does an Enterprise Website differ?

Since the best enterprise website designs are usually designed for mid-to large-scale enterprises, it demands several more features and resources to address different needs than a standard website. This also varies in the kind of content management system employed.

The Enterprise Content Management (ECM) program used by business websites requires many tools, modules and functions that satisfy the plethora of detailed criteria of different stakeholders (customers, investors, partners, suppliers, and others).

An enterprise website also includes resources and approaches for branding, content creation and marketing approaches such as SEO and keyword rankings, inventory management, code incorporation and much more.

While the structure and efficiency of enterprise websites rely on the purview of a business, business websites are generally needed to accommodate increasing traffic, rapid surges in demand and need to be flexible to expanding operations in the long - term.

Scalability is also an essential factor as a website should be able to accommodate potential development without impacting the pace of the site and the user experience. Overall, a company website is considerably more sophisticated and comprehensive to meet the capability and a wide range of features needed for a business.

Therefore, enterprise website management is significantly unique and requires careful preparation. Enterprise web development involves resources which involve, but are not restricted to, UI and UX design technique, database building, content management system, website maintenance, customisation, brand assessment, and analytics configuration.

Bearing in mind the diverse problems and requirements of an enterprise website, it is important to cautiously choose a web development agency that can handle these nuances. In reality, it is strongly advised that you look for an agency that can modify the website of your organization after having considered its priorities, scale, long-term goals, vision, mission and value proposition for the business.

Some of the best enterprise web development tools are;

Angular.JS

Chrome DevTools

Sass

Grunt

CodePen

TypeScript

GitHub

NPM

JQuery

Bootstrap

Visual Studio Code

Sublime Text

Sketch

1) Angular.JS

AngularJS can help you expand your vocabulary to HTML. HTML is fine for static documents but dynamic displays won't work. AngularJS can provide you with an environment that can be descriptive, readable, and rapid to create. It provides the toolset that will help you to construct the framework for developing your application.

This entirely extendable toolset is capable of interacting with other libraries. It offers the ability to modify or remove the features according to your production workflow.

2) Chrome DevTools

Chrome gives Web developers a selection of tools. Such tools are built into Google Chrome. This has the features of displaying and modifying the DOM and layout of a Tab. With Chrome DevTools, you can display notifications, run & debug JavaScript in the browser, edit on-the-fly pages, easily diagnose the problem and improve the pace of the website.

3) Sass

Sass is the most sophisticated and functional CSS-extension language. It will allow the use of variables, nested rules, mixing and functions. Sass will enable you to share the concept around and inside projects.

4) Grunt

Grunt is a JavaScript function runner, perfect for automation purposes. It will perform most of the routine work including mining, compiling, checking units, etc...

5) CodePen

CodePen is an online platform with the features and functions for front end design and distribution. You can use CodePen to build the whole project as it contains all of the IDE features in your browser.

6) TypeScript

The language of open-source coding is a typed JavaScript superset. For plain JavaScript, it will generate the code. It supports every client, host, and operating system. You can use the current JavaScript code and call JavaScript to the TypeScript code.

7) GitHub

GitHub is a Website for Software Development. It will assist in running the programs. GitHub will allow you to build a review system and incorporate it into the workflow for your application. This can be integrated into the software that you already use. It can be deployed as a self-hosting or cloud-hosting solution.

8) NPM

Using critical JavaScript software, Npm can help you create stunning stuff. This has Group Leadership functionalities. No configuration will be needed. It offers auditing security mechanisms.

It offers security expertise, de-duplicated growth, intrusion detection and unrivalled assistance for enterprise-grade solutions.

9) JQuery

This JavaScript library is designed to allow traversal and manipulation of HTML DOM tree simplified. This also allows for handling and animation of events. It is loaded with features.

10) Bootstrap

Bootstrap is the toolkit that allows you to create with HTML, CSS, and Javascript. Bootstrap is used to build mobile-first sensitive projects over the internet. This library of front end components is an open-source toolkit.

11) Visual Studio Code

 Visual Studio Code can run anywhere. It has IntelliSense technology, Debugging, Built-in Git, and plugins to include languages, templates, debuggers, and more. It supports systems running Windows, Mac and Linux.

12) Sublime Text

Sublime Text is a scripting language that is suitable for javascript, markup, and prose. It supports divided editing mode. You'll be able to modify files side by side with the aid of this feature. This may be accessing the same file at two different places.

This offers even more features such as customizing something and fast project move. Sublime Text allows Platforms for Windows, Mac and Linux to run.

13) Sketch

Sketch offers a smart interface to help you build flexible, reusable components that can be resized to suit the entire content. It comes with hundreds of plugins. It supports Mac OS and can be used to build animations on timelines.

7 Website Features That Help Businesses Grow:

Well-designed configuration of the site

Navigating should be simple and encourage visitors to find what they are searching for at a cursory look.

Efficient development and engineering

A growing number of visits to the site use portable devices such as mobile phones or tablets to search online. A customized web design that adapts to the user experience by changing the layout accordingly, such as the screen size, interface and rotation.

A website that appears appealing, whether accessed from a mobile phone or desktop and easily loads to all platforms (because mobile devices usually have lower internet speeds than desktop computers), would appeal to all consumers.

What Can Business Do For You

Defines explicitly what the business model of the company is and how it will benefit you.

Lead Generation and Participation

Create marketing leads from clients, inquiry forms and methods, and techniques specific to your company.

Notifiable material

Publish material not only promoting the goods but also offering information that targeted customers are looking for.

Calls-to-Action

Including simple calls-to-action is a successful approach to enable clients to start a conversation. One of the best ways to increase the conversion level is to make it simple for customers to reach you or buy your product or service via direct calls-to-action.

Analysis and Tracking

This is important so that companies can evaluate data such as demographics, customer behaviour, purchasing habits, marketing and promotional campaign efficiency and other criteria.

Web-Based Enterprise Applications

Web-based corporate software, including client websites, are valuable business tools. A web-based business app is a program developed for mid-to large-scale organizations and that can be launched on the Web or intranet.

Apps are designed for various purposes, whether for internal or external uses. As an example, an organization may need a shared app of internal needs, such as communicating and exchanging project documents and information with staff located at various locations. Or a company can create an app for outside investors such as basic order placement and delivery program.

Or it may include an app for internal and external participants to collaborate on projects and participate in platform discussions from different places.

In addition, the software must communicate with existing systems, databases, and other technical entities for consistent access and smooth knowledge transfer. Since apps frequently contain and handle sensitive customer information, strict security procedures are also required to secure data, business information and operations.

Working with a skilled customized software company is the best way to develop web-based business apps.

Advantages of Web-Based Enterprise Apps

Flexibility

Staff members can access and send business details, wherever they are, making it much easier for employees who drive to or work from home to work with unlimited accessibility and even take care of the crucial business in order to guarantee accuracy and consistency.

Marketing

Far more corporations are trying to make the most out of their online network to advertise and sell their products and services, and also to manage online transactions and processes. Companies creating technology applications to achieve corporate website development goals gain competitive advantage.

Interoperability

The interface and integration of an app with other devices and resources promote consistency which in effect allows for high compatibility between different platforms, systems and devices.

Installation, deployment, and maintenance are fast and cost-effective

Web applications can be built in a single operating system, resulting in cost-efficiency. They're all located in a single server from where they're open to all users. They can also be managed and modified from a central site that is open to users universally over the network.

Data Security

Since web applications are built and stored on stable, dedicated servers managed by security specialists, all company and customer information is stored securely.

Demand for customized web apps is only anticipated to increase in the future as more organizations continue to realize the advantages of a custom-designed app designed to match their processes and goals.

Emerging Web Development Trends

With recent advancements in web technology and the increasing requirement for enterprise web creation, websites and applications are anticipated to become more innovative and nuanced in terms of its functions, usability and presentation.

Emerging trends in web growth, such as Accelerated Mobile Pages (AMP) and Progressive Web Application (PWA), would concentrate on delivering a more engaging user interface, great potential for SEO rankings, improved safety, higher load speeds and increased traffic. Such developments will certainly boost market opportunities by enhancing new acquisitions and operations of customers.

The web development field is set to expand in the years ahead and provide an increasingly attractive and exciting digital space.

Jan 21 2021
Jan 21

The dilemma of choosing the more suitable CMS from a range of possible CMS options can be overwhelming.' is a major question that comes to mind when thinking forward towards development.

Now, that alone relies on the requirements that you will come up with. For a blog-related website, WordPress might be one's choice. Similarly, for a website catering to e-commerce, Magento might be one's preference. The question arises why should Drupal be chosen over existing options. Why is Drupal the best CMS? Safety, 3rd party implementations, support networks, comprehensive, SEO friendly, open-source tools, support for Free Module / Plugin, etc. are the  contributing factors. If you have a query as to “Should I use Drupal?” These are some of the features that should help you make an informed decision.

Drupal Migration Services are also available and it is the simplest approach via which you can relocate your existing website to Drupal. The complexity of the database structure does not matter.

Some advantages that come with choosing Drupal are:

1. Community

The open-source structure of Drupal promotes consistent collaboration and development through the Drupal community's support and enthusiasm. Today, in 230 countries, there are over 1.4 million Drupal users who are committed to pushing Drupal towards success. The opportunity to generate extraordinary digital experiences extends far beyond what a single team of patented software developers could conceive of, with a pool of such varied experts working constantly to make Drupal better.

2. User Experience 

The new Drupal is a revolutionary digital platform that can be leveraged by developers and marketers to generate memorable customer experiences. The latest editions of Drupal have prioritized user experience (UX) to encourage everyone to strengthen existing customer experiences, from site editors to content creators. Some of Drupal's user interface improvements include:

Layout Builder - Provides an easy-to-use page building experience for content authors that allows editors to control the get-up of their content without relying on a developer.

The administrative theme of Claro provides a cleaner, easier-to-use site management, configuration, and authorship interface.

Mobile sensitive web features- out-of-the-box delivery of mobile-friendly themes, sensitive images, and mobile management.

3. Scalability

Drupal is an effective and future-ready CMS that gives companies the freedom to adapt to their needs. The versatile API architecture of Drupal facilitates the development of exponential content across a worldwide multi-site ecosystem. Drupal is optimized for many caching circuits that facilitate faster page loading, optimized bandwidth, and stronger web performance overall, even under high-pressure conditions. 

4. Security

Safety is the primary concern when it comes to creating digital experiences that people trust. Not conforming to digital security norms can both harm consumer relationships and cause companies to suffer heavy legal fees for heavily regulated and public-facing sectors such as government and healthcare. Security is taken more seriously by Drupal than any other CMS. That's why organizations such as Georgia State, Steward Health Care, and Fannie Mae depend on Drupal to safeguard their websites and hold their audiences' trust.

5. Accessibility

An inclusive web environment for all users is prioritized by Drupal's determination to accessibility standards. For any specific component and function added to the core, availability is a gateway requirement.

Drupal guarantees that all of its features and functionality comply with the out-of-the-box WCAG, WAI-ARIA, and ADA standards of the World Wide Web Consortium. Some of the characteristics of usability included in Drupal 8 and the Drupal 9 entail:

Color Contrast Themes and text size optimization 

Defaults of Alt Tag

Control Tab Order  

Mobile Responsivity

Aural Alerts For sectors, such as tertiary education, with the responsibility of providing learners from a variety of backgrounds with opportunities and knowledge, accessibility is a major issue. At present, over 70% of educational institutions including renowned institutions such as North Dakota State University, have opted for Drupal as their CMS of choice. Drupal stays true to providing everyone, regardless of their circumstances, accessible information, and positive digital experiences.

Some of the widely asked questions when it comes to Drupal is, Why is Drupal better than WordPress? What are the benefits of Drupal over WordPress? Which is the best, Drupal or WordPress? So, let's take a deep plunge and compare them one by one according to scenarios.

Drupal vs WordPress

There is no denying about the intricacy of Drupal in contrast to WordPress, but no one can refuse that Drupal offers advanced features. The interface of Drupal is much wider than that of WordPress and it mainly uses types of content, views, categorizations, etc. So, if the requirement in that situation is for multiple templates, Drupal is rated higher than WordPress.

Flexibility

Drupal is more versatile than WordPress as it is engineered by developers for custom software development.

Everything is freely accessible as modules in terms of capability and you can customize everything in Drupal with the assistance of a developer. In WordPress, plugins are obtainable in paid versions. WordPress is intended to be a blogging platform. So, to manage a large amount of content and consumers, it has limited functionality and is Drupal's backbone for handling thousands of data and customers at the same time.

Security

Security is the primary concern for every customer who invests in building a website, and if their website is hacked, then everyone involved in the project will suffer a major loss. Drupal has enterprise-level security due to the large open-source community, which offers comprehensive security reports. The website of Whitehouse.gov or U.S. Govt is on Drupal, which demonstrates the trust in Drupal at the level of security.

In conclusion, you must first recognize the requirements of the customer and analyze them to choose which best fits your requirements. With the service component of Drupal 9 out now, developers have a complete object oriented structure for building websites, portals, e-commerce solutions, etc. Also, the answer to the question, “Is Drupal hard to use?” is NO. It is made for the ease of users and allowing yourself to be immersed in the experience is the surest way to make the best use of it.

Jan 05 2021
Jan 05

The following is a step by step instruction for implementing reading minutes left for a particular article, blog, or similar, just like we see on medium.com.

The JS file

  • I have used this JS library.
  • Place this code in a JS file named read-remaining-minutes.js and place it in the corresponding theme.
(function($) {
  $.fn.readingTimeLeft = function (options) {

    var s = $.extend({}, {
      stepSelector: '*',
      wordPerMinute: 100,
      eventName: 'timechange'
    }, options);

    var $this   = $(this)
    , $window = $(window)
    , $steps  = $this.find(s.stepSelector);

  // For each step element, store the quantity of words to come
  $steps.each(function (i, el) {
    var textAhead =  $steps.slice(i, $steps.length).text();
    $(el).data('words-left', textAhead.trim().split(/\s+/g).length);
  });

  // Filters elements that are in viewport
  $.fn.filterVisible = function () {
    var wW = $window.width(), wH = $window.height();
    return this.filter(function(i, e){
      var rect = e.getBoundingClientRect();
      return rect.top >= 0 && rect.right <= wW &&
      rect.bottom <= wH && rect.left >= 0;
    });
  }

  function throttle (fn, limit) {
    var wait = false;
    return function () {
      if (wait) return;
      fn.call(); wait = true;
      setTimeout(function () { wait = false; }, limit);
    }
  };

  var triggerOn = 'scroll.' + s.eventName + ' resize.' + s.eventName;

  // Throttle updating to 50ms
  $(window).on(triggerOn, throttle(function (e) {
    var wordsLeft = $steps.filterVisible().last().data('words-left');
    $this.trigger(s.eventName, wordsLeft / s.wordPerMinute);
  }, 50));

  // Destroy function
  $this.on('destroy.readingTimeLeft', function (e) {
    $(window).off(triggerOn);
    $steps.removeData('words-left');
  });
  return $this;

};
}(jQuery))
  • Next in the template.php file for your corresponding theme, you need to add the above JS file for the particular content type. You can do something like this below:
if ($vars['node']->type == 'article'') {
        drupal_add_js(drupal_get_path('theme','my_theme') . '/js/read-remaining-minutes.js');
}
  • After you have told Drupal to add the JS file, through the above code, your JS code will be ready for the page.
  • Now you need to specify where you want to add this functionality.
  • For that, I have a custom JS named “my-custom-js-code.js” file, in this same theme itself, where I usually write all my custom JS. Here I will specify my custom JS code.
// Reading time left for a blog post
    // #calculable-content is the id of the content on which we want to apply the calculation for reading time
    $('#calculatable-content').readingTimeLeft()
      .on('timechange', function(e, minutesLeft) {
        if(isNaN(minutesLeft)) {
          // .time-left is the class belonging to the read remaining div
          $('.time-left').hide();
        }
        else {
          // If less than 1 min remains then display "Content Finished" else show the minutes left
          var text = Math.round(minutesLeft) < 1? $('.time-left').text('Content Finished') : $('.time-left').text(Math.round(minutesLeft) + ' min left');
          $('.time-left').show();
        }
      })
    $(window).trigger('scroll');
  • Here I am considering that when the scroll reaches the end, it will show “Content Finished”. I will explain the id and the class used below.

Modifying .tpl.php

  • We have placed our JS codes as needed. Now we need to link it to the class in HTML so that it appears on the page.
  • I have a .tpl.php file which is responsible for rendering all the HTML content for the particular page named “custom-template.tpl.php”
  • In this .tpl.php file, at the place where you want this read remaining minutes block of text to appear,  you have to specify the HTML for it.
 
  • The time-left class is the wrapper class for the block, that is the entire block of the text itself.
  • The id calculatable-content is what we are using to calculate the time left, which will dynamically change while you scroll through the page.

Implementing CSS

  • We need to add a decent enough css so that it appears on the page without hurting the eyes!
  • You can use the following css, using this will place the block of text at the right top section of the page.
.time-left {
  position: fixed;
  right: 0;
  top: 176px;
  padding: 10px 10px 10px 40px;
  background: #068bb8;
  color: #fff;
  font-size: 15px;
  line-height: 19px;
  cursor: default;
  border-bottom: 0px;
  z-index: 999;
  &:before {
    content: url('../../../../../sites/all/themes/my_theme/images/time-left-white.png');
    position: absolute;
    top: 12px;
    left: 15px;
    @media screen and (max-width: 767px) {
      top: 8px;
      left: 10px;
    }
  }
  @media screen and (max-width: 767px) {
    padding: 6px 6px 6px 35px;
    font-size: 12px;
  }
}

Final approach

Now you just need to hit the cache clear, sit back and enjoy. Observe how the time changes as you scroll through the page!

Jan 05 2021
Jan 05

You might want to add the functionality for a magnific popup where there are multiple items, say images, videos which on clicking would open up in a popup and you would be able to scroll through those. Something like this: https://dimsemenov.com/plugins/magnific-popup/.

Worry not! You do not need to go through the entire documentation in the above link. I have done the hard work for you so that you can get it done in the wink of an eye!

Initialization and modification in custom JS

  • First you need to include the JS library in your theme.
  • The minified file is quite big, so I am not providing it here.
  • You can find the minified JS file here: https://github.com/dimsemenov/Magnific-Popup/blob/master/dist/jquery.magnific-popup.min.js.
  • Place this JS file in the theme you wish to use.
  • Next in the template.php file for your corresponding theme, you need to add the above JS file for the particular content type. You can do something like this below:
if ($vars['node']->type == 'article'') {
        drupal_add_js(drupal_get_path('theme','my_theme') . '/js/jquery.magnific-popup.min.js');
}
  • Once done, you need to write the custom js, where you want this magnific popup to be triggered.
  • The custom JS should look something similar to this:
// Gallery section magnific popup
      if($('.gallery-section .tab-content').length) {
        // magnificPopup for tab 1
        if($('.gallery-section .tab-content .tab1).length) {
          $('.gallery-section .tab1).magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {
              enabled: true
            }
          });
        }
}

Somethings to note:

  • I had a tabbed gallery section. Each of the tabs contained a video as the first element and then the rest were images.
  • Here first I check if the gallery section exists. If so, then I again check if the particular gallery tab exists. If so, then for that particular gallery tab I implement the magnific popup.
  • Where “delegate: a” means that I am imposing the functionality on the “a” tag.
  • I have specified the type as an image. You might have the question then how would it work for the video right? I will definitely tell you that in the later section.
  • Finally, we initialize the gallery as true, for it to work.

Implement the custom Html

  • Implement the custom HTML as you like, a gallery tabbed section in my case.
  • Let us see an example of the html I have used:


tab video



  • Now comes the fun part! All of the above are images, except for the first one which is a video. For that to work properly, you simply need to add the following class “mfp-iframe” in the class for the respective video “a” tag.
  • Here I have 1 video and 4 images. That is a total of 5 elements. So when you cycle through these, below you will be able to see that the total count is shown as 5.
  • For sections where you may have multiple tabs, you need to repeat the js
$('.gallery-section .tab1).magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {
              enabled: true
            }
          });

For each of the tabs with their corresponding ids respectively. Else it will take the total count of all the elements “for that particular section” and “not that particular tab” and cycle through, say, 100 elements (the total number of elements that you may have in the entire section) instead of the 5 elements in that particular tab.

I am not providing the CSS as that is subjective to how your section looks. Enjoy!

Dec 30 2020
Dec 30

Oftentimes it may happen that you have a Github account where you upload all your code for practice sessions or learning purposes. You have another Github account pertaining to your company profile. When you push your changes, be it to your own Github account or a project-specific, how do you make sure that the respective account is always used? Well, I am here to help!

 

Set up SSH Keys

Let’s assume your two Github accounts are named githubPersonal and githubWork, respectively.

Create two SSH keys, saving each to a separate file:

mgh 1 img

Save it as id_rsa_personal when prompted.

mgh 2 img

Save it as id_rsa_work when prompted.

The above commands set up the following files:

- id_rsa_personal

- id_rsa_personal.pub

- id_rsa_work

- id_rsa_work.pub

Add the keys to your Github accounts

Copy the key to your clipboard:

mgh 3 img

In case you do not have pbcopy installed. To install and use pbcopy:

mgh 4 img

Edit your bash file

mgh 5 img

Create alias

mgh 6 img

Refresh your bash

mgh 7 img

Add the key to your account:

  • Go to your Account Settings.
  • Click “SSH Keys” then “Add SSH key”.
  • Paste your key into the “Key” field and add a relevant title.
  • Click “Add key” then enter your Github password to confirm.

Repeat the process for your githubWork account.

Create a configuration file to manage the separate keys

Create a config file in ~/.ssh/

mgh 8 img

Edit the file using the text editor of your choice, here I am using nano, which is readily available in Linux.

mgh 9 img

Paste the following in the config file:

mgh 10 img

Update stored identities

Clear currently stored identities:

mgh 11 img

It will show all identities removed

Add new keys:

mgh 12 img

Test to make sure new keys are stored:

mgh 13 img

Test to make sure Github recognizes the keys:

mgh 14 img

You should see something like this:

mgh 15 img

mgh 16 img

You should see something like this:

mgh 17 img

One active SSH key in the ssh-agent at a time

To keep things safe, we need to manually ensure that the ssh-agent has only the relevant key attached at the time of any Git operation. So that the active ssh key is used at the time of push

ssh-add -l will list all the SSH keys attached to the ssh-agent.

Clear currently stored identities:

ssh-add -D

Add the required ssh key

Change config name and email for a project

GitHub identifies the author of any commit from the email id attached with the commit description.

First, check the name the project is using:

mgh 18 img

Check the email the project is using:

mgh 19 img

If you need to change then do the following:

mgh 20 img

Dec 30 2020
Dec 30

With teams growing in size, it’s more important than ever to define a paradigm of deploying code to achieve a synonymous rule about the code and to keep contributors on the same page. This can be achieved with “Git Hooks”.

Git hooks are scripts which trigger specific automated actions based on an event performed in a git repository. The git hook name usually indicates the hook’s trigger (e.g. a pre-commit, a post-commit, etc). These hooks can be useful in automating tasks on your git workflow. For instance, based on defined rules, it can help us validate the code or run a specific set of tests before a code is committed. 

Setting the Git Hooks

Git hooks, thankfully, are a built-in feature. Which means we can access them and use them with our modifications as long as we have a git repository initialized. For better understanding, let us set up one.

Create a directory and cd into it:

gh 1 img

Initialize the repository with git and check the contents:

gh 2 img

On doing so, you would notice a hidden directory has just been created. This .git repo is used from git and is responsible for storing all the information related to the repository we created such as commit info, remote repository addresses, version control hashes, etc. Also, it is this folder where the hooks actually reside. If we cd into this folder we would be able to see certain scripts that are already present in the repository.

gh 3 img

One thing to notice here is that these hooks have an extension “.sample”. This means that they are not executable yet and not ready to be used as of this instance.

Let’s Cook inside the Hook!

Now that we know what a Git Hook is, let us take a look at how we can bring it to use, through an example. While we are inside the .git/hooks repository, we can see that there are many hooks present but not yet ready to be used. Let us use the pre-commit hook. But let us create one from scratch, instead of using the one that is provided.

Our objective here would be to validate the git config's global user email and the name respectively. Once all seems to be fine then it would show the user a message “Changes are ready to be committed” when a file is committed to git and another message showing “Changes have been committed” once the user commits the file to git.

Step 1

cd into the .git/hooks repository and create a new file called pre-commit.

gh 4

Step 2

The next step is to make the pre-commit file that we created, executable. Once inside the directory .git/hooks, make the file executable by typing in the command chmod +x pre-commit.

gh 5 img

Step 3

Now we need to create our script. In order for the script to run, we first need to specify our shell. Do this by using #!/bin/bash at the beginning of your script for bash or #!/bin/zsh if using the zsh shell like I am. Specifying an incorrect script would result in an exit code 0 and will be considered a fail.

This pre-commit hook will watch for incorrect commit authors using the script below.

gh 6 img

We will repeat the same steps for our post-commit hook.

  1. Create a post-commit hook.
  2. Make it executable.
  3. Insert your code in the post-commit hook.

If everything works fine then you should be able to see something like this below, when the correct credentials exist.

gh 7 img

In the above example, we have written our scripts in zsh but we can do the same with any other scripting language as well like Python, Javascript, Node.js, etc. The only thing to keep in mind is that we use the correct format at the first line of our executable script.

Dec 30 2020
Dec 30

Drupal behaviors is a more modular and customizable strategy to implement JQuery.ready. Ok, this statement does not completely explain it. Let us get deeper into this by asking the right questions. The what? The why? The when?

Before diving straight into Drupal behaviors let us first understand how does the existing JQuery.ready work. When the DOM (Document Object Model) is ready for manipulation JQuery.ready starts digging with a shovel and modifies the elements in that particular page. But there is a catch here. When JQuery.ready starts digging with a shovel it does so only once and cannot modify a new element, which might have appeared suddenly out of nowhere, underneath what it has already dug. Modifying the new element would mean starting to dig yet again from the very beginning. Hence, speaking in plain terms JQuery.ready can run only once when the DOM is loaded.

Enter Drupal.behaviors, which is like a machine that instead of digging every time from the very beginning, can dig from wherever required. Even if, a new element suddenly appears underneath the earth, it can dig into that particular area and modify it. In programming terminology, this means that Drupal.behaviors can be run multiple times during page execution. Moreover, they can be run whenever a new element gets introduced into the document (i.e. during AJAX content loading). So, the advantage of Drupal behaviors over the document.ready() is that they are automatically re-applied to any content which is loaded through AJAX.

Drupal 7 provides us with two handles:

  1. attach: which is used to add an element to a page.
  2. detach: which is used to remove an element from a page.

Drupal.behaviors can also override or even extend an existing behavior. Supposedly, if a module has a behavior where hovering on an image adds a transition effect, another module could replace that behavior with a different transition effect.

Another advantage of Drupal.behaviors is that we can pass drupal_add_js (PHP) as the first parameter for being the context or Drupal.settings.modulename (JS) as the second parameter to the behavior.

When we pass the context variable as the second parameter to the JQuery selector only that context is searched for and not the entire document. This is considered as a good practice.

How to use Drupal behaviors?

This is what we would normally do:

db 1 img

Or, we can also write it as:

db 2 img

The above is a valid code and we can actually use it but, there’s a catch!

The above code will run only once but what if our content gets loaded through AJAX and we wanted to add a class to all span tags? Then we would have to do something like this:

db 3 img

The above code will work for the content that’s loaded initially but won’t get added to the new elements that get added on AJAX call. This is where we would have to use Drupal behaviors. Behaviors will get executed on every request including those that are AJAX. Hence, the above code can be written like this:

db 4 img

Now, let’s see what the different aspects of the code are:

ElementNew: This is the namespace. It should be unique. It can be the module name but that is not mandatory. This is what identifies the Drupal behavior as a unique one.

attach: This contains the actual function that should be executed

context: When the page gets loaded for the first time, the context will contain the entire document but after an AJAX request it will hold all the new loaded elements. Span, in this case. With this, we can address the required element itself on AJAX requests without having to consider the entire document which gets loaded initially.


settings: This contains information passed on to Javascript via PHP, it is similar to accessing it via Drupal.settings.

How to use settings in Drupal behaviors

Supposedly, for some reason we want to hide all the span tags that contain a class called ‘img-span’ from our page with a delay of 10 sec

db 6 img

Through the above code, the span with class ‘img-span’ will disappear after 10 seconds,  as we hard coded the duration (10000 ms = 10 sec). Now let’s see how to pass this duration using settings.

Now if we want the duration to be passed to javascript which later can be used to hide the class under different circumstances, we can use Drupal.settings.

Using drupal_add_js we can pass duration as settings.

db 7 img

The below code demonstrates how to use settings in javascript:

db 8 img

Apr 26 2019
Apr 26

 

 

In the first part of this blog, we had completed the installation and had also created blocks for custom block types. In this part, we will see how to configure the TB mega menu so that we can get the structure of the menu ready as per our design.

 

Configuring the TB mega menu and placing the TB mega menu block in a region are two separate things.

 

The TB mega menu can be configured for an existing menu. So, you need to ensure that you have a complete hierarchy of menu ready before you begin the configuration. However, you can modify the links later on from the TB mega menu configuration page.

 

If you already have a menu that you want to use then you are already a step ahead! If not, then go to /admin/structure/menu and click on the Add menu. Create the menu as you normally would.

 

For demonstration purposes, we will be using the below menu structure. Let the name of this menu be Example menu:

 

Parent 1

    -Child (1)

        -Child (1) content

    -Child (2)

        -Child (2) content

        -Sub child (1)

            -Sub child (1) content (This content will be displayed over the child (2) content)

        -Sub child (2)

            -Sub child (2) content (This content will be displayed over the child (2) content)

    -Child (3)

    -Child (4)

Parent 2

    -Child (1)

    -Child (2)

        -Sub child (1)

            -Sub child (1) content (This content will be displayed over the child (2) content)

        -Sub child (2)

            -Sub child (2) content (This content will be displayed over the child (2) content)

    -Child (3)

Parent 3

    -Child (1)

    -Child (2)

    -Child (3)

Implementation

Now that we have a clear idea of how we want our menu to look like we can start implementing the TB mega menu.

 

Before we do so, one thing we had noticed earlier is that there were contents embedded in the menu itself for certain menu items. The contents include:

  1. Title

  2. Image

  3. Description

 

Some of the block contents had all of the above fields while some of the block contents may only have the title and description. Also, we need another content which would have neither of the above. We would come to this part later on.

 

Since we know what the hierarchy of the menu is and what content the menu items need to have let us create these contents first so that we have the block ready (more on this later) when we start configuring the menu.

 

The contents we have for the menu items are rendered via a block. These blocks will be later on placed while configuring the menu.

 

Flashback time

 

Let’s rewind time! Earlier we had created a block type with certain fields. These fields were left on the user to create as it is a pretty straight forward process. For this demonstration purpose let us create the following fields for our block type.

  1. To create fields for the block type, go to admin/structure/block-types and click on Add block type.  Specify the Label and a description. Once done, click on Save block type.

  2. Next, you will be taken to the block type listing page which is /admin/structure/block-types. On this page you will have the option to Manage fields. You can add, edit or delete the fields for the particular block type from here.

  3. Once you click on the Manage fields option, you will be redirected to a page wherein you will be able to add or modify the fields.

  4. Initially you will have the following fields present by default:

    1. Label: this field corresponds to the name of the block.

    2. Title: this field corresponds to the title of the block.

    3. View mode: this field corresponds to the view mode of the bean.

    4. Revision settings: this field corresponds to the revision of the block.

    Note: these fields are provided by the bean module itself.

  1. Add the following fields by specifying a label and selecting the type:

    1. Menu item image:

      1. Label: Menu item image

      2. Field type: Image

      3. Widget: Image

You can add an image style to this field by going to the Manage display tab. Over there, click on the gear icon to the extreme right of this image field.

d8_manage_display

Once you do so, further configuration options will open. You will see an option to provide an Image style. Click on it and select the image style you want. Additionally, you can link this image to the content or the file. To do so, click on the Link image to option and select the desired option from the dropdown menu. Once done, click on Update and save the block type.

 

d8_update_save

 

    1. Menu item description:

      1. Label: Menu item description

      2. Field type: Long text

      3. Widget: Text area (multiple rows)

        The below image shows where you can create a field.

 

       

d8_menu_item

 

  1. Once done, save it and you will have your block type ready with the fields.

  2. Now you are ready to create the content for the block.

 

Creating content for the blocks

  1. To create the content for a menu item, go to /block/add/menu-item-content-block

  2. Fill out the below fields:

    1. Label: This is a mandatory field. This field corresponds to the blocks name i.e. this is the name of the block.

    2. Menu item image: This is an optional field. If we want to have an image in the content then that needs to be inserted here. On clicking browse, the media browser opens from where we can select the image file from our local storage or that residing on the server itself.

    3. Title: This refers to the title of the content.

    4. View Mode: This is a mandatory field. This field provides the default view mode for the bean. It would have a default option selected. Leave it as it is. This does not need to be modified.

    5. Menu item description: This refers to the description of the content.

    6. After the necessary information has been filled up, save the block.

  3. Now, the content for a particular menu item has been created as a block. Similarly, we can create blocks for other menu items. There can be a case where a particular menu item does not have an image. It only has a title, description and a link. In such a case, while creating the contents in the block as we did above, leave out the Menu item image blank i.e. without uploading anything in it. For another case, we would also require a common empty block, which would have nothing other than the block label. I will address this later on as where we exactly need it.

 

Now that we have the content ready we can start configuring the TB mega menu.

 

Configuring the TB mega menu

 

Initial configuration

  1. To configure the TB mega menu go to /admin/structure/tb-megamenu.

  2. Click on the config link for the menu that you want to be displayed.

  3. A page like the one below would open.

d8_initial_config

 

  1. This lists the 1st tier of menu items which we are referring to as the Parent menu item links with some options. The options include:

    1. Style: leave it as default.

    2. Animation: this might be selected as none. Change it to fading or some other animation style. This is because if no animation is selected then all the menu item contents would appear one above another and not only on hover, which is not what we want.

    3. Delay (ms): specify an animation delay as required.

    4. Duration (ms): specify an animation duration as required.

    5. Auto arrow: to hide the arrows next to items that have a submenu.

    6. Always show submenu: collapse submenus when browsing on small screens.

  2. This is all that we need to configure for the initial items visible when this page loads for the 1st tier (Parent) menu items.

  3. Now, let us move inside these links.

Creating child menu links

  1. Each of the child menu links is wrapped in containers. Let us name them for ease of use:

    1. Let us call the box that contains all the elements as the Container.

    2. Let us call the box that contains the elements directly as the Wrapper.

    3. Let us call the menu items as Elements.

  2. A visual representation will better support the explanation:

    1. Container.

             

d8_child_menu

 

  1. Wrapper.

 

d8_wrapper

 

  1. Element.

 

d8_element

 

  1. If there is a need to modify a certain menu link then that can be done by clicking on the Edit Links option on the right-hand corner of the page. This will redirect you to the menu link configuration page. Let us see below where it is

 

d8_edit_links

 

Add content to child (1)

  1. Click on Parent 1.

  2. Click on the first Element which is the child (1).

d8_parent1

 

  1. You will be able to see the option of Sub menu above. The value will be set as No. Toggle this option to Yes and a submenu for the child (1) will appear.

 

d8_child(1)

 

  1. Note: This submenu does not correspond to menu item links i.e. this is not for displaying a child menu link or any menu link to be precise. This submenu is for placing the content as a block. Menu items which have child menus will automatically appear under the respective menu items as they have been configured in /admin/structure/menu or by going into Edit Links as discussed above.

  2. We had earlier created a content for this which we would be placed as a block here. To do so, now you have to click on the submenu Element.

  3. Then click on the option which says Blocks: Select Block.

 

d8_blocks

 

  1. On doing so a drop down will appear with all the blocks.

 

d8_drop_down

 

  1. Select the block which has the content for this child menu item.

  2. In doing so the content will appear and look something like this:

 

d8_content_appear

 

  1. Do not worry if the design seems to break. This is just the configuration page and the design can be handled entirely through the CSS.

  2. Hence we have created content for a child menu.

Add content & submenu to the child (2)

Our design had a child (2) menu item which had two submenu links as well as content. This is a bit tricky. The functionality we sought was that:

  1. Hovering on the child (2) would display:

    1. The submenu links.

    2. The content for the child (2).

  2. Hovering on the submenu link for the child (2) would display:

    1. The content for the submenu links instead of the child (2) content, also for the second child menu link.

 

Let us see how we can achieve this.

  1. As per our menu structure, on clicking on the child (2) Element a sub menu link should appear.

  2. According to our design, the content should be placed just beside the submenu link for the child (2).

  3. To do so, select the Wrapper of the submenu link and an option will appear which says Add/remove Column.

  4. Click on the “+” sign for the Add/remove Column to add a column beside it.

  5. On doing so a column will be added beside the menu item link.

d8_column

 

  1. Now we need to add content to this block. So, like we had previously added, we can add content for the same by clicking on the Blocks option.

Note: the submenus may appear a bit too small. This could be easily fixed with custom CSS. For demonstration purposes, I had given a fixed width of 600 to the submenu Container.

  1. To do that, select the submenu Element of the child (2) and toggle the Sub menu to Yes

 

d8_sub_menu

 

  1. Once the block is added it will look something like this:

 

d8_block_added

Add no content for submenu of the child (2) of Parent 2

  1. Child (2) has two submenus:

    1. Submenu 1 (has its own content).

    2. Submenu 2 (does not have its own content).

  2. The tricky part is the second submenu not having content. In that case, the content of the child (2) will be shown when we hover on submenu 2. But this should not be the case as hovering on submenu 2 should show empty.

  3. To do this we need to place an empty block which we had created earlier

 

d8_empty_block

 

  1. Doing this would mean that when we hover on the submenu then no content will be shown and it would appear empty

 

Once done, click on the Save button to save the configuration.

 

The TB mega menu that we created should look something like this:

  1. With the menu looking like this:

d8_mega_menu

 

  1. The underlying menu links looking like this:

 

d8_underlying_menu
  1. The menu links with its submenu links and contents looking like this:

d8_menu_links

 

  1. The submenu links with its content look like this:

 

d8_S_links

The blocks might appear like the ones above but with CSS this can be easily fixed and the blocks can appear in one particular place.

 

This TB mega menu that we have configured is essentially a block. Once done, save it. Then go to /admin/structure/block, select the TB mega menu that you configured and place it in the desired region according to your theme region. Voila! You have your TB mega menu ready!

 

There are some points to take note of.

  1. Remember to turn on animation. It would be none initially. If an animation is not set then all the blocks that you place for the menu items will all appear at once, one on top of another.

  2. Remember to provide permission to the bean block else, it will not appear for the anonymous user. To do so:

    1. Go to /admin/people/permissions.

    2. Search for this term your_bean_block_name block (where your bean block name is the name of your block).

    3. Look for the your_bean_block_name block: View Bean.

    4. Tick mark the checkbox for anonymous user.

    5. Clear all cache and check the site for the anonymous user. You will have the block in the TB mega menu shown for the anonymous user.

 

You now have a completely configured TB mega menu on your site! You can add images, videos, texts quite easily now through blocks.


P.S: If you have missed out the 1st part of this blog, you can check it over here.

Apr 26 2019
Apr 26

The world as we know it did not always come with the TB mega menu for Drupal 7. Traditional menu implementations included writing the entire HTML and designing it as per the needs or using default drupal menu parallelly with other contrib modules to support different requirements This would often take days or even weeks to implement. Even after completion, the client may ask you to make changes and things may go haywire. Changing every HTML element is a daunting task! Another approach may be to use certain modules offered by Drupal to create a menu. The problem with this approach is that, though the menu might look simple, it would be a daunting task to make it completely configurable within a small time frame.

 

This is where TB mega menu comes in to save the world!

 

“TB Mega Menu allows you to create a mega menu with an innovative back-end user interface and synchronized with Drupal core menu.” - drupal.org

 

The TB mega menu gives the user an option for a completely configurable approach in terms of building a menu from scratch. Today we are going to discuss this implementation over Drupal 7. It allows the user to create a mega menu with images, text, video, using a block.

 

There is one dependency though that these things can be inserted via a block.

 

The installation and implementation are pretty straight forward but there are certain hairpins that can be the cause of a car crash if not carefully configured.

The problem

Recently, one of our clients had requested a menu which will have content like images, videos, links, text, etc. for each of the respective menu links, while being completely configurable at the same time. Now, this was a task which called up for challenges. It might appeal to one, to create the menu with bootstrap. The only problem with this being, it wouldn’t be so much of a configurable option for the user. Anytime there would be any changes needed to be made, the client would have had to come to us and wouldn’t be able to directly change it themselves. To have such a configurable option is a pretty daunting task!

 

This is where the TB mega menu module stepped into our help. The content we talked about earlier i.e. images, videos, texts, etc. essentially could be placed in the menu through blocks. Great isn’t it? Well not so much. You will see later on why.

 

As one dilemma seemed to hit the exit gate, another stepped in to fill its shoes. The basic block Drupal 7 offers give the user the option to enter details for the following fields only:

  1. Block title

  2. Block description

  3. Block body

 

And that’s essentially it. If you were to insert an image, video or a link then you would be stuck. One thing you could do is to create a block programmatically with the required fields but that’s one block. What if you needed every content you place in the mega menu for each of the respective links to be different?

 

This problem has been addressed in Drupal 8 with the concept of block types. Block types are essentially like content types wherein you can add fields of different type and later on add content for that particular block type respectively. You can have multiple block types with each block type having a different set of fields. These blocks can then be placed anywhere you like. But this is for Drupal 8. Fortunately, Drupal 7 presents a module which allows users to do the same. The module named bean now comes to the rescue!

 

“What is Bean?

Think of a Bean as a method to provide new types (compared to node this would be a content type) which then provides an add the content interface to create as many blocks as you require (see screenshot below). The bean content can then be placed around the site just like any other block.-drupal.org

 

Through this bean module, we can create a block type with the required fields and then have multiple blocks of that block type.

 

We now know what are the things required to kickstart the implementation we seek. So, let us now start the implementation.

Installation

  1. First, we need to install the TB mega menu.

  2. Then we need to install the bean module.

  3. Check if bean_admin_ui is enabled. If not then enable it. This will give us the UI to create the block type.

 

Before we start with the implementation of TB mega menu we need to have our content ready for the respective menu items.

Creating a block type

When the bean and bean_admin_ui modules are enabled, there will be an option to create block types understructure. To create a block type,

  1. Go to /admin/structure/block-types/add.

  2. Specify a name and description for the block and save it.

  3. Saving the block type will take you to the block type listing page (/admin/structure/block-types). Here you will be able to see all the block types that you have created.

  4. Now, that you have created a block type, you have to add fields to it. Similarly, like in content types, here, you have to click on the manage fields link in the block type listing page.

  5. From here you can create the fields you want. After doing so save the block type.

  6. Now, you have a block type created with fields in it. You can choose to add a block for this block type as we would do for content. We will be looking at it soon.

  7. Similarly, you can create as many block types as you want.

 

Adding a block for a block type

  1. Now, that you have a block type ready, you can add the content for it i.e. creating the blocks.

  2. To add a block go to block/add. Here you will be presented with a list of block types that you had created. From here you can choose to add a block for a respective block type. You can also go to /admin/content/blocks, which is the block listing page for the blocks created for custom block types, and click on Add block.  One thing to note here is that you would not be adding a block by going into /admin/structure/block/add because this is for adding the default block that Drupal 7 provides.

  3. Fill in the required fields and save. A block will be created.

 

You now have your content ready to be placed in the TB mega menu as a block.

 

Creating a menu

TB mega menu uses the menu that you already have on your system and lets you configure that accordingly. Creating a menu is a straightforward approach and you need to create the menu as you normally would by going into /admin/structure/menu and then click on the Add menu.

 

Configuring the TB megamenu

You have two essential things ready:

  1. The blocks (the contents that need to be placed in the menu).

  2. The menu itself.

 

Let us start configuring the TB mega menu!

 

  1. Go to /admin/structure/tb-megamenu.

  2. The TB mega menu is configured upon an existing menu (refer above). Select the menu that you want to configure by clicking on the respective menu’s config option.

  3. The menu links can also be modified from this configuration page. If you need to modify the links you can do so by clicking on the Edit links option.

  4. The config page shows 6 options initially:

    1. Style

    2. Animation

    3. Delay

    4. Duration

    5. Auto arrow

    6. Always show submenu

  5. The first level of menu items is shown initially. Let us, for example, take this as:

    1. Parent 1

    2. Parent 2

    3. Parent 3

  6. On clicking on Parent 1, we would have the option to

    1. Add a submenu

    2. Add an extra class

    3. Icon

    4. Item caption

  7. The child menu links will appear in the same order and relation as created in the menu /admin/structure/menu.

  8. This Parent 1 menu item will have it’s child menu links shown in a container.

  9. On clicking on this container, we will have the option to

    1. Add a row below this container

    2. Hide when collapse

    3. Specify a width

    4. Align the items as we like

    5. Add an extra class

  10. The container further contains a wrapper which contains the child menu links. We have an option to:

    1. Add/remove columns. We can add a column in parallel to the child menu links if we want

    2. Hide when collapse

    3. Set grid size for the column

    4. Insert a block in that column that we added

    5. Show block title

    6. Add an extra class

  11. On moving further and clicking on the child menu link we are presented with the option to

    1. Add a submenu. If we add a submenu we would have the option to insert a block in that submenu

    2. Group the submenus. This means that the submenus would appear below the child menu links

    3. Break column

    4. Add an extra class

    5. Icon

    6. Item caption

  12. On moving further into the sub-menu we would be able to see that the sub-menu is wrapped in a wrapper. On selecting the wrapper, we would be able to

    1. Add a row

    2. Hide when collapse

    3. Specify the width of this sub-menu

    4. Align text

    5. Add an extra class

  13. On moving further and selecting the block in the sub-menu we would have the option to

    1. Add/remove a column

    2. Hide when collapse

    3. Set grid size

    4. Add a block

    5. Show the block title

    6. Add an extra class

  14. You can have as many child menu items as you want and blocks with them.

Placing the block

The TB mega menu that you created is essentially a block. So you would have to place it in a region like other blocks.

  1. Go to /admin/structure/blocks.

  2. Search for the TB mega menu block that you created and place it in the desired region and save it.

  3. On the specified page the TB mega menu will appear.

Note

Blocks permission

You have implemented the blocks with bean module by creating block types with and then creating blocks (the content that we need to show) for it. This block needs to be given permission. To do so:

  1. Go to /admin/people/permissions.

  2. Search for this term your_bean_block_name block (where your bean block name is the name of your block).

  3. Look for the your_bean_block_name block: View Bean permission option.

  4. Check the permission for the anonymous user.

  5. Clear all cache and check the site for the anonymous user. You will have the block in the TB mega menu shown for the anonymous user.

All blocks inside TB megamenu appearing at once

  1. One thing to keep in mind is that when creating a TB mega menu for the first time if there are sub-menus and blocks inside them then they would all appear one on top of each other.

  2. This is because the animation is set to none.

  3. You would have to select the animation as fading or any other animation style. It is only then that on hovering, the blocks would appear else not.

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