Drupal 8 https://shivanjaikaran.com/ en Add Parallax Nodes from a View to Drupal 8 With ScrollMagic https://shivanjaikaran.com/add-parallax-nodes-view-drupal-8-scrollmagic <span>Add Parallax Nodes from a View to Drupal 8 With ScrollMagic</span> <span><span>admin</span></span> <span>Mon, 01/20/2020 - 06:07</span> <div><p>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.</p> <p><a href="https://gitlab.com/xamount/parallax-demo" rel="nofollow">The code in this tutorial can be found on GitLab.</a> </p> <p>To use the code in the repos, you can:</p> <ol> <li>Clone the repos locally</li> <li>Run composer install from the root folder</li> <li>Run drush config:import -y </li> </ol> <p>I would like to refer to this article which explains how to <a href="https://www.ostraining.com/blog/drupal/add-parallax-styled-blocks-to-your-drupal-8-theme/" rel="nofollow">Add Parallax Blocks to Drupal 8 With ScrollMagic</a>. I got my ideas and most of the code from there.</p> <p>You will need to have Drupal 8 installed with Views and a <a href="https://www.ostraining.com/blog/drupal/create-a-drupal-8-bootstrap-subtheme-using-cdn/" rel="nofollow">Bootstrap subtheme set up</a>.</p> <p>For this tutorial, I am using a simple Page content type that I created with 3 fields: Title, Body and Background Image.</p> <p>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).</p> <p><strong>Step #1 - Configure the Bootstrap theme</strong></p> <p>Because Parallax effects are usually full width, you should turn on the Fluid container option in the Bootstrap theme menu.</p> <ul> <li>Enter your subtheme Boothstrap theme settings.</li> <li>Under General &gt;&gt; Container check the Fluid container box<img alt="Fluid checkbox" data-entity-type="file" data-entity-uuid="63427687-862f-44c2-8fe0-702819900f19" height="222" src="/sites/default/files/inline-images/fluid.png" width="482" /></li> </ul> <p><strong>Step #2 - Set up your Content Type and Views.</strong></p> <p>Here is my Page content type with 3 fields: Title (not show in in screenshot), Body and Background image</p> <p><img alt="Page content type fields" data-entity-type="file" data-entity-uuid="269a8101-beae-47ef-ba68-a1378278760b" height="215" src="/sites/default/files/inline-images/page_fields.png" width="710" /></p> <p>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.</p> <p><img alt="View listing page content types" data-entity-type="file" data-entity-uuid="f18ae1ae-2b92-4dcf-916a-f6bda9a5c76f" height="422" src="/sites/default/files/inline-images/view.png" width="854" /></p> <p>Now create some Page content and go to the View page to see the listing of your content.</p> <p><strong>Step #3 - Style the View using CSS</strong></p> <p>Here is my CSS:</p> <p><code>.view-homepage { </code></p> <p><code>  .views-row { text-align: center; position: relative; overflow: hidden; height: 500px; }</code></p> <p><code>  .views-field-field-background-image { position: absolute; width: 100%; height: 140%; } </code></p> <p><code>  .views-field-body { </code></p> <p><code>    position: relative; top: 50%;<br />     -webkit-transform: translateY(-50%);<br />     -ms-transform: translateY(-50%);<br />     transform: translateY(-50%);<br />     color: #fff;<br />   }<br /> }</code></p> <p><strong>Step #4 - Get the ScrollMagic files</strong></p> <p>Go to <a href="https://github.com/janpaepke/ScrollMagic/" rel="nofollow">Github</a> and download/extract library.</p> <p>Now go to your theme folder and create a folder called /js/ and move these files into the folder</p> <ul> <li>animation.gsap.min.js</li> <li>ScrollMagic.min.js</li> <li>TweenMax.min.js</li> <li>and also manually create a blank parallax.js</li> </ul> <p>You now need to tell the theme to load the js libraries. To do that, open your_theme/your_theme.libraries.yml:</p> <p><code>global-styling:<br />   css:<br />     theme:<br />      css/style.css: {} </code></p> <p><code>  js:<br />     js/ScrollMagic.min.js: {}<br />     js/animation.gsap.min.js: {}<br />     js/TweenMax.min.js: {}<br />     js/parallax.js: {}<br />   dependencies:<br />     - core/drupal<br />     - core/jquery </code></p> <p><strong>Step #5 Add the Parallax JS code to parallax.js</strong></p> <p><code>(function ($) {<br />     'use strict';<br />     Drupal.behaviors.myBehavior = {<br />         attach: function (context, settings) {</code></p> <p><code>            var controller = new ScrollMagic.Controller();</code></p> <p><code>            $('.views-row').each(function (index) {</code></p> <p><code>                var $bg = $(this).find('.views-field-field-background-image');<br />                 var $content = $(this).find('.views-field-body');</code></p> <p><code>                var tl = new TimelineMax();<br />                 tl<br />                     .from($bg, 2, {y: '-40%', ease: Power0.easeNone}, 0)<br />                     .from($content, 1, {autoAlpha: 0, ease: Power0.easeNone}, 0.4)<br />                 ;</code></p> <p><code>                var scene = new ScrollMagic.Scene({<br />                     triggerElement: this,<br />                     triggerHook: 1,<br />                     duration: "100%"<br />                 })<br />                 .setTween(tl)<br />                 .addTo(controller);<br />             });<br />         }<br />     }<br /> }(jQuery));</code></p> <p>Make sure the images you are using are big enough for the max width you want to display.</p> <p>You should now have a nice parallax scrolling effect for each node in the View list.</p> <p><img alt="Parallax example" data-entity-type="file" data-entity-uuid="5edd4b87-6dec-44f9-a919-2c5621bb556c" height="277" src="/sites/default/files/inline-images/parallax.gif" width="705" /></p> </div> <div> <div>Tags</div> <div> <div><a href="/tag/drupal" hreflang="en">Drupal</a></div> <div><a href="/taxonomy/term/81" hreflang="en">Drupal 8</a></div> <div><a href="/tag/drupal-planet" hreflang="en">Drupal Planet</a></div> <div><a href="/taxonomy/term/82" hreflang="en">CSS</a></div> <div><a href="/taxonomy/term/83" hreflang="en">Parallax</a></div> </div> </div> <section class="comments" > <h2>Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=61&amp;2=comment_node_page&amp;3=comment_node_page" token="WMY4_CR3wMHU671RWz9mYD2ti-PIk8em8dGPdokPrrQ"></drupal-render-placeholder> </section> <div id="field-language-display"><div class="js-form-item form-item js-form-type-item form-item- js-form-item-"> <label>Language</label> English </div> </div> Mon, 20 Jan 2020 10:07:06 +0000 admin 61 at https://shivanjaikaran.com Drupal 8: Composerizing Drupal 8 in 10 Easy Steps https://shivanjaikaran.com/drupal-8-composerizing-drupal-8-10-easy-steps <span>Drupal 8: Composerizing Drupal 8 in 10 Easy Steps</span> <span><span>admin</span></span> <span>Thu, 01/31/2019 - 00:07</span> <div><p dir="ltr">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)?</p> <p dir="ltr">Do you have a Drupal 8 website that is not managed with Composer? (Maybe you installed the site manually?)</p> <p dir="ltr">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. </p> <p dir="ltr"><a href="https://www.drupal.org/docs/develop/using-composer/using-composer-with-drupal" rel="nofollow">Read how Drupal 8 uses Composer.</a></p> <p dir="ltr">For this tutorial to be effective for you, you must take care of all the Assumptions I mentioned below <strong>BEFORE</strong> you start.</p> <p><strong>Assumptions</strong></p> <ul dir="ltr"> <li>You have a Drupal 8 website and it is under GIT version control (using master branch).</li> <li>You have not hacked core (but if you did note where you did it).</li> <li>You have contrib modules and/or themes in your code base.</li> <li>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)</li> <li>You have updated all Drupal core, contributed modules and themes to their latest stable version. (This is important for Step 6 to go smoothly)</li> <li>For this tutorial code base means your Drupal root directory</li> </ul> <p><figure role="group"> <img alt="my current codebase" data-entity-type="file" data-entity-uuid="2aed7e8e-dd95-44c5-a56c-137343a96786" height="73" src="/sites/default/files/inline-images/Figure%201.png" width="702" /> <figcaption><em>My current code base looks like this.</em></figcaption> </figure> </p> <p> </p> <p><strong>Step 1</strong></p> <p dir="ltr">Backup the following folders:</p> <ul> <li dir="ltr"> <p dir="ltr">your public files folder</p> </li> <li dir="ltr"> <p dir="ltr">database</p> </li> </ul> <p dir="ltr">Do not worry about the rest of your code base because it is under version control.</p> <p dir="ltr"> </p> <p dir="ltr"><strong>Step 2</strong></p> <p dir="ltr">Git clone your code base locally and create a new branch off your master branch (or whatever branch your live repos sits on).</p> <p dir="ltr">Commands</p> <p dir="ltr"><code>git clone &lt;your git repo &gt;</code></p> <p dir="ltr"><code>Now change directory into your newly cloned git repos.</code></p> <p dir="ltr"><code>git checkout -b composerize-drupal master</code></p> <p dir="ltr">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.</p> <p dir="ltr"> </p> <p dir="ltr"><strong>Step 3</strong></p> <p dir="ltr">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.</p> <p dir="ltr">But here are the Drush commands if you wish to do it this way:</p> <p dir="ltr">To list all the contributed module: <code>drush pm-list --type=Module --no-core --status=enabled</code></p> <p dir="ltr">To list all the contributed themes: <code>drush pm-list --type=Theme --no-core --status=enabled</code></p> <p>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)</p> <p> </p> <p><strong>Step 4</strong></p> <p>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.</p> <p dir="ltr">Now you can stage and commit this change to the current branch composer-drupal:</p> <p dir="ltr"><code>git add -A</code></p> <p dir="ltr"><code>git commit -m "Remove all files and folders except .git"</code></p> <p dir="ltr"> </p> <p dir="ltr"><strong>Step 5</strong></p> <p dir="ltr">Install a new version of Drupal using Composer:</p> <p dir="ltr"><code>composer create-project drupal-composer/drupal-project:8.x-dev composerized-drupal --no-interaction</code></p> <p>The name of the folder that composer will install Drupal too is composerized-drupal.</p> <p dir="ltr">Now you need to move <strong>ALL</strong> 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.</p> <p dir="ltr">So from your code base root:</p> <p dir="ltr"><code>mv composerized-drupal/* ./</code></p> <p dir="ltr"><code>mv composerized-drupal/.* ./</code></p> <p dir="ltr"><code>rm -rf composerized-drupal</code></p> <p dir="ltr">Now your code base should have the default Drupal composer files like Figure 2.</p> <p><figure role="group"> <img alt="Figure 2" data-entity-type="file" data-entity-uuid="49fab089-6d6f-4523-8660-d10bde423d91" height="51" src="/sites/default/files/inline-images/Figure%202.png" width="692" /> <figcaption><em>Figure 2</em></figcaption> </figure> </p> <p>Now it’s a good time to commit these changes.</p> <p dir="ltr"><code>git add -A</code></p> <p dir="ltr"><code>git commit -m "Added default Drupal composer files"</code></p> <p dir="ltr"> </p> <p dir="ltr"><strong>Step 6</strong></p> <p dir="ltr">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:</p> <p dir="ltr"><code>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</code></p> <p dir="ltr">Composer will then fetch the latest stable release and put it in the correct directory automatically.</p> <p dir="ltr">Now it’s a good time to stage and commit your changes.</p> <p dir="ltr"><code>git add -A</code></p> <p dir="ltr"><code>git commit -m "Add contrib projects to the codebase."</code></p> <p> </p> <p dir="ltr"><strong>Step 7</strong></p> <p dir="ltr">For any of your custom code:</p> <ul> <li dir="ltr"> <p dir="ltr">Place modules in drupal_root/web/modules/custom/</p> </li> <li dir="ltr"> <p dir="ltr">Place themes in drupal_root/web/themes/custom/</p> </li> <li dir="ltr"> <p dir="ltr">Place profiles in drupal_root/web/profiles/custom/</p> </li> </ul> <p dir="ltr"><a href="https://www.drupal.org/docs/develop/using-composer/using-composer-to-manage-drupal-site-dependencies#third-party-libraries" rel="nofollow">Visit this link if you use 3rd party libraries.</a></p> <p dir="ltr">If you made customizations to .htaccess or robots.txt, <a href="https://drupal.stackexchange.com/questions/222898/composer-updates-htaccess-file-when-updating" rel="nofollow">here is how to apply those changes in a composer managed Drupal site.</a> (Don't forget to commit your changes to composer.json)</p> <p dir="ltr"><a href="https://www.drupal.org/docs/develop/using-composer/using-composer-to-manage-drupal-site-dependencies#patches" rel="nofollow">If you patched core, contributed modules or themes see this link to patch with composer.</a></p> <p dir="ltr">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.</p> <p dir="ltr"> </p> <p dir="ltr"><strong>Step 8</strong></p> <p dir="ltr">TEST, TEST, TEST!</p> <p dir="ltr">Restore a copy of the LIVE database to your local machine and visit the URL of the local site in your browser.</p> <p dir="ltr">Drupal will automatically go to the install step. Follow through with the process and fix any errors along the way.</p> <p dir="ltr">Clear the cache: <code>drush cr</code></p> <p dir="ltr">You may have to find <a href="//drupalize.me/tutorial/clear-drupals-cache?p=2512" rel="nofollow">other ways to clear Drupal cache if Drush does not work</a> at this point.</p> <p dir="ltr">Check the status reports and click around the site. Any errors you find, fix it and commit it.</p> <p dir="ltr">The status page may have Drupal updates to the database available. Update the Drupal database if you need too.</p> <p dir="ltr">Usually I visit admin/config/media/file-system to double check the public and private folder paths are set correctly.</p> <p dir="ltr">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.</p> <p dir="ltr">At the end of this step, drush status and drush cr should return clean results with no errors.</p> <p dir="ltr"> </p> <p dir="ltr"><strong>Step 9</strong></p> <p dir="ltr">This is the big step where you push the changes up to the master branch.</p> <p dir="ltr">So push your changes up: <code>git push -u origin composerize-drupal</code></p> <p dir="ltr">Now we want to merge our composer branch into master:</p> <p dir="ltr"><code>git checkout master</code></p> <p dir="ltr"><code>git merge --no-ff composerize-drupal</code></p> <p dir="ltr">Delete the composer branch as we no longer need it:</p> <p dir="ltr"><code>git branch -d composerize-drupal</code></p> <p dir="ltr">Push the changes up:</p> <p dir="ltr"><code>git push -u origin master</code></p> <p dir="ltr"> </p> <p dir="ltr"><strong>Step 10</strong></p> <p dir="ltr">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.</p> <p dir="ltr">On LIVE:</p> <p dir="ltr">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.</p> <p dir="ltr">Then</p> <p dir="ltr"><code>git pull</code></p> <p dir="ltr"><code>composer install --no-dev</code></p> <p dir="ltr">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.</p> <p dir="ltr">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.</p> <p dir="ltr">Copy your custom files folder to code_base/web/sites/default/files</p> <p dir="ltr">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).</p> <hr /> <p>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.</p> <p> </p> </div> <div> <div>Tags</div> <div> <div><a href="/tag/drupal" hreflang="en">Drupal</a></div> <div><a href="/taxonomy/term/81" hreflang="en">Drupal 8</a></div> <div><a href="/tag/drupal-planet" hreflang="en">Drupal Planet</a></div> </div> </div> <section class="comments" > <h2>Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=60&amp;2=comment_node_page&amp;3=comment_node_page" token="j_G5IjZ4lvOBntfFr8wEXp-I0qP1oh7N4zalUMmuD8Y"></drupal-render-placeholder> </section> <div id="field-language-display"><div class="js-form-item form-item js-form-type-item form-item- js-form-item-"> <label>Language</label> English </div> </div> Thu, 31 Jan 2019 04:07:22 +0000 admin 60 at https://shivanjaikaran.com