Feeds

Author

Upgrade Your Drupal Skills

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

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

Content authors and content editors always look out for a seamless, easy-to-use experience when it comes to page building. Drag-and-drop and WYSIWYG tools are something they expect when they want to create and design pages. Drupal Layout Builder offers this exact experience with its easy-to-use page building capability, in Drupal core. 

Drupal Layout Builder is unique and provides a powerful visual design tool to let content authors change the way content is presented. Introduced in Drupal core in its latest version, Layout Builder in Drupal 8 allows you to add/remove sections to display the content using different layouts, and customizing your pages based on the requirements. The Layout Builder Module in Drupal 8 also allows you to combine these sections and create a truly customized page. 

The Drupal 8 Layout Builder can be used in two different ways. It can be used to create a layout for each content type on the website, and also to create a layout for an individual piece of content.

Introducing the Drupal Layout Builder 

The Drupal 8 Layout Builder module allows you to customize the design of the entities such as content types, taxonomy, users etc. It provides an easy-to-use drag and drop option for site builders to place blocks, fields etc.

The layout builder module in Drupal 8 makes it easier to build your layouts by offering a preview of the changes made while building your layouts. Instead of having to save every small change made in the layout and then looking it up on the front-end, layout builder in Drupal 8 layout builder allows previews of the changes made for a seamless layout building experience. 

Installing and setting up the Drupal 8 Layout Builder module

In order to install/setup the Drupal 8 layout builder module, navigate to Extend and enable both Layout Builder and Layout Discovery module..

Installinf and setting up the layout builder

Note: Layout Builder was introduced as a stable module in Drupal 8.7 core. So, make sure you’re using the latest version. In older versions of Drupal, it was an experimental module.

1. Use Drupal Layout Builder to Customize Content-Type and Taxonomy

1. Once you have installed the module, navigate to Structure, Content types and click on “Manage display” for any content type , For now we will use the “article” content type.

layout builder module

2. Scroll to the bottom and click on Layout options and select “Use Layout Builder”, then click on Save.

Layout builder module in drupal 8

3. Once you’ve enabled Layout Builder on the view mode, you can see a “Manage layout” option instead of field formatters. You can use Layout Builder for any of the view modes present.
 

Manage Display

4. When you click on “Manage layout”, you’ll be redirected to article content type layout.

edit layout builder

2. Add Sections to the Layout

1. To add sections to the layout builder, remove the default section first. Click on the close icon (as depicted in the below screenshot). Further, you will be provided with an option to the right side of your screen to remove the default section. Click on “Remove”.

add sections to layout builder

2. Let us add a few sections to our layout by clicking on the “Add Section” option. Further, you will be provided with options to choose a layout of your choice for your section, on the right side of the screen. For now, let us select the “Two Column Section”.

edit layout

3. You will have an option to choose the width for your “Two Column Layout”. Let us select a “50%/50%” for now. Then click on “Add section”.

Two column layout

Once added, you should be able to see an “Add Block” link for each section region.

ad-block-layout-builder

3. Add Blocks to the Section Regions

After choosing your section for the layout, you can add blocks into your section. To add a block just click on “Add Block” and the “Choose a block” option will slide out from the right.

add blocks to section regions

1.Choosing a Block
 
Blocks can be chosen from the right by just clicking on them. You can even find blocks by filtering them out by their name using the “Filter by block name” text field. 
We will select “Authored on” content field for now.

choosing a block

When you click on the block you want to add, you’ll be able to adjust the field formatter. Once you’ve configured the formatter, click on “Add Block”.

configured-add-blocks

The “Authored On” content field will be placed on the left side of the block.

Authored-on-layout-buildr

After placing the “Authored On” field, you need to save your changes. Save all the changes you have made to your section by clicking on “Save Layout” option at the top of the Drupal 8 layout page

layout builder

Let us try adding some more fields into our layout to further customize our layout builder.

layout-builder

After saving this layout, if you visit an article content type page, you will be able to see a preview of the layout which you just built..

Layout-module

4.Override Default Layout

The layout which we just built will be applicable for all the articles. If you want to build a customized layout for a particular article in Drupal, we have to enable some options provided by Drupal for the same. You can do it by selecting “Allow each content item to have its layout customized.”

Override-layout

After enabling this option, if you go to an article, you should see a Layout tab button.

Layout builder

You can now modify the layout using the same interface. However, this will only change the layout on this specific piece of content.

Layout builder
May 19 2020
May 19

Bit.ly for Drupal 8 provides a rich API that other Drupal modules can use to access Bit.ly functionality. Today’s topic of discussion is on how we can integrate Bitly with Drupal 8 easily in just a few simple steps.

What are the first three reasons that come to your mind for shortening a URL? Here are mine –

  • To make more space for content to be posted on micro-blogging sites such as Twitter
  • To mask the original URL 
  • To simply reduce the length of a super-long, ugly URL

Bitly has been out go-to URL shortening service for a long time now and we love its efficacy and speed. For those of you who haven’t stumbled upon Bitly yet, Bitly is a link management platform that offers products and services on link shortening and more. It allows you to shorten URLs for your websites. 

bitly implementation in Drupal

Getting Started- Bitly Integration with Drupal 8

Bitly allows for easy integration with your Drupal 8 website. Since there are no stable modules to integrate Bitly in Drupal 8, we will learn about how to call the Bitly API and create forms to integrate it. Here are some steps to get you started with it -

Step 1 – First, you need to create a Bitly account. Go to https://bitly.com/ and create an account. You need to login to your Bitly account once you have created the account.

You will then see your Dashboard page.

Bitly Integration with Drupal

Step 2 - Next Click on top right side of the screen and go to ‘Profile Settings’

Profile settings


Go to Registered OAuth Applications -> Register New App -> Get Registration Code. 
It will send you an email for your mail id that you used to sign up.
 

Get Registration with bitly

Step 3 - Click on Complete Registration. It will take you to back to Bitly website where you have to add the below details -

complete registration


And Save this OAUTH App. Once saved, a ‘CLIENT ID’ and ‘CLIENT SECRET’ key will be generated as shown below.

OAUTH APP


Step 4 - Next, go to your browser and enter this Url :
https://bitly.com/oauth/authorize?client_id={YOUR_CLIENT_ID}&redirect_uri={YOUR_WEBSITE-URL}
Once you hit this Url, it will redirect to {YOUR_WEBSITE_URL}?code={YOUR_CODE} . Copy this code and paste it somewhere safe so it's not lost.

Step 5 – Next, you have to use POSTMAN to call the API or you can use the CURL command also. Learn more about how the Postman tool can help you with API development and testing.

The method will be POST, Url is https://api-ssl.bitly.com/oauth/access_token and parameters will be client_id, client_secret, code, redirect_uri.

Bilty API Development


When you hit this API, it will return the following –

access_token=TOKEN&login=BITLY_LOGIN&apiKey=BITLY_API_KEY
access_token - The OAuth access token for specified user
login - The end-user’s Bitly username
apiKey - The application key which will be used
This login and apiKey values should be stored and can be integrate with your Drupal modules.

Implementing the integration

Now let us learn to create a custom form for integrating with Bitly as there is no stable module for this in Drupal 8.

bitlyForm.php
<?php

namespace Drupal\bitly\Form;

use Drupal\Core\Form\ConfigFormBase;

use Drupal\Core\Form\FormStateInterface;

/**

* Class bitlyForm.

*

* @package Drupal\bitly\Form

*/
class bitlyForm extends ConfigFormBase {

 /**
  * {@inheritdoc}
  */
 protected function getEditableConfigNames() {
return ['bitly.shorten_url'];
}
 /**
  * {@inheritdoc}
  */
 public function getFormId() {
 return 'bitly_shorten_url_configuration_form';
 }
 /**
  * {@inheritdoc}
  */
 public function buildForm(array $form, FormStateInterface $form_state) {
  $config = $this->config('bitly.shorten_url');
   $form['configuration'] = [
     '#type' => 'fieldset',
     '#title' => $this->t('Configuration'),
   ];
   $form['configuration']['login_name'] = [
     '#type' => 'textfield',
     '#title' => $this->t('Login Name'),
     '#default_value' => $config->get('login_name'),
     '#required' => TRUE,
   ];
   $form['configuration']['app_key'] = [
     '#type' => 'textfield',
     '#title' => $this->t('Application Key'),
     '#default_value' => $config->get('app_key'),
     '#required' => TRUE,
   ];

   return parent::buildForm($form, $form_state);
 }
 /**
  * {@inheritdoc}
  */
 public function submitForm(array &$form, FormStateInterface $form_state) {
   $this->config('bitly.shorten_url')
     ->set('login_name', trim($form_state->getValue('login_name')))
     ->set('app_key', trim($form_state->getValue('app_key')))
     ->save();
   parent::submitForm($form, $form_state);
 }
}

Bitly-Integration-with-drupal-8

Add the Login name and Application Key that you have generated and stored previously.

Now, let’s create a function to integrate your Drupal website with Bitly.

/**

* Generate Shorten Url.

*

* @param string $url

*   The url.

* @param string $login

*   The login name.

* @param string $appKey

*   The api key.

*

* @return string

*   Returns bitly url.

*/

public static function makeBitlyUrl($url, $login, $appKey) {

 // Create the URL.

 $bitly = ‘http://api.bit.ly/shorten?version=2.0.1&longUrl=’. urlencode($url) . '&login=' . $login . '&apiKey=' . $appKey . '&format=xml';

 // Get the url

 // could also use cURL here.

 $response = file_get_contents($bitly);

 // Xml.

 $xml = simplexml_load_string($response);

 return 'https://bit.ly/' . $xml->results->nodeKeyVal->hash;

Let’s now call the makeBitlyUrl function to generate the Bitly Url.

$config = \Drupal::config(‘bitly.shorten_url');

$bitlyUrl = (string) makeBitlyUrl('https://www.example.com', $config->get('login_name'), $config->get('app_key'));

You will now get the integrated Bitly Url in the $bitlyUrl variable.

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