3

I'm using Views to generate some HTML, and this includes a field from a Views field.

My problem is, the layout needs the images to be reponsive (height and width based on the parent element), but this is being broken by Views writing in the width and height as HTML attributes which override all the CSS.


I've tried the answer to this question which uses hook_field_attach_view_alter() to remove the width and height from the output array - but it doesn't work, the width and height are still written into the HTML.

Checking the width and height values at the time hook_field_attach_view_alter() is called, it seems it's a timing problem: it looks like this is called before the image preset is applied. E.g. my image preset is 190px x 190px scale and crop: at the time hook_field_attach_view_alter() is called, the width and height are the original width and height of the image, then the 190 gets written over whatever changes the hook makes.

Is there another hook I can use for the same effect?


I also tried using Rewrite results in Views to re-create the image from its component parts. The problem is, it has access to everything except the actual image URL or URI:

enter image description here

Is there a way to access the image URL or URI in the replacement patterns for Views rewrite for an image field?

3
  • Have you tried using a Views template?
    – beth
    Aug 25, 2014 at 23:23
  • I thought they were for whole views, not for specific field types? Aug 25, 2014 at 23:35
  • There are different levels of specificity of views templates. Click the "Theme: Information" link under the advanced settings of your view for more info. There are field-level templates for views.
    – beth
    Aug 26, 2014 at 18:35

1 Answer 1

3

It feels clumsier than I'd hoped and requires a module, but I found a solution:

  1. Install image_url_formatter module, which creates an image field display that is just the url but still allows you to choose from available image styles
  2. Change the image field in the view to use the new "Image URL" display.
  3. Use the Views rewrite feature to rebuild the image (<img src="[field_image]" alt=... />).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.