![]() ![]() ![]() Answers to some questions that I've been asked: Add this code to my theme's : masonry: js: libraries/masonry/: ) Place in themes/seanreiser/libraries/masonry (so the file is located at themes/seanreiser/libraries/masonry/).Download the masonry library from here.The theme's machine name and directory is seanreiser (replace seanreiser with your theme's machine name) I already have a theme built which is using Bootstrap 3.I found the answer was under 10 lines of code and a little configuration work.Ī quick google search led me to this codepen built by the developer of masonry.js which made things seem simple enough. I knew I could get the results I wanted with some work but I got to wondering, "how much work would it take to just integrate the library and write some JS". I use bootstrap on my sites to make things simple so I didn't want to write custom CSS to manage column sizes. Although my current design doesn't require it, I suspect that down the road I might want certain images to span multiple columns. I wanted to have a responsive design with different number of columns based on screen size (1 or 2 columns on phones, 3 columns on tablets, 4 on large desktops). I wanted a little more control of the grid. ![]() I installed the modules and they mostly worked but didn't quite meet my needs. On many sites this is accomplished using David DeSandro’s masonry.js.ĭrupal has a Masonry Api and a companion Masonry Views Module. The image attached to this article gives a quick demonstration. After a little thought I decided that I wanted to have my photos in a grid using a masonry layout (you know, the layout made famous by Pinterest). If you are inspired to add Bootstrap to your Drupal 7 or Drupal 8 website, it can happen quickly and easily, if you entrust it to Drudesk’s front-end magicians.I’m in the process of moving my photography site into my current Drupal 8 site. The process of creating a Bootstrap subtheme in Drupal 8 is described in detail in a technical blog post by one of the developers who has done lots of projects with Drudesk and InternetDevels team. All you need is to download the basic theme from, create your subtheme and then customize it. For this purpose, the theme provides a ready "bootstrap_subtheme" folder. To truly avoid limits to your customization, you can take the Bootstrap theme and create your own subtheme. extensive integration for the framework’s CSS, JavaScript and Componentsġ00% customization: creating a Drupal Bootstrap subtheme. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |