[Drupal] How to fix Image Loading Issue in Flexi Slider?

Flexslider is one of the most popular modules in Drupal to build responsive slideshows. The Drupal flex slider module integrates with flexslider library for creating slideshows. As per user reviews/feedbacks you could notice certain bugs reported mainly cross browser compatibility issues which you may face while integrating this module.

In this article I like to share my experience with the flex slider module. The flex slider was working fine, the issue I faced is that unaligned nav buttons and jerking of slider on first page load, the cause of the issue was flexslider's height initially loads with height 0px.

This issue was mostly reported when using chrome browser. For solving this issue I tried updating core js and CSS, also tested with latest flexslider library these steps were not needed. For a quick solution we could search for any patches available for this issue. Patches are set of code that gives a solution for our existing issue, applying the patch the issue will be solved. I found a relevant patch from the following link, https://www.drupal.org/node/2086525#comment-8758251 with patch named 0001-Issue-2086525-by-alvar0hurtad0-Johnny-vd-Laar-Flexsl.patch. By using this file the patch will be applied for the file assets/js/flexslider.load.js of flex slider library.

Steps for applying the patch,

• Download the relevant patch from the above link and put it in the patch folder in your project directory.
• Open terminal, go to the project directory, type following command, :~$ patch p1 < /home/user/<project-dir>/<patch-name.patch> your patch will be applied.
• Clear cache and reload the slider page issue will be solved.

Hope you have found this note useful. Thank you.

Please fell free to share your thoughts and suggestions regarding this here.