Hi, thanks for the excellent module!
I may be missing something here but I cant get image styles to resize the flexslide images.
Im using flexslide fields.
I have attached an image field to a content type and am displaying it with flex slide.
I have created a new option set and selected an image style for it(tried multiple styles to no avail).
The optionset is applied to the flexslide display in the content type. Ive created slideshows and they are working fine, but the image style doesn't get applied when the browser is maximised. However its still reponsive, getting smaller as the browser window is minimised.
Have come up with a workaround by overriding the width within the css style .flex-nav-container from 'width: 100%' to the needed pixel width. But im sure thats not the best solution.
Any light on this would be very appreciated.
Comment | File | Size | Author |
---|---|---|---|
#38 | Screenshot at 2014-03-04 13:21:13.png | 480.09 KB | panditvarun20 |
Comments
Comment #1
pyxio CreditAttribution: pyxio commentedHi
Did you ever find a solution to this? I have the same issue? Cheers Kevin
Comment #2
navalogan CreditAttribution: navalogan commentedhi,
I have the same problem had anyone got a solution thanks!
Comment #3
mvdve CreditAttribution: mvdve commentedFlexslider doesn't set the maximum hight and width CSS value.
You van fix this issue by adding these in your stylesheet.
For example, when the image style has a resize of 500x250
add the following:
Comment #4
pyxio CreditAttribution: pyxio commentedHi
So I am confused. What is the point of assigning image styles in options if it does not resize images accordingly? OK, I can define an image class through views and CSS that will resize images, I just don't get then why it is necessary to set an image style. Cheers, Kevin
Comment #5
pyxio CreditAttribution: pyxio commentedHi,
So what actually controls the image style? The view (i see from examples it is set to flexslider_full, or the options (again, set to flexslider_full), or some custom CSS classes? Which on has priority views or options? Can I leave one blank with no choice and control this in one place? Thanks. Kevin
Comment #6
pyxio CreditAttribution: pyxio commentedGreetings,
So this has been driving me crazy trying to get control of my image sizes and trying to find out where to gain this control. After hours of troubleshooting I hope to be able to help others in this post having the same problem.
The first thing is this, in the flexslider.css stylesheet you have a flexslider img style that uses 100%. Now, this is probably necessary for the responsive effect which flexslider is all about. But the problem is that it overrides all style widths and stretches to the container the image is located within. For this reason, image styles have no impact whatsoever. So if you have been banging your head wondering why images are huge no matter what style you choose, that is why. You will need to use CSS for your containers instead of image styles. This means it doesn't matter what image style is defined in either flexslider options or views image style. It will always bee 100% of the container the image is located within.
OK. So now that is out of the way. Next, if you are using views flexslider like most folks probably are, the actual flexslider options image style is overridden by views. So simply leave the options at original image in flexslider options and set your desired image style in views. Of course, as I mentioned above, this will not have any affect so long as img class is set to 100% in the flexslider.css stylesheet.
The solution that works is #3 above. The main point is that Image styles don't seem to have any effect without the custom style #3 so I wonder why there is even an option to use them in flexslider. Now, I may be wrong and missing something. This has just been what I have discovered. I look forward to any other opinions on this issue.
Cheers
Kevin
Comment #7
artatum CreditAttribution: artatum commentedA pretty good advice.
You saved my life. Thx
Comment #8
pyxio CreditAttribution: pyxio commentedcool. glad i could be of help. cheers kevin
Comment #9
Joel MMCC CreditAttribution: Joel MMCC commentedAs I understand it, Image Styles only affect how the web server serves an image (it physically resizes the raster and stores a copy of the new image at the new size, and serves that instead of the original). CSS height and width specify the size of the actual displaying of the image (overriding its actual raster size if height and width are specified — the same thing happens with the old deprecated “width=” and “height=” attributes to the “<img…>” tag).
So, if you set an Image Style to resize and crop an image to, say, 300×200 pixels, that is what will get sent over the HTTP connection. If your CSS is set to display that at 600×400 pixels, the result is going to show up that big, but since the Image Style is set to send a resized and cropped version that’s only 320×200 pixels, the resulting image will be blurry or pixelated (depending on how your browser and OS handle an image being displayed larger than its actual size — blurry [resampled with bilinear or bicubic instead of nearest neighbor] is far more common these days), no matter how big the original image actually is (say, 700×350 — such an image would also be cropped by the Image Style’s Resize-and-Crop on the left and right to fit the differing aspect ratio).
Conversely, if your Image Style is set to resize and crop to, say, 640×400 pixels but your CSS forces that to 320×200, more data will be sent over the connection, and, assuming that the original is 640×400 or larger, the resulting image will display quite sharp, exploiting the full resolution of “retina-class” displays on modern smartphones and tablets.
Comment #10
pyxio CreditAttribution: pyxio commentedI think image style is useless for flexslider. instead.. there should be a field for classes. it doesn't matter what image style you assign because it is max-width 100% no matter what. So the only thing flexslider cares about is your css container size... not image style. it has no purpose at all.
Comment #11
kin11 CreditAttribution: kin11 commentedSolution for image style with flexslider module:
There are two issues here: there are a couple of modules named with the term "flex" on one hand and, on the other hand, there is a plug-in or library or a peace of software called flexslider.
The image style will not be overridden as explained above if instead you use flexslider as the plug-in for another module module called views slideshow.
Comment #12
reign85 CreditAttribution: reign85 commentedHello guys.
I get the the same problem and, even after read all your answers, i can't figure to fix this.
I display in a block a custom node which get an image field, set to flexslider. the block is on the header region, such as a main slideshow.
As you guys said it, the setting of 'Normal image style' make me huge slider.
I understand the cause, but what about solves?
I have tried to make a div container before my node, with max-width and max-height fixed, but the 100% property ignore this container and result is worst
I'm really newb on CSS, so can you give me an easy method please?
Comment #13
pyxio CreditAttribution: pyxio commentedreign85,
something is wrong with how you setup your div. the 100% property is in relation to its container. your div which is supposed to be the container is messed up. add the following class to your div in the html class="border: 1px solid red;" does the slider image fill 100% width of the red border? it should. and what about the red border? how wide is it? do you have a proper width set on it so it constrains the flexslider to the size you want?
Comment #14
reign85 CreditAttribution: reign85 commentedHello. you were right, there is some probs on my div.
Now i just use a custom theme with custom css on my div container
Thanks for all
Comment #15
reign85 CreditAttribution: reign85 commentedSo, that's weird, i always get few empty line in the bottom of my slide, i just move the controls on the slide, but the slide control bar is always here:
capture
there is an option to mask this?
Comment #16
pyxio CreditAttribution: pyxio commentednot sure exactly which element you want removed but something like..
should remove it from the display. cheers
Comment #17
reign85 CreditAttribution: reign85 commentedHumm, it's embarrassing,
Iv just seen that .flexslider get the property "margin: 0 0 60px"
So, I override it
Thanks for all
Comment #18
Outcydaz CreditAttribution: Outcydaz commentedVersion 2.0+ just gave headaches. Images would stretch horizontally but not scale properly in height and width.
Reverted to Flexslider 7.x-1.0-rc3 and this works. This gives 2 options when applying image styles.
OPTION 1
This allows you to add your image style to the image field on the content type you're using.
OPTION 2
If you use the 'FIELDS' format in VIEWS you can apply the image style on the image. Keep the formatter as image.
Comment #19
kopeboy CreditAttribution: kopeboy commentedYeah, I'm having an headache on the same issue!
When I resize my window, some images of the same slideshow scale well, others only scale horizontaly, becoming taller in proportion.
I noticed that the only difference is that the pictures that don't scale well have the "old deprecated" (as said in #9) “width=” and “height=” attributes to the “<.img>” tag. The formatter is Original Image, but I've tried any combination of custom/default image styles, and Flex's Option sets.
For some weird reason (I couldn't figure out) the first 2 SLIDES of my slideshow that I created something like a week earlier don't have those attributes in the HTML, and they scale perfectly! I said SLIDES and not images because the image I'm testing is the same file/source/style selected with Media Library for every slide!
THIS IS NOT AN UPDATE ISSUE, since I have never had installed any other version than 7.x-2.0-alpha1, I am new to drupal and to webdevelpment or coding in general :)
How can I disable the automatic HTML tagging for every new image loaded?? If it can't be done, can I cancel/disable it with some custom CSS?
UPDATE: It seems it's because of some setting of the theme. I was using Omega 3. If I switch to Bootstrap CDN the width and height attributes in the img tag remains, but the image of each slide scales properly! Can anybody explain me why, and how can I fix this with every theme I use??
UPDATE 2: fixed. The Bootstrap had a CSS super-simple rule on every img tag of "height: auto" that fixed my prob. in the Omega 3 theme as well. Still, I don't get how I could have some slides to scale properly and others not (I did not have any different custom css).
Thank you all!
Lorenzo
Comment #20
codemode01 CreditAttribution: codemode01 commentedI'm using flexSlider 7.x-2.0 alpha1 with jQuery Update 7.x-2.3+6-dev set to version 1.5, in config, and after reading many articles on how to style the flexslider for responsive, I ended up getting frustrated with the process and accomplishing it by adding a max-width:800px (equal to the width of the original image) to the main container (in this case, a panel), then I added .slides img {height:auto;} to the image itself and it did exactly what it was supposed to do. The flexslider images scale proportionally with the pane's container width.
Comment #21
minorOffense CreditAttribution: minorOffense commentedI'm working on an improved workflow for the image styles. The current setup is a relic of flexslider 1 which only supported images. Since 2 supports any HTML markup I'm trying to decide where the image styles should be defined.
I'm leaning towards making the fields and views plugins handle all the image styles integration where as direct library use would assume the images are of a given size already. But nothing ready for testing yet.
Comment #22
PI_Ron CreditAttribution: PI_Ron commentedComment #23
webankit CreditAttribution: webankit commentedWhy not apply a true Option Set in fields also?
Is the setting of Image Style needed here..
We can let the option set handle both original image style and thumbnail style
Comment #24
janvonmulert CreditAttribution: janvonmulert commentedIn response to #6 and #3. The problem is flexslider sets the img style to width: 100% so its always the size of the surrounding container. Image Styles therefore "appear" to have no effect(still effect resolution however).
The solution in #3... to set the width in pixels of the image in css, still disables image styles and breaks responsive design. Instead set the width to auto and set a max-width: of 100% to prevent the resulting image exceeding the bounds of the container.
Comment #25
jamescook CreditAttribution: jamescook commentedResponse #24
That's great. Thanks.
One thing I found, the image itself must be bigger/equal to the max container size in this case. (Because width is not 100%, scale up doesn't work).
This is when actively resizing the window from large to small to large again.
Comment #26
Vemma-1 CreditAttribution: Vemma-1 commentedAwesome #24 & #25 my container is not scaling either.
great mod by the way
Comment #27
JKingsnorth CreditAttribution: JKingsnorth commentedThe comments in this issue mostly refer to CSS but the fact remains that the image style set in the option set is not actually applied to the rendered flexslider when using flexslider_fields.
This is the because the image style is not appearing in the $display variable that is passed in to flexslider_fields_field_formatter_view. This patch loads the optionset and sets the image style properly inside that function.
All the groundwork for the attached patch was done by berliner over in this issue: #2123947: Thumbnail image style is not being applied - in order to fix thumbnail image styles not being applied.
I've adjusted it to work for the main slider image as well.
Comment #28
berliner CreditAttribution: berliner commentedThere is a conceptual problem. In the fields display settings it is possible to specify the optionset to use, but also an image style to apply. Is this meant as an override or should that go away? Because in the patch that I had posted in #2123947-11: Thumbnail image style is not being applied this setting was used for the main slider image. And all the other settings where taken from the optionset.
Comment #29
JKingsnorth CreditAttribution: JKingsnorth commentedAck I see; this was actually an issue in my configuration:
The image style in my option set is '100px', but the image style in 'Manage display' was set to 'none'. So whilst it looked like it wasn't being set, in fact it is just using the value from 'Manage display'.
This means that the value in the optionset is not checked at all when using the field formatter.
So I've hidden my previous patch since it doesn't make sense, and I'll reopen the issue regarding thumbnail images - which DO take their image style from the optionset.
My personal feeling is this probably shouldn't be settable in two different places. If it is settable it should be an option to override the value in the optionset, falling back to the optionset if the override it turned off. (At the moment 'none' means 'original image).
Comment #30
minorOffense CreditAttribution: minorOffense commentedThe image style settings are going away from the optionset. Flexslider will assume the image has come in as the right size already.
Fields and Views gives you control to set the image styles as needed when rendering an image. If you're using the library directly, you'll have to ensure your content is sized properly ahead of time.
I'll be removing the settings from the optionset in the next release.
Comment #31
minorOffense CreditAttribution: minorOffense commentedComment #32
berliner CreditAttribution: berliner commentedWhen can we expect the next release?
Comment #33
docans CreditAttribution: docans commentedI tried Patch #27 and it did not work
Comment #34
timqallen CreditAttribution: timqallen commentedAlso looking for the release mentioned in #30
Comment #35
batigol CreditAttribution: batigol commented+1 for the release.
Comment #36
lahode CreditAttribution: lahode commentedHi guys,
flexslider-fix-image-styles-1927818-27.patch works fine for me (don't go to #2123947-11: Thumbnail image style is not being applied, the patch is only for thumbnails)
+1
Cheers
Comment #37
JKingsnorth CreditAttribution: JKingsnorth commentedPlease take a look at comment #29 since the patch in #27 isn't really a very good solution.
Comment #38
panditvarun20 CreditAttribution: panditvarun20 commentedPlease help me from this.
I want to create a flex slider for 36 images in thumbnail format. I have to show 12 image per slideshow in 3*4 (3 rows & 4 columns) views. So how can I get it by flex slider module.
For reference I am providing the screenshot of my issue.
Hope this will help
Thank you
Comment #39
JKingsnorth CreditAttribution: JKingsnorth commentedpanditvarunHSK: please create a new support request for this. No-one will respond to it in this closed issue.
Comment #40
panditvarun20 CreditAttribution: panditvarun20 commentedThank you john for your assistance.
Comment #42
inteja CreditAttribution: inteja commentedGlad to hear the image style options are being removed in the next version. This is a great module, easy to setup etc but that was the only thing that caused confusion and tripped me up i.e. image style option that had no effect.
Comment #43
gnaag CreditAttribution: gnaag commentedUnfortunately the lack of abilty to use different styles on picture and thumbnails is not the right solution for the issue. As I can see in the dev, the only possibility that stayed there is to set up image style, but not thumbnails. Am I wrong or this is a regression?
Comment #44
pinueve CreditAttribution: pinueve commenteddo css, no patches needed, disable thumbnails and prev-next controls.
.flexslider .slides img {
max-width: 600px;
}
Comment #45
Seraphemme CreditAttribution: Seraphemme commentedThank you Drupalstrap! #6 showed me just where to find the fix for some weird formatting. Views image format was creating a problem -- as you indicated.
Comment #46
SocialNicheGuru CreditAttribution: SocialNicheGuru commentedI spent far too long on this. #24 is right on base!
it's because flexslider sets the width to 100% in the css. So the image styles are working (you can see this if you choose thumbnail. The resolution will be very poor because felxslider then upscales it to 100% of width).
Here are answers:
https://www.drupal.org/node/1927818#comment-7869297
https://www.drupal.org/node/2004972
on the bright side, I have a better understanding of most of the views_slideshow modules now.
OK. I'm calm now. And Flexslider is an awesome module. It is so simple that is why this foible really got to me.
Comment #47
TunprogIn Drupal 8 my solution:
In the view under STYLE SETTINGS of the image field check Customize field HTML and Create a CSS class checkboxes and choose a css class name mine is cat-img. Now add the following to your css stylesheet:
Done.