Posted by korontari on Thu, May 23, 2019 - 2:28am

I am trying to build a view style plugin module. I need to change the rendering of image field for the view that uses this style plugin. To be more specific I need to add/change some attributes to <img> tag in the output.

For instance instead of this:

<img src="some_image.jpg" width='123' height='123' alt=''>

I would like to have this: 

<img src="some_placeholder.gif" data-src='some_image.jpg' class='my-class' width='123' height='123' alt=''>

At first I have tried to use ' template_preprocess_image', but it affects all images on the website, while I need to change only views that use my views_plugin_style. I am very new to Backdrop API so I apologize if I have overlooked some obvious solutions.

Comments

Sat, May 25, 2019 - 11:47am by korontari

After browsing API docs I have come up with the following solution:

function mymodule_preprocess_image(&$variables) {
  $view = views_get_current_view();
  if(isset($view)) {
    if($view->name == 'mymodule_view_name') {
      
      // changing variables..
      $path_or_uri = $variables['uri'] ? $variables['uri'] : $variables['path'];
      $variables['attributes']['data-src'] = file_create_url($path_or_uri);
      $variables['attributes']['src'] = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
      $variables['attributes']['class'] = 'b-lazy';

    }
  }
}

I wonder if it is ok performance wise and if it is the right 'Backdrop way' of doing this? :) I am trying to affect only how <img> tag is rendered without touching any possible wrappers around.

Sun, May 26, 2019 - 4:51am by herb

So you have a style plugin in addition to using the preprocess function? I would have thought you could do it all with the plugin. Maybe have the plugin create a new template? Can't help much more.

Tue, May 28, 2019 - 4:55am by korontari

Thank you for the responce! Actually my goal is to create a style plugin and the preprocess function is just something I tried and it worked. :) 

I have tried creating a theme function that would render <img> the way I want. But I am not sure if I use it right as I have just added it into '#theme' element of some array in views. The issue is that if a field has some formatter attached (i.e. lightbox formatter for the image field) then this formatter provides it's own theme so I would prefer not to touch this.

As I have a very vague Idea of how the view is processed I don't know where is the right place to read and change such data. The BD documentation about views lifesycle is marked as todo and I guess it would be very helpful in this case.