Forums

Changing Image Preferences in Already-Built Designer Content Block

Permalink
Hi

I've built a block with Designer Content add-on, and for the image option I chose to center and crop.

I've realised now I don't want this, I need the image to just be 100% wide and height on auto.

Can someone please point me in the right direction of:

1. where to find the actual file where I would change this
2. the php code required to change the image preference to do what i want it to do as listed above.

Thanks in advance!
PatrickCassidy
 
mnakalay replied on at Permalink Best Answer Reply
mnakalay
Hello,
First you should know that you don't need to have a width set to 100% and height to auto. What you need is to have max-width:100%; which automatically sets the height to auto. Unless you don't mind ending-up with a distorted image?

You should look in your block folder that should be in the root blocks folder.
Look in the file controller.php, the code resizing the image is in the function view(). Something like this
public function view() {
      $this->set('field_1_image', (empty($this->field_1_image_fID) ? null : $this->get_image_object($this->field_1_image_fID, 350, 350, false)));
   }

Yours might be different if you have more than one filed but what's important is:
$this->get_image_object($this->field_1_image_fID, 350, 350, false)


First you need to modify the value 350, 350, and false.
Those are the width, the height, and whether to crop or not.

Set them to 0, 0, and false so your image won't be resized.

Save that close the file and now open view.php

In it you should have something that looks like
<?php  if (!empty($field_1_image)): ?>
   <img src="<?php  echo $field_1_image->src; ?>" width="<?php  echo $field_1_image->width; ?>" height="<?php  echo $field_1_image->height; ?>" alt="<?php  echo $field_1_image_altText; ?>" />
<?php  endif; ?>


Once again maybe slightly different from yours but what's important is the <img tag.

Modify the beginning to look like:
<img style="max-width:100%;" src=...

Don't delete anything of the existing code, just modify the <img part to add:
style="max-width:100%;"

between img and src

Then you need to delete the width and height. Everything between:
width="<?php echo... and the next ?>" and everything between height="<?php echo... and the next ?>"

In the end you should have something like:
<?php  if (!empty($field_1_image)): ?>
   <img style="max-width:100%;" src="<?php  echo $field_1_image->src; ?>" alt="<?php  echo $field_1_image_altText; ?>" />
<?php  endif; ?>


The only difference between yours and mine could be the variable $field_1_image that could have a different name in your code. Keep that different name but modify the rest.
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Such a detailed answer, thanks buddy. I'll get to work at it now and let you know how I go!
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Hi mnakalay

It worked thanks!

The only thing I had to change from yours was to actually keep the width in the controller. With it set to zero, the images just blew out in width across the screen.

That particular image is wrapped in a div too - so that's probably what affected it.
mnakalay replied on at Permalink Reply
mnakalay
You're very welcome.