Sean Reiser

Hi I'm Seán Reiser, this is my Personal Blog

#NewYorker #DrupalDeveloper #InfoSec #Photographer #GEEK #Whovian #MYSTie #LetsGoYankees #LongSufferingJetsFan #NAKnight #Quinquagenarian #CommitAwesome

So, I have a dropdown menu on my blog page and I wanted to have the title of the menu be the link to the current page.  I'm using a standard bootstrap3 dropdown for the menu.  Since this is a Drupal 8 site, drupal thankfully adds a class of is-active to the active a tag.  The following code is chunked out:


In order to swap out the title I added the following Js

When you go to /blog/life, the menu title is replaced by "Life".

Cross-posted from Stack Exchange.

So, I’m doing some delayed maintenance on this site.  You know, removing modules I don’t need anymore, cleaning up taxonomy, etc, etc.  Technical debt on this site because you know what they say about cobbler’s children and shoes.  When I decide it’s time I’ll be move the site to D9, I want to make the transition smooth.  The site has been around a while.  It was originally a Drupal 4.7 site which has been upgraded to 5, 6, 7 is currently a D8 site.  

So enough preamble, back in the site’s D5 days I had 4 Drupal sites  that I merged into this site.  Since there wasn’t a MigrateAPI 12 years ago, I renumbered the NIDs inside the source sites and then copied the database records into the target site.  In case I needed to debug things, I left gaps between each of the site’s modes (I added 2000 to the NIDs from siteA, 4000 to the NIDs from siteB, etc) so I could easily tell where the nodes came from.  

This is worked and the merged site has been chugging along for over a decade.  I’ve come o a point where the system has ~3,000 nodes but the highest NID is approaching 11,000.  I don’t see any risk here, I’ve worked on much larger sites.  I’m in no danger of exceeding the max number of NIDs anytime soon. 

My question is, Is there any benefit to compressing the NIDs (probably by migration to fresh Drupal installation)?  I don’t see one, but I might be missing something that someone else can see.

Launched a new version of the site this evening. I wanted to freshen up the blog theme and unify the branding between the consulting site, the resume and the photography site.  Everything runs on the same domain now with 301's directing users to the proper page on seanreiser.com. 

There are still a couple of things i want to do but this is enough to bring it live.  Any problems, drop me a line.

I spent a couple of years playing and working with Drupal before actually joining drupal.org.  It's been a fun ride!

 

Writing this mostly as a note to myself.

I'm in the process of migrating nodes from three different Drupal sites into a new Drupal 8 site.  Over the last day or so, I've been working on building out the Migration YML (Migration API FTW).  Of course as I've been debugging I've been importing and rolling back migrations.  Of course, as I do this, my starting NID is getting larger and larger.  It was over after me test data nigrations.  When the time comes for the final import of content, I want the first NID to be 1 (just for cleanliness sake).

In Drupal 7 the delete all module did this with a "--reset" flag but doesn't in D8.  Here's the couple of lines of SQL code to reset the auto increment on the necessary tables:


Make sure you DELETE all nodes before doing this, otherwise you are likely to cause data corruption down the line,

Share and Enjoy!

 

I’m in the process of moving my photography site into my current Drupal 8 site.  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).   The image attached to this article gives a quick demonstration.   On many sites this is accomplished using David DeSandro’s masonry.js.  

Drupal has a Masonry Api and a companion Masonry Views Module.  I installed the modules and they mostly worked but didn't quite meet my needs.  I wanted a little more control of the grid.  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).  Although my current design doesn't require it, I suspect  that down the road I might want certain images to span multiple columns.  I use bootstrap on my sites to make things simple so I didn't want to write custom CSS to manage column sizes.  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 found the answer was under 10 lines of code and a little configuration work.

A quick google search led me to this codepen built by the developer of masonry.js which made things seem simple enough. 

So let's break down what I did:

  1. I already have a theme built which is using Bootstrap 3.  The theme's machine name and directory is seanreiser (replace seanreiser with your theme's machine name)
  2. Download the masonry library from here.
  3. Place masonry.pkgd.min.js in themes/seanreiser/libraries/masonry (so the file is located at themes/seanreiser/libraries/masonry/masonry.pkgd.min.js).
  4. Add the masonry library to the theme.  Add this code to my theme's seanreiser.libraries.yml :
    
    
  5. Create a view:
    1. View Name : Photo Gallery
    2. Style : Unformatted List
    3. Settings -> Row Class -> col-xs-12 col-sm-6 col-md-4 col-lg-3
    4. Show: Fields
    5. Add the image to the field list.
  6. Attach the library to the views the view template  (themes/seanreiser/templates/view/views-view-unformatted--photo_gallery.html.twig)
    
    
  7. To my site's themes/seanreiser/js/script.js I added:
    
    
  8. Clear cache and rock and roll.

And it worked... mostly.  I had an issue where image overlapped occasionally.  The issue was that the grid would be initialized before the images were loaded.  Thankfully, David DeSandro has another library, ImagesLoaded, which detects if all your images have been loaded.  This required a couple of changes:

  1. I downloaded the library and put it in: themes/seanreiser/libraries/imagesloaded
  2. Add the imagesLoaded library to seanreiser.libraries.yml:
    
    
  3. Attach the library to the view (themes/seanreiser/templates/view/views-view-unformatted--photo_gallery.html.twig):
    
    
  4. Modify your JS to hold off on initially the grid until the images are loaded (themes/seanreiser/js/script.js)

Now it's working just as I want.  Answers to some questions that I've been asked:

  • Why did you include the library manually instead of using the Masnory API module?
    Since I was using the library on one view in one theme, I didn't see the benefit in having the overhead of the module.  If, in the future I use masonry in other ways, I'll change this.
  • You mentioned photos spanning columns where is that?
    I haven't implemented that.  If I decide to do it I'll add a link here to the todo.
  • Where is the photography site?
    I'm in the middle of a major rebuild of a number of my sites.  Stay Tuned.
  • Update 4/24/2019 1:00AM EDT - You said less then 10 lines, there's a lot more there?
    My bad. views-view-unformatted--photo_gallery.html.twig is a copy of the default views-view-unformatted.html.twig with 2 lines added (the attach library). I am counting that as 2 lines.

Share and Enjoy!

 

My blog homepage is basically an activity feed, a combination of Blog Posts, Short Notes, Images and Links, much like a facebook wall or a tumblog.  I decided I wanted to add a link to one of my other sites in the feed, basically a “house ad”.  Blatantly stealing from facebook, I decided that I wanted the second item in the feed. My goal is to create something like this:

In Drupal 7, I would have used preprocess_views_view to insert the ad into the view, but I wanted to do something that was more sustainable and not as hard coded.  Although on my blog I perform all roles (developer, designer, themes, content admin, etc), I wanted to give non-developers the ability to add, change and delete the advertisement.  So I decided to use Drupal's block interface.

I did a little investigation and found that the Twig Tweak module provides a twig function to fetch and drupal regions (and blocks, entities, fields and other Drupalisms). Here's a list of of the functions Twig Tweak provides. The drupal_region twig would do what I need.

Here’s what I did

  1. I added a region to my theme config, “view_inline_ad.”
  2. I added the block with the ad it to the region.
  3. Added the code to render the region to my views template (views-view-unformatted--blog.html.twig)
    
    
  4. Cleared Cache, loaded the page and rock and roll.

One problem I ran into, on my site the blog theme is not the default theme. I host multiple sites out of the same Drupal instance and am using the Switch Page Theme module to change theme based on site context. drupal_region() assumes you're using the default theme and not the current theme so it couoldn't find the region. It does accept a second parameter, theme. I popped the theme's machine name in there and it worked like a charm.

So, this ad has been popping up _a lot_ in my timeline and it annoys me. The reason designers build art sites on a white cube / black box esthetic is simple: If your art website's design is memorable, it's detracting from your art. The only thing a visitor should remember about your art website is your art, everything else should just get out of the way. It's why museums hang works of paintings and photographs on white walls.

At the end of the day, which would you rather hear:

"I love the design of your website"

or

"I love your art"