I've created the basic library module for flexslider. It includes a debug mode for loading the un-minified version of the library, uses the libraries module to load the files and implements hook_library.

There is also an empty Views integration module for Views Slideshow. I'll be working on that next. But this should be a good start.

I would have submitted a patch, but there's nothing in the repository yet so here's a zip of the code so far.

CommentFileSizeAuthor
#21 FlexSlider - Cleaning house147.17 KBminoroffense
#14 Flexslider refactored - untested110.15 KBminoroffense
#8 FlexSlider - Loaded by Drupal.behaviors107.61 KBminoroffense
#5 FlexSlider - Views Slideshow Form Configuration Works90.29 KBminoroffense
#4 flex1.PNG441.67 KBdddave
#4 flexnarrowed.PNG262.48 KBdddave
#2 FlexSlider - Views Slideshow working75.07 KBminoroffense
#1 FlexSlider Fixed Typos in Library55.85 KBminoroffense
flexslider.zip27.62 KBminoroffense

Comments

minoroffense’s picture

minoroffense commented
StatusFileSize
new FlexSlider Fixed Typos in Library55.85 KB

I made a few typos in that last upload. This should fix the library info.

minoroffense’s picture

minoroffense commented
StatusFileSize
new FlexSlider - Views Slideshow working75.07 KB

Here's the first working version I have with Views Slideshow. It's very basic, no configuration options as of yet. There are some oddities with Views Slideshow that I'm still trying to figure out. But it does work.

dddave’s picture

dddave commented

I cannot say how much I am looking forward to test this thing out. Hope I find enough time today. A huge thanks for tackling such an important piece of functionality.

dddave’s picture

dddave commented
StatusFileSize
new flexnarrowed.PNG262.48 KB
new flex1.PNG441.67 KB

Curiosity wins!

Enabling and applying for an already existing slideshow worked fine. Resizing flawlessly works for the main picture.

Main issues:
a) The visible navigation links are oddly placed on pic1 and should be avoidable (guess this comes with configuration options in the future).
b) Pager images aren't resized.
c) The overlay isn't resized. The overlay was created by putting the content of hidden fields as rewritten output of another field with this content: 

<div id="rotorbackground"></div>
<div id="mycontent">
<div id= "mycontenttitle"><h2>[title]</h2></div>
<div id= "mycontentpager">[field_pager]</div>
<div id= "mycontentlink">[view_node]</div>
</div>

I tested with a custom subtheme to adaptivetheme/pixture reloaded.

Awesome work so far. I happily test everything that you put up.

Edit: Just noticed that the "Activate Slide and Pause on Pager Hover" for pager items isn't working.

minoroffense’s picture

minoroffense commented
StatusFileSize
new FlexSlider - Views Slideshow Form Configuration Works90.29 KB

Not sure why the rendering is off like that. I haven't really tested the actual slider itself yet. I'm still trying to get all the features working. Views Slideshow is an "interesting" API to work with.

The basic configuration options for the slider are now working. I'm now going to tackle getting the default Views Slideshow controls to interface with FlexSlider. Once I have that, I'll start debugging rendering problems like the one you listed above.

Here's the latest build. Thanks for having a look!

minoroffense’s picture

minoroffense commented

If you're feeling up to it, you can write some test cases for the main module (avoid tests for the views sub module, not sure how/if tests are needed)

We would need the following:

- Test permissions on administrative tasks
- Test that the debug mode loads the right file

Beyond that adding some kind of automatic version detection for the library registration would be nice. Read the version from one of the files in the FlexSlider package.

Also a hook_requirements to check for the library on install and during runtime. Make sure that it is always available.

Let me know.

minoroffense’s picture

minoroffense commented

I've gotten a little sidetracked with some other work so a new version today is probably not going to happen.

I'll try to have the code committed to this sandbox. If not, then I'll create on and then a a dev release. I think we have enough code ready for a full module already.

minoroffense’s picture

minoroffense commented
StatusFileSize
new FlexSlider - Loaded by Drupal.behaviors107.61 KB

Most of the options work now. The last item is to get the views slideshow widgets (pager, controls, etc...) to control the slider.

sanduhrs’s picture

sanduhrs
he/him
Primary language German
Location 🇪🇺 Heidelberg, Germany, Europe
commented

Please have a look at http://drupal.org/sandbox/sanduhrs/1326086
Among other things it contains a field formatter.
@minorOffense: We really should merge things, I gave you commit access to the sandbox.

ryanwebpage’s picture

ryanwebpage commented

I have added what I have so far. It integrates with nodes and views the same way as the Galleria module. I used that module as the base and did not have to change a lot to get it working. It also allows you add multiple configurations for flex slider so different content types or views can have separate flex slider configurations. @minorOffense check it out and see if you can integrate any of your efforts.

minoroffense’s picture

minoroffense commented

Perfect!

I'll start merging the two. I'm imaging a structure something like this in the final module

flexslider (main api module, implements the hook_library stuff)
-- flexslider_field (field level templates
-- flexslider_views (your views stuff)
-- flexslider_views_slideshow (my slideshow code)

Thoughts?

dddave’s picture

dddave commented

Where will be the place to follow (and where will the dev show up?)? I think an easily accessible dev would help to get feedback.

I suck at coding but it seems that the plan outlined in #11 sound reasonable. Such a structure might make it easier for modules like field_slidshow to make good use of this module.

Anyways, thanks a lot for your efforts!

minoroffense’s picture

minoroffense commented

I'm still working on merging the code. I haven't had much time yet this week. But I should have something on Friday to start testing.

minoroffense’s picture

minoroffense commented
Status: Active » Needs work
StatusFileSize
new Flexslider refactored - untested110.15 KB

Here's the refactored version of the module. I moved everything into the folder structure listed below;

flexslider
-- flexslider_fields
-- flexslider_views
-- flexslider_views_slideshow

I left the option set code in the core module and added the hook_library implementation from my module. I removed the file caching code from the module since I wasn't sure if we needed it with the hook_library.

Outstanding items are automatic version detection in hook_library and hook_requirements and to reimplement the flexslider theme loading code to use hook_library_alter to load different flexslider styles.

This is totally untested code but i figure at least share what I have and people can help out with code fixes and bug fixes and maybe some test cases.

I should have a newer version, with the two issues above fixed, on Monday.

Thanks!

iaminawe’s picture

iaminawe commented

Thanks for this. I am testing it at current and have it working off an imagefield. The frame resizes correctly but my image is stuck at a thumbnail size and currently there are no settings other than default in the field. This may well be because the module is at an early stage and so just reporting what I found.

I will test the next version too, look forward to the update.

Thanks for this awesome work

TIMe-2’s picture

TIMe-2 commented

As far as I understand, this is due to the fact, drupals default rendering for Only local images are allowed.-tags is with defined height and width values. To re-size the image analog to the viewport, the image-tag delivered by drupal needs to be stripped from these non css-dimensions.

Struggling to do this, too. Maybe someone has a clue how to manipulate the image-tag?

Great work for this integration so far. Thank you guys a lot.

minoroffense’s picture

minoroffense commented

I would imagine something simple like a template_preprocess_image() and removing the attributes would work well. Or a theme override for theme_image.

We can add that to the list of todos.

cutmedia’s picture

cutmedia commented

@TIMe
Got this working withou stipping the image tags, you will need to add some css eg:

.flex-slider img {
max-width:100%;
width:100%;
height:auto;
}

This should overide the height and width from the img tag.

A nice feature would be able to add caption text from an available field instead of the title and alt tags from the image.

TIMe-2’s picture

TIMe-2 commented

Sometimes it's easier than thought at first. thx cutmedia.

lennart’s picture

lennart commented

I installed the module from #14:

A couple of issues.

1) It only works if galleria is also installed.

2) It's not possible to make the standard image size bigger. It's now to small for most designs and thus not very adaptive since it'll float to either side untilll the viewport becomes quite small. In other words, a possibility to change the image style would be nice.

Otherwise it seems to work as expected :)

minoroffense’s picture

minoroffense commented
StatusFileSize
new FlexSlider - Cleaning house147.17 KB

1) I removed mentions of galleria (be sure to run update.php, there were some schema changes)
2) You can override the image style from admin/config/media/image-styles just like any other image style. Just click the "override" link and you can change it to do whatever you like.

Here's a new copy of the module with some more modifications. None of the major items are fixed yet. Mostly just code cleanup and minor bug fixes.

- No more references to Galleria (hopefully)
- Added stylesheet as per #18
- Named flexslider_img.css to avoid conflicts with default FlexSlider stylesheets
- Updated schema
- Updated default image style
- Removed commented out code
- Cleaned up default display template

I got delayed working on new code for Mobile Tools yesterday and today. But hopefully I'll have time to get some of the major items fixed.

lennart’s picture

lennart commented

I cannot get #21 to work at all. Any page with flexislider looses its css and everything coming after the image.

minoroffense’s picture

minoroffense commented

I'll have a look, I might have uploaded the wrong git branch or forgot to merge something...

ryanwebpage’s picture

ryanwebpage commented
Version: » 7.x-1.x-dev

@minorOffense, I finally got around to putting a release on the project. It is the initial code that I copied from galleria without your changes. Can you merge your changes when you get a chance?

I am trying to figure out a way to attach links for slides. I was thinking of using the link module and field collections. So if both are enabled and flex slider is installed a flex slider field collection with image and link fields is available. It would require a field formatter as well to handle the output of the collection to remove a lot of the formatting that field collections does. Is this over complicating it? Can anyone think of a simpler way to get links on the slides?

minoroffense’s picture

minoroffense commented

Cool!

I have some new code for it. I'll checkout/commit the changes to the project in dev.

I'll have to think about the field linking part. I'm a little short on time today but I can come back tomorrow and chime in.

Thanks a lot!

minoroffense’s picture

minoroffense commented
Status: Needs work » Needs review

Changes are committed with some fixes as well.

Hook_requirements is now working correctly. The field display seems to work nicely and the images resize as needed.

I updated both the -dev and the 7.x-1.x branches. Once we get more testing done with the submodules, we can tag a release.

Well done everyone!

minoroffense’s picture

minoroffense commented
Status: Needs review » Closed (fixed)

I think we're at the point now where people can submit issues to the issue queue instead of continuing this thread.

That way we can start accepting patches and such.

I'm closing this issue now.