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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

pyxio’s picture

Hi

Did you ever find a solution to this? I have the same issue? Cheers Kevin

navalogan’s picture

hi,
I have the same problem had anyone got a solution thanks!

mvdve’s picture

Flexslider 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:

.yourclass img {
    max-height: 250px;
    max-width: 250px;
} 
pyxio’s picture

Hi

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

pyxio’s picture

Hi,

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

pyxio’s picture

Greetings,

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

artatum’s picture

A pretty good advice.
You saved my life. Thx

pyxio’s picture

cool. glad i could be of help. cheers kevin

Joel MMCC’s picture

As 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.

pyxio’s picture

I 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.

kin11’s picture

Solution 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.

reign85’s picture

Hello 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?

pyxio’s picture

reign85,

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?

reign85’s picture

Hello. you were right, there is some probs on my div.

Now i just use a custom theme with custom css on my div container

<div id = "slide_container">
<?php print render(node_view($node)); ?>
</div>
div#slide_container{
	max-width: 600px;
	max-height: 150px;
	margin-left: auto;
	margin-right: auto;
}

Thanks for all

reign85’s picture

So, 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

<div id="slide_container">
<article class="node-7 node node-banni-re-adef contextual-links-region view-mode-full node-by-viewer clearfix" about="/node/7" typeof="sioc:Item foaf:Document">

      <header>
                  <div class="contextual-links-wrapper contextual-links-processed"><a class="contextual-links-trigger" href="#">Configurer</a><ul class="contextual-links"><li class="node-edit first"><a href="/node/7/edit?destination=node">Modifier</a></li>
<li class="node-delete last"><a href="/node/7/delete?destination=node">Supprimer</a></li>
</ul></div>
      
          </header>
  
  <span class="print-link"></span><div class="field field-name-field-images field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><div id="flexslider-2" class="flex-flexslider flexslider flexslider-processed">
  <ul class="slides"><li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img typeof="foaf:Image" src="http://xxx/sites/default/files/styles/large/public/emploi1.png?itok=H_NFRaHZ" alt="" title=""></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;" class="flex-active-slide"><img typeof="foaf:Image" src="http://xxx.fr/sites/default/files/styles/large/public/emploi2.png?itok=Kj589dC6" alt="" title=""></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img typeof="foaf:Image" src="http://xxxx/sites/default/files/styles/large/public/emploi3.png?itok=Qxx1Jutp" alt="" title=""></li>
</ul><ol class="flex-control-nav flex-control-paging"><li><a class="">1</a></li><li><a class="flex-active">2</a></li><li><a class="">3</a></li></ol><ul class="flex-direction-nav"><li><a class="flex-prev" href="#">Précédent</a></li><li><a class="flex-next" href="#">Suivant</a></li></ul></div>
</div></div></div>
  
  
</article><!-- /.node -->
</div>

there is an option to mask this?

pyxio’s picture

not sure exactly which element you want removed but something like..

.flex-control-nav {
   display: none;
}

should remove it from the display. cheers

reign85’s picture

Humm, it's embarrassing,
Iv just seen that .flexslider get the property "margin: 0 0 60px"

So, I override it

Thanks for all

Outcydaz’s picture

Version 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.

kopeboy’s picture

Version: 7.x-1.0-rc3 » 7.x-2.0-alpha1

Yeah, 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

codemode01’s picture

I'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.

minorOffense’s picture

I'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.

PI_Ron’s picture


//FIX for flexslider images not maintaining aspect ratio.
.flexslider .slides img {
	height:auto;
}

webankit’s picture

Category: support » task
Priority: Normal » Major

Why 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

janvonmulert’s picture

In 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.

.flexslider .slides img{
width: auto; /* undo width: 100%  in flexslider.css*/
max-width:100%;  /* Make sure the image stays inside its surrounding container. */
height: auto; /* keep the aspect ratio */
}
jamescook’s picture

Response #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.

Vemma-1’s picture

Awesome #24 & #25 my container is not scaling either.

great mod by the way

JKingsnorth’s picture

Title: Image Styles Have no affect on flexslide images. » Image styles have no effect on flexslider images (or thumbnail-pagers)
Version: 7.x-2.0-alpha1 » 7.x-2.x-dev
Component: Miscellaneous » Code
Category: Task » Bug report
Issue summary: View changes
Status: Active » Needs review
Related issues: +#2123947: Thumbnail image style is not being applied
FileSize
2.84 KB

The 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.

berliner’s picture

There 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.

JKingsnorth’s picture

Status: Needs review » Active

Ack 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).

minorOffense’s picture

The 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.

minorOffense’s picture

Status: Active » Closed (won't fix)
berliner’s picture

When can we expect the next release?

docans’s picture

I tried Patch #27 and it did not work

timqallen’s picture

Also looking for the release mentioned in #30

batigol’s picture

+1 for the release.

lahode’s picture

Hi 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

JKingsnorth’s picture

Please take a look at comment #29 since the patch in #27 isn't really a very good solution.

panditvarun20’s picture

Please 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

JKingsnorth’s picture

panditvarunHSK: please create a new support request for this. No-one will respond to it in this closed issue.

panditvarun20’s picture

Thank you john for your assistance.

  • Commit bc39515 on 7.x-2.x, startslide by minorOffense:
    Removed image styles [#1927818] and [#2123947]
    
inteja’s picture

Glad 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.

gnaag’s picture

Unfortunately 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?

pinueve’s picture

do css, no patches needed, disable thumbnails and prev-next controls.

.flexslider .slides img {
max-width: 600px;
}

Seraphemme’s picture

Thank 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.

SocialNicheGuru’s picture

I 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.

Tunprog’s picture

In 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:

.cat-img {
  width: 282px;
  height: 276px;
  margin: auto;
}

Done.