I have the Views Slideshow module running a slideshow of 4 items in it and the background image is set to an image style that scales to 695px height (and no width setting). This also happens when I set it in the view to "original size" which is around 1140x698)

However, when the slideshow is running it changes the element values (in views-slideshow-cycle-main-frame-row.html.twig) to give the style of

position: absolute; top: 0px; left: -677.969px; z-index: 4; opacity: 1; display: none; width: 627.969px; height: 514.98px;

You see that even though the image's width is closer to 1140px it is only showing 627px. It doesn't resize the image, it crops it to this shape. Instead I want the image to stretch across the page (regardless of how wide it is).

I need to find out

  1. Where does this setting come from (image settings? coded in the module itself?)
  2. How to change this so that it overwrites only for this View (homepage_slider) for this theme (if the settings are in the module or even the core)?

I am still new to theming with Drupal so if need to add a page, please help me with what to name it and where to put it if at all possible. Or for additional code, goes into what file?

Thank you for your help!


It IS using jquery.cycle.all.js and there are Advances settings in a CASE statement in views_slideshow_cycle.js but it is in the /modules folder and I think it would get overwritten when there is an update.

So how or where do I make changes to this setting for this specific View that will persist between updates?

Thank you.

  • Calculations/styles like these can not be done by Drupal/server side, because they are depending of the clients screensize and the current state of the slider, and therefore are calculated dynamically on the client's browser with JavaScript. – Hudri Apr 30 at 14:45
  • The JavaScript that is run is pulled from the server (theme) and is either pre-set or calculating the size based on the users' screens. So where does that JavaScript reside and where is the setting or calculation coming from? – Hometoy Apr 30 at 18:22
  • Looking at the module you described, it is most likely using jquery.malsup.com/cycle – Hudri May 1 at 7:57
  • Correct! I found the settings calculated in jquery.cycle.all.js. Now I need to figure out how to set the Advanced settings. The views_slideshow_cylce.js is in the modules folder so that is no good to change because won't it be overwritten when it is updated? How/where do I set these advanced settings? – Hometoy May 24 at 14:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.