Some layout issues with media gallery module generated gallery

Maybe this helps:
Issue: "CSS-addition - „float“ changes for media-gallery" (http://drupal.org/node/1114582)

I'm having similar issues with Media Gallery Media Gallery 7x-1.0-beta4 and Omega 7.x-2.1 as my theme.

1) On the Main Gallery page, the galeries line up in a single column, as described here

more importantly:
2) I am unable to use the drag-and-drop reordering of images in a gallery (which is the ONLY way to re-order them, it seems). If I switch to the Bartik theme, I can re-order galleries, and images within galleries as expected.

There is an issue under Media Gallery discussing the second item and proposing modifications to the theme's .tpl files .

Before I start modifying .tpl files in my sub-theme, I was wondering if you have seen this behavior and had any suggestions.

Hello rggoode I have exactly the problems with Media Gallery.

Did you find out if the solution at http://drupal.org/node/1085486 is workable for omega.

Paul, are you on Omega 3.x? Does this Media Gallery problem occur with Omega 3.x too?

Hi fubhy,

I'm using version 2 at the moment, just awaiting a stable release of 3 and hopefully some tutorial video footage.

For testing purposes, I've just done a quick Fantastico install and enabled the version 3 stater kit. I did not go as far as creating a custom sub-theme.

Yes, I'm afraid that both bugs seem to persist in version 3 alpha. See screenshots attached.

The media module posting mentioned in my first comment seems to throw some light on the problem if that helps.

I need to start building a new media site in the next few days and would be loathed to started learning a new theme.

Is there likely to be any progress with regard to this bug in the near future?

Thanks

updated status

Sorry didn't read the issue queue handbook properly
- updated status again

This is more likely a Media Gallery issue since it looks like they are including some Styles that cause floating issues. It should be pretty simple to fix them by writing some custom CSS that brings back the floating properly. Its far from being a "Omega bug". There is nothing really how we could fix it except by including CSS which would be specific for the Media Gallery module => I don't want that. Himerus and me can look into this at some point and figure out for the proper CSS to fix it and then post it here (so you can place it in your theme's CSS) but we probably won't include it anywhere into Omega.

Also, seeing that other themes seem to have the same problem with the Media Gallery module it probably is something that the Media Gallery maintainers should consider to change. If the CSS is that intrusive it's probably wrong (on their part). I will still check it out and see if I can patch it. That would prboably be the best solution. But Omega is really far from being the right place to fix it.

Thanks for the attention fubhy. I read the comments above about floats and note the fix that was posted.

The reason for enquiring further was really because of the comments by rggoode in #4 regarding "the drag-and-drop reordering of images in a gallery". He goes on to say that this important utility is restored if one changes the theme back to Bartik, which is my observation too.

Wouldn't that suggest a snag with Omega?

No because other Themes are having problems with the Media Gallery too and only because a modules output works with one of the default themes that doesn't mean that its CSS is "valid" and properly working. Omega's floating on regions and the grid is properly working and it seems that the media gallery module is using some fancy CSS for its positioning which is making assumptions on how its containers (which are provided by Omega) have to look and work -> this is where the problem lies and because of that it is indeed a problem with the media gallery module, not with Omega. The module should not rely on how containers are built around it, it should work in any case.

OK, thank you for the explanation.

I'll raise an issue with Media Gallery module.

UPDATE:
Posted on the Media Gallery issue queue at http://drupal.org/node/1085486#comment-4475188
I should say also that the problem is now exacerbated with the latest dev release of media gallery.

I want to stay with Omega, so it's looking like I need to start finding a Drupal 7 alternative for the Media Gallery module that can handle video as well images in both gallery views and image sliders. Does anybody have any suggestions?

I dont think that you need to switch to a different module. Medial Gallery seems to be the bleeding edge when it comes to handling media on your Drupal site (at least from what I read), so you should, instead, try to fix this problem (which is probably not even too hard) and continue using media gallery.

I dont have time to take a look at it at the moment but you can hit me up in a few days once more.

Ugh... this one is going to be a nightmare I feel...

It is very hard to compensate for modules that use non-traditional drupal elements for interfaces.

I will attempt (I can't promise anything in the next week) as I'm moving to a new house this week/weekend, but I will install the media module, and setup a test to see if I can figure out where the problem likes, and if Omega can compensate for it, or if it is a discrepancy with the Media modules CSS... since it is happening in other themes as well, I will lean to the idea that Media needs more generic CSS/JS that will work with anything, and not just bartik/garland/core themes.

I will put this however on my list of important items to test. The media module is to be the cutting edge as fubhy mentioned, and is/will be the preferred choices for D7 and any media implementations.

I thank you both for your interest and support.

Having done my homework I can see that Omega is the clearly the way forward with theming. In the same way that the media module seems a sensible way to go for photo and video galleries. I know that there are lots of alternatives with Views etc, but the attraction with the Media Gallery module is the very real simplicity for the end user, not to mention a complimentary carousel/image slider in the Rotating Banner module.

I'm just a bit frustrated as I'm fairly new to Drupal, a relative novice at css and a caveman with php. Which is why I have gone for Drupal in the first place!

I hope that I'm doing my bit by raising these points in the issue queues and despite my shortage of skills, helping in the best way that I can.

Subscribing to this issue.

A quick and dirty way to deal with the display issue on the main gallery page:

1) Add this to your theme's template.php file:

function modotgov_preprocess_html(&$vars) {
  // Add unique ID variable for body tag
  if (drupal_is_front_page()) {
    $vars['page_title_id'] = 'front';
  } else {
    $page_title_id = strtolower(drupal_get_title());
    $page_title_id = preg_replace('/\|/', '', $page_title_id);
    $vars['page_title_id'] = preg_replace('/\s+/', '-', $page_title_id);
  }
}

2) Copy sites/all/themes/omega/omega/templates/html.tpl.php into your own theme directory (I put it in sites/all/themes/modotgov/templates/generic/html.tpl.php).

3) Add the ID variable to your body tag:

<body id="<?php print $page_title_id; ?>" class="<?php print $classes; ?>" <?php print $attributes;?>>

4) Now, you can safely use Gluhm's solution from response #1 without messing up the individual gallery pages:

/* Media Gallery fixes */
body#galleries .media-gallery-collection h2 {display: none;}
body#galleries .media-gallery {float: left;}

I'm certain there is a better way to generate a unique ID for your body tag, but this works on those rare occasions when I actually need it. Until somebody comes up with a more elegant solution, this may help.

It appears that drag-and-drop reordering works perfectly fine on the main gallery page; it's only on the individual gallery pages where it's broken. I'm going to spend some time trying to figure out what's different between the two.

OK, here's our problem: in media_gallery.dragdrop.js, this is the code that figures out how to wrap the sortable elements:

var $gallery = $('body.page-node #block-system-main .node-media-gallery .media-gallery-media > .field-items').once('media-gallery-sortable');

However, for reasons that aren't clear to me, that is failing to match the node wrapper in Omega's HTML5 output. If I change the selector to this:

$('body.page-node #block-system-main article .media-gallery-media > .field-items')

...drag-and-drop works fine. This doesn't make much sense to me, as the article tag is correctly tagged with the node-media-gallery class, but that change does fix the problem. Hopefully that'll give someone who knows this stuff better than I do enough to go on for a better solution.

ETA: article.node-media-gallery does not work either, which implies to me that jQuery itself is failing to look for classes on article tags. Just a guess though.

Change line 18 to:

var $gallery = $('body.page-node #block-system-main .node-media-gallery .media-gallery-media > .field-items, body.page-node #block-system-main article .media-gallery-media > .field-items').once('media-gallery-sortable');

...and it should work with both Omega and other themes.

Correction: Omega is naming the classes a bit differently. Instead of "node node-media-gallery" we have "node media-gallery". Solution above still works, but the real fix is probably adjusting the class names on the output.

OK - sorry for all the posts in a row, but I believe the correct solution is simply removing the first exclusion on line 40 in preprocess-node-inc.

Change:
$exclusions = array(drupal_html_class('node-' . $vars['type']), 'node-promoted', 'node-sticky', 'node-teaser', 'node-unpublished');

To:
$exclusions = array('node-promoted', 'node-sticky', 'node-teaser', 'node-unpublished');

This solves the problem without any modification to media_gallery.dragdrop.js.

Thanks for digging into this. I will talk to Jake later today and probably fix and push this into the latest dev.

I just commited some fixes to nearly all omega preprocessors and how they handle the css classes. This should also fix the problems with media gallery. Thanks to wrd for digging into this.

I find that the drag and drop problem applies to the gallery pages also.

A fix is brilliant news, big thanks to wrd and fuhby :-)

Fuhby - how will you be deploying the fix? V2 or V3 or both?

Paul Driver even with the latest changes? Did you check that with the latest dev version from github?

As soon as it is working in 3.x I will try to backport it to 2.x

Sorry fuhby, I thought that comment would reply directly to #21

I guess I go to github then?

How will the fix be deployed? V2 or V3 or both?

The fix was commited to the 3.x branch.

https://github.com/ThemeGeeks/Omega/tarball/7.x-3.x

Is there any documentation anywhere for updating a V2 theme?

Not yet but there will be!

May be it's just me, but...

I installed the latest alpha 4 release, thinking that the media gallery fix would have made it out of github by now. It didn't work. So I completely uninstalled omega to apply the Jun-02 dev release. Still nothing, so went back and installed the files in the github link at #30. The result is still the same.

Whilst the vertical tiling issues appears to be resolved, the drag and drop functions appear to remain broken.

- On the all galleries page, drag and drop is allowed, but the change is not stored. So after a page refresh changes are lost.

- Within a gallery, there is no drag and drop at all - as before.

Am I missing something?

Is a change needed afterall to media_gallery.dragdrop.js for the media gallery module to work with omega.

This is probably another bug with the CSS classes. Hmm.... I cant really dig into it right now since I dont have the media gallery module installed but you could help me by posting a complete dump of the HTML sourcecode of your page with the media gallery module enabled => Once with Omega, and once with a theme that works.

Hi fuhby, yes happy to oblige.

You literally mean copying the source of each page concerned.?

Do you want that posting here or emailing somewhere.

Paul

you can pastebin that to http://pastebin.com/ and then post the link here.

Omega Starterkit HTML - All Galleries Page
http://pastebin.com/fQiMCd2T

Omega Starterkit HTML - Gallery One Page
http://pastebin.com/is9fNC0q

Bartik - All Galleries Page
http://pastebin.com/L5MQ9GN5

Bartik - Gallery One Page
http://pastebin.com/Nsh48F99

If you want access to the site, just me know.

You can send me the username and password of that page via my contact form on my profile page!

OK sent

Okay so Media Gallery relies on the core block html id patterns (which I don't like but I understand that this might be a problem with other modules too) so I readded the default ID to all Omega blocks too. This should no longer be a problem. I am not entirely sure if this fixes it all since I didn't test it but you can do that by just pulling the latest dev. Please report back if it works!

Hello fuhby

We have some progress!

Within the galleries, drag and drop now works and functions correctly.

However the other bug still persists...
- On the all galleries page, drag and drop is allowed, but the change is not stored. So after a page refresh changes are lost.

The dev release is installed on the same demo site if you need check it out.

EDIT
--------------
The demo site also demonstrates the bug that I posted at http://drupal.org/node/1168296
You can see it with the main menu block

Hi,

I'm using the Blue Masters 7.x-1.1 theme and the drag and drop thing still won't work on gallery sub-pages. Where can i find the ordering list, to re-order the pictures manually?

Marc

Hey Paul,

I will spend some more time now on that bug with the drag&drop. However I don't see a problem with the contextual links stuff. Does that bug appear in Omega 3.x? I cannot see it on your website!

Aaaaaaaah now I saw it... My CSS was still being cashed... Okay the solution is pretty simple, its not a Omega problem.

#block-system-main-menu

is where you apply "a" CSS styles to. The problem with that is, that the contextual links interface also uses "a" for the gear and therefore your style destroys that. You need to make sure that your styling does NOT apply to the entire block. Make it #block-system-main-menu .menu a { YOUR STYLES } for example.

there is a bug in the media gallery module's javascript in the media_gallery.dragdrop.js file.

$('.node-media-gallery.node-teaser .float-overflow', $gallery).once('media-gallery-draggable', Drupal.mediaGallerySort.addDraggableIcon);

This line uses a variable named $gallery which does not exist there. It might be the reason for this bug, maybe not... I have no clue. I will install the media gallery module on my local machine later to debug further.

Any news on this one?

It seems to be fixed in Omega, but last time I looked, media gallery itself still had a few layout issues cause by the styles module.

Just a bump.

Correction to the above. A reminder that drag and drop reordering of galleries (on main galleries page) is still broken with Omega theme. as #43

Cross posted at Media Gallery

FYI - for anyone having layout issues using Media Gallery and Adaptive Theme, see http://drupal.org/node/1224198

I had media gallery layout issues with AT Commerce adaptive theme, and fixed it with info from here: http://drupal.org/node/1230090
(post #12). Drag and drop still doesn't work.