Add the ability to create a CSS class for image field in Views

[simone960]

Create a css class for Image field in Views

In Views, when adding an image field there's no way I can add a css class to the image tag. For example, if I were to shape the image to a circle using bootstrap I have to add a .rounded-circle class to the image and I couldn't find a way to do it. So I think it's conveninent and important to have such function added to the views.

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Here just a sample I imagine how it would look like or something similar. Please consider. Thanks!

[olafgrabienski]

@simone960 I agree, the option to provide an image class in Views is helpful. That said, I'm not sure where the best place in the UI would be: Directly beneath the Image Formatter (and so on) settings, or in the "Style settings" section.

I guess we need however more feedback here!

[simone960]

Personally I would prefer to have it placed somewhere below the Image Formatter instead of "Style settings". It is relevant, direct and obvious location for a new and distinctive feature. If we put it under "Style settings", those who come from Drupal may overlook it because of the familiarity with the Views. Honestly, I don't often use those features in the styles settings. If I were to add wrapper to fields, I would rather to use a Global: Custom text field and throw everything inside as it is easier to see things in one place for the ease of maintenance. Just some thoughts. Others ?

[klonos]

We should note that there is an existing "Customize field HTML" option with an accompanying "Create a CSS class" option (this is available for all fields; not just image fields). So, one can add custom classes to the image field wrapper, but not the image field <img> tag itself.

As a site builder, I would like to not have this be an imagefield-specific thing. I have looked into a couple of ways to achieve this, and I have identified a couple of things that we are missing at a lower level. I would love it if we could address these in core:

1. Ideally, you should be able to use the "Rewrite the output of this field" Views in-built feature, in order to rewrite the output of the field as such:

   <img src="[field_image-src]" class="rounded-circle" width="[field_image-width]" height="[field_image-height]" alt="[field_image-alt]" title="[field_image-title]" >

   The only problem there is that there is no [field_image-src] replacement token available that simply outputs the raw image src 😞:

   

   Related: https://drupal.stackexchange.com/questions/32273/get-images-url-as-a-token-for-use-in-views-replacement-pattern

   ...which leads to https://www.drupal.org/project/image_url_formatter

   This module adds a url formatter for image field. Then you can output image url directly.

   Thanks @simone960 for filing [D8] Add new formatter - "URL to Image" to image field in Views #2921 for that 👍

   Also related: https://stackoverflow.com/questions/6762914/get-the-src-of-the-image-field-in-a-view-in-drupal

   ...there is a solution suggested there, but it requires the https://drupal.org/project/file_entity module. According to https://backdrop-ops.github.io/slides/intro-mini.html#/19 this module has already been merged in core, but I do not see any "Rendered file" option for the file formatter in views:

   Backdrop 1.10.1:

   

   D7 with file_entity 7.x-3.0-beta8 or 7.x-2.22:

   

   Did we somehow miss this when merging, or has this feature been added to the contrib module after we merged it in core? If the later, then [META] Stay on top of contrib module updates #2789 please.

2. There is also this module: https://www.drupal.org/project/imagecache_token

   This module provides additional tokens for image fields. For each image style available, a token [node:field_image_field:style_name] will be provided. It is also possible to get image properties like width or height by using tokens like [node:field_image_field:style_name:height].

   ...what caught my attention in the project description was this:

   Drupal 8 port
   Thanks to work from Berdir, Bambell, silkogelman and others, the functionality has been merged into the Token module itself, so a separate module will not be needed for D8.

   Big 😞 there. Perhaps it might be worth adding the functionality of this module to the Token module included in Backdrop core.

[klonos]

...question is. Would we still need to add a dedicated field for adding CSS directly to the img tag if the before-mentioned modules/features were in Backdrop core? If yes, then keep this ticket here open and discuss/action; if not, then close this ticket here and work on implementing the other features in core.