Hi there,

I intend to use the Glightbox module. As mentioned in this issues thread, when used as a node field formatter, the module does not format the images in the node view per se but create a "lightbox" pop-up once an image is clicked.

I  am trying to write a module called Glightbox_Justify which will "justify" the images in the node using the JustifiedGallery plugin. The module will depend on Glightbox because I still want to have the "lightbox" pop-up as well. There are Backdrop modules doing similar things but only as a view plugin (such as Masonry Gallery, Views Photo Gird, and Mosaic Grid).

The idea is

  • to use the JustifiedGallery plugin to format the display. I used the hook_library_info().
  • "alter" the display format configuration of Glightbox, using the hook_field_formatter_info_alter() in order to expose a form, using the hook_field_formatter_settings_form_alter(), so that people can enter their preferred row height (in px) of the image in the node content. 

Format configuration
Added image height now visible in the format configuration.

That is what I did so far. After enabling the module I could see the field where I can enter the desired row height (framed in red). you can have a look at the code at https://github.com/hajarimanitra/glightbox_justify

I can install and activate my custom module Glightbox_Justify but it does not do what it is intended for. When I create a node with mutliple image, the images are not justified yet.  I think I still need to "activate" the js and css file from the library but I do not have any idea on how to do that.

So my questions are:

  • Is the hook_library_info() enough for "loading" the library or do I still need to do something.
  • How will I pass the value of the preferred image row height from the configuration to the js library (rowHeight variable, see the plugin documentation here)
  • The css file in the plugin seems to act on a specific class (.justified-gallery), how will I attach that class to the wrapper to the images to be display in a justified format.

Thanks in advance,

Haja

 

 

 

Most helpful answers

You need both. One defines (creates) the library, the other call (includes) it.

Hi hajakely! Thanks for your question. I suggest you take a look at the documentation on how to work with libraries in Backdrop.

One way to to pass parameters to your JS: you'll need to use backdrop_add_js() to add "settings" parameters, and then create custom js code (which you'll also need to load) to retrieve those parameters and invoke/trigger the third-party js library entry point. This is the same as Drupal 7.

I'd suggest you take a look at the js example in the Examples for Developers modules.  

What you're looking for is backdrop_add_library() (see https://docs.backdropcms.org/api/backdrop/core%21includes%21common.inc/f...). hook_library_info() just defines information about a library.

Comments

Does backdrop_add_library( ) need to be used with hook_library_info( ) or only backdrop_add_library( ) is needed?

You need both. One defines (creates) the library, the other call (includes) it.

Hi hajakely! Thanks for your question. I suggest you take a look at the documentation on how to work with libraries in Backdrop.

One way to to pass parameters to your JS: you'll need to use backdrop_add_js() to add "settings" parameters, and then create custom js code (which you'll also need to load) to retrieve those parameters and invoke/trigger the third-party js library entry point. This is the same as Drupal 7.

I'd suggest you take a look at the js example in the Examples for Developers modules.  

@BWPanda and @argiepiano : Thanks for your help. I will have a look at them.