Drupal Planet

composer

Just-passin-thru (not verified)

Thu, 08/06/2020 - 09:35

I've used the following to…

I've used the following to overcome this issue and it works fine:

COMPOSER_MEMORY_LIMIT=-1 composer require ...

Khan Mohammad Nakib (not verified)

Wed, 09/23/2020 - 01:31

The code in this tutorial can be found on GitLab.

Thanks for this. Exactly I…

Thanks for this. Exactly I was looking for this.

Add new comment

Language English

Add Parallax Nodes from a View to Drupal 8 With ScrollMagic

admin — Mon, 20 Jan 2020 10:07:06 +0000

Add Parallax Nodes from a View to Drupal 8 With ScrollMagic admin Mon, 01/20/2020 - 06:07

In this tutorial I will explain how I accomplished taking a listing of nodes that came from a View and created a Parallax effect using the Bootstrap theme from Drupal 8.

To use the code in the repos, you can:

Clone the repos locally
Run composer install from the root folder
Run drush config:import -y

I would like to refer to this article which explains how to Add Parallax Blocks to Drupal 8 With ScrollMagic. I got my ideas and most of the code from there.

You will need to have Drupal 8 installed with Views and a Bootstrap subtheme set up.

For this tutorial, I am using a simple Page content type that I created with 3 fields: Title, Body and Background Image.

You should then create a View that lists this Page content type. I am listing the Body field and Background Image field in my example. I am keeping my Page content type and View very simple for explanation purposes. But you can set up more complex Views and content types as you wish. You just need at least an image field (or you can place a background image to an existing content type field via CSS as well).

Step #1 - Configure the Bootstrap theme

Because Parallax effects are usually full width, you should turn on the Fluid container option in the Bootstrap theme menu.

Enter your subtheme Boothstrap theme settings.
Under General >> Container check the Fluid container box

Step #2 - Set up your Content Type and Views.

Here is my Page content type with 3 fields: Title (not show in in screenshot), Body and Background image

Here is my View. It's a pretty much standard View which just lists the Page content type and creates a page out of it. I am using the image field here as the background image for the Parallax. You can also use another field (text or whatever) and set a CSS background as the image.

Now create some Page content and go to the View page to see the listing of your content.

Step #3 - Style the View using CSS

Here is my CSS:

.view-homepage {

.views-row { text-align: center; position: relative; overflow: hidden; height: 500px; }

.views-field-field-background-image { position: absolute; width: 100%; height: 140%; }

.views-field-body {

position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #fff; } }

Step #4 - Get the ScrollMagic files

Go to Github and download/extract library.

Now go to your theme folder and create a folder called /js/ and move these files into the folder

animation.gsap.min.js
ScrollMagic.min.js
TweenMax.min.js
and also manually create a blank parallax.js

You now need to tell the theme to load the js libraries. To do that, open your_theme/your_theme.libraries.yml:

global-styling: css: theme: css/style.css: {}

js: js/ScrollMagic.min.js: {} js/animation.gsap.min.js: {} js/TweenMax.min.js: {} js/parallax.js: {} dependencies: - core/drupal - core/jquery

Step #5 Add the Parallax JS code to parallax.js

(function ($) { 'use strict'; Drupal.behaviors.myBehavior = { attach: function (context, settings) {

var controller = new ScrollMagic.Controller();

$('.views-row').each(function (index) {

var $bg = $(this).find('.views-field-field-background-image'); var $content = $(this).find('.views-field-body');

var tl = new TimelineMax(); tl .from($bg, 2, {y: '-40%', ease: Power0.easeNone}, 0) .from($content, 1, {autoAlpha: 0, ease: Power0.easeNone}, 0.4) ;

var scene = new ScrollMagic.Scene({ triggerElement: this, triggerHook: 1, duration: "100%" }) .setTween(tl) .addTo(controller); }); } } }(jQuery));

Make sure the images you are using are big enough for the max width you want to display.

You should now have a nice parallax scrolling effect for each node in the View list.

Tags

Add new comment

Language English

Drupal 8: Composerizing Drupal 8 in 10 Easy Steps

admin — Thu, 31 Jan 2019 04:07:22 +0000

Drupal 8: Composerizing Drupal 8 in 10 Easy Steps admin Thu, 01/31/2019 - 00:07

Do you have a Drupal 8 website that you have migrated from Drupal 4 to 5 to 6 to 7 and then to 8 (or anywhere along this timeline)?

Do you have a Drupal 8 website that is not managed with Composer? (Maybe you installed the site manually?)

If your answer is Yes to any of the above, then this quick guide tutorial is for you. This tutorial will explain in 10 easy and proven steps how to take a Drupal 8 website and get it to be managed under Composer.

Read how Drupal 8 uses Composer.

For this tutorial to be effective for you, you must take care of all the Assumptions I mentioned below BEFORE you start.

Assumptions

You have a Drupal 8 website and it is under GIT version control (using master branch).
You have not hacked core (but if you did note where you did it).
You have contrib modules and/or themes in your code base.
Any custom module or custom theme is in their usual Drupal folder (for e.g. drupal_root/modules/custom_module OR drupal_root/themes/custom_theme)
You have updated all Drupal core, contributed modules and themes to their latest stable version. (This is important for Step 6 to go smoothly)
For this tutorial code base means your Drupal root directory

My current code base looks like this.

Step 1

Backup the following folders:

your public files folder
database

Do not worry about the rest of your code base because it is under version control.

Step 2

Git clone your code base locally and create a new branch off your master branch (or whatever branch your live repos sits on).

Commands

git clone <your git repo >

Now change directory into your newly cloned git repos.

git checkout -b composerize-drupal master

composerize-drupal is just the name of the branch we will be working in for this tutorial so we don't mess with our master branch. Once we are successful, we will merge this branch back into master.

Step 3

Note down the names of the contributed modules/themes that you currently use. It is ok to skip this step because your git version control (master branch) will have these folders still so you can refer to it from there through the git web interface.

But here are the Drush commands if you wish to do it this way:

To list all the contributed module: drush pm-list --type=Module --no-core --status=enabled

To list all the contributed themes: drush pm-list --type=Theme --no-core --status=enabled

If you hacked core or made custom patches, note down where these hacks/patches are in your codebase (again it should be viewable in your git interface in the master branch so you do not need to actually write this down)

Step 4

In your local branch , delete everything including all the files that begin with “.” (dot) from your Drupal root EXCEPT the .git folder. So now your code base should only have the .git folder.

Now you can stage and commit this change to the current branch composer-drupal:

git add -A

git commit -m "Remove all files and folders except .git"

Step 5

Install a new version of Drupal using Composer:

composer create-project drupal-composer/drupal-project:8.x-dev composerized-drupal --no-interaction

The name of the folder that composer will install Drupal too is composerized-drupal.

Now you need to move ALL of the files and folders from the folder composerized-drupal into the root of your original code base hence consequently leaving the composerized-drupal folder empty. Don't forget to move all the files that begin with a dot.

So from your code base root:

mv composerized-drupal/* ./

mv composerized-drupal/.* ./

rm -rf composerized-drupal

Now your code base should have the default Drupal composer files like Figure 2.

Figure 2

Now it’s a good time to commit these changes.

git add -A

git commit -m "Added default Drupal composer files"

Step 6

For each contributed module, theme or profile from your old site you need to add it to the current code base by using composer such as:

composer require drupal/adsense drupal/backup_migrate drupal/codefilter drupal/ctools drupal/insert drupal/pathauto drupal/rules drupal/sharethis drupal/tagadelic drupal/token drupal/typed_data

Composer will then fetch the latest stable release and put it in the correct directory automatically.

Now it’s a good time to stage and commit your changes.

git add -A

git commit -m "Add contrib projects to the codebase."

Step 7

For any of your custom code:

Place modules in drupal_root/web/modules/custom/
Place themes in drupal_root/web/themes/custom/
Place profiles in drupal_root/web/profiles/custom/

Visit this link if you use 3rd party libraries.

If you made customizations to .htaccess or robots.txt, here is how to apply those changes in a composer managed Drupal site. (Don't forget to commit your changes to composer.json)

If you patched core, contributed modules or themes see this link to patch with composer.

NB - Do not just randomly add your customizations in without letting composer know about it. If you do this, your changes will be lost next time you run composer install or composer update.

Step 8

TEST, TEST, TEST!

Restore a copy of the LIVE database to your local machine and visit the URL of the local site in your browser.

Drupal will automatically go to the install step. Follow through with the process and fix any errors along the way.

Clear the cache: drush cr

You may have to find other ways to clear Drupal cache if Drush does not work at this point.

Check the status reports and click around the site. Any errors you find, fix it and commit it.

The status page may have Drupal updates to the database available. Update the Drupal database if you need too.

Usually I visit admin/config/media/file-system to double check the public and private folder paths are set correctly.

NB - your custom files folder will be missing from your code base at this point. You can copy the files folder locally to drupal_root/web/sites/default/files if you need it for testing purposes but this will be taken care of in Step 10 on the LIVE site.

At the end of this step, drush status and drush cr should return clean results with no errors.

Step 9

This is the big step where you push the changes up to the master branch.

So push your changes up: git push -u origin composerize-drupal

Now we want to merge our composer branch into master:

git checkout master

git merge --no-ff composerize-drupal

Delete the composer branch as we no longer need it:

git branch -d composerize-drupal

Push the changes up:

git push -u origin master

Step 10

Now we need to pull in the changes on your LIVE server. Your LIVE site will be down for a few minutes in this step so you should do this at an off-peak time. In the event that something drastically goes wrong, you would need to revert the commit with the merge and restore your database and files folder.

On LIVE:

Change your Webserver document root to point to code_base/web since composer would have placed all the Drupal files into a sub directory named “web.” This is a very important step.

Then

git pull

composer install --no-dev

After running the above command, if you had previously made customizations to core, contrib modules or contrib themes, and you didn't tell composer about it, they will be lost like I said in Step 7.

At this point you may notice your original sites folder is still at code_base/sites. You can delete the folder completely because the web/sites folder will be in use now.

Copy your custom files folder to code_base/web/sites/default/files

Now visit your site and repeat Step 8 (except restoring a copy of the LIVE database to your local as you would be on LIVE now).

I hope this tutorial is helpful to you. You can leave a comment if you had any edge cases and the solutions that you found.

Tags

Drupal 8

Add new comment

Language English

Drupal 8: How to render your custom theme images with image styles in your Twig template

admin — Thu, 03 Jan 2019 11:03:11 +0000

Drupal 8: How to render your custom theme images with image styles in your Twig template admin Thu, 01/03/2019 - 07:03

In this article we are going to look at how we can render custom images using image styles in your Twig template in Drupal 8. By custom images, I mean images that originate from a custom module/theme (not an image originating from a field entity/node). In other words, the image would not even exist in "public://your-image.png" but rather it might exist somewhere in your custom module or theme.

In YOUR_THEME.theme file, put at the top:

use Drupal\image\Entity\ImageStyle;

Then, depending on which Twig template you want to use the image style, you need to create the appropriate preprocess function. In this example, let's use theme_preprocess_page

So in YOUR_THEME_preprocess_page:

function YOUR_THEME_preprocess_page(array &$variables) {

$style = ImageStyle::load('custom_style');

$variables['rounded_image'] = $style->buildUrl(drupal_get_path('theme', 'YOUR_THEME').'/images/your_image.png');

}

Then in your Twig template (for e.g page.html.twig):

<img src = "{{ rounded_image }}" />

Tags

Add new comment

Language English

Upgrading from Drupal 5 to 7 and the XML Sitemap Module

admin — Tue, 17 Dec 2013 07:26:51 +0000

Upgrading from Drupal 5 to 7 and the XML Sitemap Module admin Tue, 12/17/2013 - 03:26

After months of deliberation and procrastination, I have finally found the time to upgrade my own website. It's now running on Drupal 7. I decided to change the theme and keep it simple. A neat layout and also mobile friendly theme is what I was aiming for. Thanks to the many contributors at Drupal, finding a user contributed simple and clean theme was not very hard at all. The hardest part of this upgrade was the XML Sitemap module.

Because I went straight from Drupal 5 to Drupal 7, there were some extra steps I had to take to get this module to work. The upgrade path for this module was not a straight forward one however. I must say that I did follow the module's instructions for this upgrade in which they said "If you're upgrading from version 5 to version 7, please use the 5.x-1.7 to 6.x-1.x to 6.x-2.x to 7.x-2.0-rc1 path." This led to me having the latest stable module, but every time I go to the config page for the module I was given a notice error. Even trying to uninstall the module was somewhat impossible. So I was basically stuck with an installed XML sitemap module that I could not uninstall nor use. This seems to be a pretty common problem with this module.

The Solution

Before you do anything of this nature, it goes without saying that you should BACKUP YOUR DATABASE. I resorted to manually deleting the module's tables and variables from the database. To do this I used PHPMyAdmin and deleted all tables that started with xmlsitemap. I also did the same for each row in the variables table for all variables LIKE %xmlsitemap%. A little dirty hack ain't it? After doing this, I was then able to uninstall the module within the admin interface. Now, finally I could install the module as a fresh install. I know this is not ideal but fortunately, this module does not store a lot of information so I could have afforded to loose that for a fresh install. I hope this post will save someone else from chasing shadows in debugging this problem.

Tags

Drupal 7

Add new comment

Language Not specified

Annoying Drupal 5/6 problem. Can't sign in even if your username/password is correct.

admin — Tue, 03 Dec 2013 18:26:13 +0000

Annoying Drupal 5/6 problem. Can't sign in even if your username/password is correct. admin Tue, 12/03/2013 - 14:26

If you still happen to be maintaining a Drupal 5 or 6 website for a client you may encounter this problem of getting access denied even though you correctly entering the right username and password.

The first place to check, (and this is the most common solution), is to check the Sessions table in your mySQL database. Try repairing this table and that should do the trick. An easy way to do this is to use PHPMyAdmin.

In PHPMyAdmin, choose your Drupal database, check the box next to the Sessions table, and find the "With selected" drop-down near the bottom of the page. Choose "Repair table".

If repairing the Sessions table via PHPMyAdmin doesn't work, you can truncate the Sessions table. The repercussion of this being that all your users will have to log in again.

Tags

Add new comment

Language Not specified

Drupal 7: How to add a custom CSS class to the last search result item on the search page

admin — Wed, 14 Nov 2012 17:53:23 +0000

Drupal 7: How to add a custom CSS class to the last search result item on the search page admin Wed, 11/14/2012 - 13:53

Add new comment

This is a small tidbit of information in the event that you wanted to alter the Drupal search results page. You can add a custom CSS class to the last search result item (for whatever reason you may have). In my case, I wanted to remove the border-bottom from the last result, so I had to add a special CSS class to do this. Just follow these simple steps:

Override template_preprocess_search_results Here is how to alter the code. This goes in your template.php: function yourthemename_preprocess_search_results(&$variables) { $variables['search_results'] = ''; if (!empty($variables['module'])) { $variables['module'] = check_plain($variables['module']); } //checking the total number of results $num_results = count($variables['results']); $counter = 0; foreach ($variables['results'] as $result) { $counter++; if ($num_results == $counter) { //means we have the last result so we add the class $variables['search_results'] .= theme('search_result', array('result' => $result, 'module' => $variables['module'], 'last' => 'last')); } else { $variables['search_results'] .= theme('search_result', array('result' => $result, 'module' => $variables['module'])); } } $variables['pager'] = theme('pager', array('tags' => NULL)); $variables['theme_hook_suggestions'][] = 'search_results__' . $variables['module']; }
Now we override search-result.tpl.php Create this file and put it in your custom theme folder.
"<?php print $attributes; ?>> <?php print render($title_prefix); ?>
> "><?php print $title; ?>

<?php print render($title_suffix); ?> <?php if ($snippet): ?>

><?php print $snippet; ?>

<?php endif; ?> <?php if ($info): ?>

<?php print $info; ?>

<?php endif; ?>
Clear your cache

Now if you search for something, you will notice that your very last search result has the CSS class of "last". This also works for search results that have a pager. That is, the last result on every page will have the class of "last".

Tags

johnybravo123 (not verified)

Sun, 09/01/2019 - 12:07

Thanks for Sharing....!!

Add new comment

Language Not specified

Drupal 7: How to add a custom node view and force a node template to use it

admin — Mon, 15 Oct 2012 19:11:36 +0000

Drupal 7: How to add a custom node view and force a node template to use it admin Mon, 10/15/2012 - 15:11

Add new comment

This is a small Drupal 7 tip if you wanted to create a custom node view and force a node template to use this custom node view.

Use case

Let's say you are creating a custom node template for a node of type "grades". You may need to show/hide specific fields in your content type for your Grades template. (This is just an example but you can use this tip in various ways).

The Steps

You can create a new view mode by putting this code into your custom module:
/** * Implements hook_entity_info_alter(). */ function MYMODULE_entity_info_alter(&$entity_info) { $entity_info['node']['view modes']['custom_teaser'] = array( 'label' => t('Your Custom Teaser'), 'custom settings' => TRUE, ); }
Then go to Manage Displays in your content type and set which fields you want to show/hide in the "Your Custom Teaser" view mode.
Now you have to force the viewing of your node to use this custom node view "Your Cusom Teaser". Put this code into your custom module: function MYMODULE_preprocess_node(&$variables) { if ($variables['elements']['#view_mode'] == 'custom_teaser') { $variables['theme_hook_suggestions'][] = "node__grades"; } }
This will force the viewing of your custom content type "grades" to use grade.tpl.php

Further Reading Here is how you would make a View use your custom node view for Drupal 7.

Tags

Anonymous (not verified)

Mon, 10/15/2012 - 18:24