By rusdvl on

Hi,

Am trying to create an image style that would resize by percentage instead of pixels. Exactly how you used to be able to do in Drupal 6 (really frustrating that it wasn't included in 7).

From googling, it seems to not be such an easy task. I don't really want to use the imagecache_actions module to achieve this.

Is there a way to create a style using PHP code? I need to use the style in a View... I created a block that displays images, but need to resize the image by % and not pixels.

I was even thinking of rewriting the output, but the image field does not give me a path token to be able to do it manually.

Any suggestions would be welcome.

Thanks

⋅ Categories: Drupal 7.x

Comments

rusdvl’s picture

rusdvl commented

Ok.... so managed to do a workaround for this whole silly lack of functionality that existed before thing...

  1. Add a "File Usage: File" relationship (Advanced->Relationsips)
  2. Add a "File: Path" field, NOT "Content: Image" (Block details->Fields)
  3. Make sure to click on Display download path instead of URI.
  4. Click on Exclude from display
  5. Add the "Content: Image" field
  6. Click on the Rewrite Output option
  7. Enter custom HTML e.g. <img src="[uri]" alt="[field_image-alt]" title="[field_image-title]" width="90%" />

This is obviously a fix for a View... not sure how you would go about doing it just as a normal display... but did not need it outside the View in my site.

crosshairs’s picture

crosshairs commented

Very helpful, thanks :)

victory17’s picture

victory17 commented

I also had a similar problem. Instead of using to render the percentage based widths of images, I used JQuery in my themes. This approach also works in views and the responsive images and styles module. and if Javascript isn't enabled it will just use the original image.

I just added this to the included script in my theme

Drupal.behaviors.imagepercents = {
	  attach: function (context) {
	  	imgs = $('img',context);
		imgs.each(function(index) {
           //Get the Max Width of each image
		   maxwidth = $(this).width();
		   $(this).attr('style','max-width:' + maxwidth + 'px;width:100%');
        });
		
	  }
  }

This works for my use case, but with some modification it could work in others