resize banner

Hi,

The 'banner' on the homepage is actually an instance of the Spotlight functionality which is provided by Panopoly Widgets. To get it to display full width, just place it into a full width region on your page. It will remain fixed at the full page width, until you resize your browser down to mobile size, at which point it will adjust to fill the full width of the mobile device.

Alternatively, if you want more control than that for some specific instance of the Spotlight widget then you should probably write a custom Panels style plugin, and adjust the output through that.

Have a read through of https://drupal.org/node/427192 for some ideas. There are some links to tutorials there too, although most are a little out of date.

Well, basically yes. The image style controls the output of the image. But the image styles that the spotlight widget uses are generic styles shared and used by lots of different widgets and components provided by panoply. So if you just edit the image style you will alter the image output not only for this single instance of a spotlight widget but also for many other things. This is why I was suggesting implementing a separate style plugin. So that in this other style plugin you could make that widget output the images using your own image styles using whatever dimensions you like, without affecting other things.

I have not tried this, so tho is just conjecture at this point. Another alternative could be to use one of the field api alter hooks to alter the way that this image field gets output only in this specific instance.

Actually, just looked into this a little. The spotlight widget does use its own image style, but it is shared by all spotlight widget instances. So if you edit the panopoly_image_spotlight image preset (http://academy.local/admin/config/media/image-styles/edit/panopoly_image...) it wouldn't affect other parts of the site - but it would affect all instances of the spotlight widget.

Another option could be to use https://drupal.org/project/formatter_field and https://drupal.org/project/formatter_field_preset you could add a new formatter field to the spotlight widget fieldable panel pane (http://academy.local/admin/structure/fieldable-panels-panes/manage/spotl...) which should then enable you to specify the image preset to be used on the pane settings form, on a per widget basis. That actually might be a nice addition to panopoly_widgets itself.

I tried this at the weekend and it worked really well. Attached is a patch for panopoly_widgets. You'd need to download the formatter_field and formatter_field_preset modules though. Also, this patch uses the panopoly featured image style with the featured formatter preset. It may be better to introduce a new image preset into the panopoly_images module and use that instead.

Whilst this works, I think there may be a better, more lightweight way to implement this in panopoly widgets that doesn't require the addition of 2 modules.

Note, patch against panopoly_widgets 7.x-1.x-dev

Another option could be to use https://drupal.org/project/formatter_field and https://drupal.org/project/formatter_field_preset you could add a new formatter field to the spotlight widget fieldable panel pane (http://academy.local/admin/structure/fieldable-panels-panes/manage/spotl...) which should then enable you to specify the image preset to be used on the pane settings form, on a per widget basis. That actually might be a nice addition to panopoly_widgets itself.

Can you please put together more detailed instruction how to accomplish this? Thanks

The steps are:

1. Install and enable these 2 modules:

https://drupal.org/project/formatter_field
https://drupal.org/project/formatter_field_preset

2. Apply the patch

Download the file
https://www.drupal.org/files/2083401-panopoly_widgets-spotlight-style.patch

Move the file into the panopoly widgets directory. You'll find it here /profiles/openacademy/modules/panopoly

Apply the patch using git or patch from the command line.

Find out more about applying patches here https://www.drupal.org/node/620014

(Note: Although I used the OA version 7.x-1.0-beta5, as stated in the issue, I still had a small issue with the patch and had to manually add the bits of the patch that failed.)

3. Choose your own image style

Now if you go here:
http://local.openacademy/admin/structure/fieldable-panels-panes/manage/s...

In the 'Image style' row under the column 'Widget' you should see 'Formatter preset select'
Change this to ''Formatter select' (See attached image)

Now when you edit the field 'Image style' you can choose which image style to use.