Hi,

When I display only 1 row of pictures, the gallery works correctly. As soon as I add more pictures or if I make the thumbnails wider (whatever causes the gallery to display to more than 1 line and the green arrows appear), the thumbnails are multiplied 3 times. (See screenshots).

The behavior is the same in IE and Chrome.

What am I doing wrong?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

SoftService’s picture

It seems to be a theme issue. I changed the theme to Bartik and then it's correctly displayed.

What style is used for the gallery and the main picture? It seems that the main picture is corrupted too. It show up bulleted and it's caused by the Theme. The themes I use are created with Artisteer.

If I know in what section I have to look I can correct the style sheet.

DRIVE’s picture

You have to look in modules/galleryformatter/galleryformatter.css
And modules/galleryformatter/gallerystyles/greenarrows.css (assuming you are using greenarrows style).

Use Firefox with Firebug add-on and you'll be able to find what is overriding the gallery styles.

brett1’s picture

Hi,
Same issue,
and also using an Artiseer theme.
Did you have any luck getting this right ??

I'm thinking that maybe some css where you export the theme may work ??

also - the magnify glass on the top right is cut in half

DRIVE’s picture

ONLY ways to troubleshoot Artisteer themes (someone from here trying to help) is:

1) Zip up entire theme and post/attach it here(if it is less than the max 3mb Drupal imposes)

2) Send a link to your demo site. Slower, more cumbersome, method but someone from here should be able to at least point out some "trouble spots" and give you some recommendations.

Unless someone (us) can run the whole theme it would be nearly impossible to effectively troubleshoot it. Since ARtisteer is an "external" source and those themes are all user-generated for the most part, we would need to download and run the entire theme ourselves. Solution #2 above is possible to do that way... just slower and you will need to know some CSS and probably several or more "rounds" of experimentation will be required... unless we get lucky on the first shot :D

DRIVE’s picture

Title: Gallery not working correctly » Different themes cause abnormal Gallery display
Category: bug » support
Priority: Major » Normal
LTech’s picture

FileSize
37.42 KB

I am having the same problem with adding more then 3 images. I've attached my style.css. Would you be able to have a loko at it to tell me what to change. Thanks.

Manuel Garcia’s picture

There are lot of issues about your problem on the issue queue already. I recently committed a patch that attempts to prevent high-jacking of css styles by themes, you may want to test out the newest dev version of the module and see if it helps.

LTech’s picture

I tried the lastest dev version 7.x-1.x-dev and it didn't help. I looked at your patches and I couldn't find which one would help this issue. What is it called? I am trying to use firebug to solve the issue. Which files should I be changing the css, the theme style.css or galleryformatter?

brett1’s picture

Hi Drive,
Thanx for the advice - I sent off a tcket to Artiseer to see what they have to say.
Hopefully they can pinpoint the issue
the url is:

http://www.site1.naomihamiltonphotography.com.au/content/test-0

1> the magnify glass and scroll arrows on the main picture are correct
2> the thumbnails fit into one line.

I'll post their response if they send me some code.
Cheers,
Brett

DRIVE’s picture

Drupal issue interface SUCKS. I thought I'd post that and I hope they read it. Compared to what we all know Drupal can do...
THIS IS LIKE WORKING WITH STONEAGE TOOLS ..... !@#$%^&*(OP)@#$%^&*!!!!!!!!

Ok @ post #9, brett1

Be sure to save a copy of the greenarrows.css if modified from original (because if you haven’t modified it, simply extract a new copy from GF download pkg.) or do whatever methodology you use for backing up files and reverting back, etc, etc. et al.
_____________________________________________________________________________
SITES/ALL/MODULES/GALLERYFORMATTER/GALLERYSTYLES/GREENARROWS/GREEENARROWS.CSS

Modify the greenarrows.css

Line 41:

.galleryformatter-greenarrows .gallery-thumbs li,
.galleryformatter-greenarrows .gallery-thumbs ul > li {
  float: left;
  background: transparent none;
  overflow:hidden;
  padding: 3px 0 0 0;
  background-image:none;
  overflow-x: hidden;
  overflow-y: hidden;
}

Line 62

.galleryformatter-greenarrows .gallery-thumbs li img,
.galleryformatter-greenarrows .gallery-thumbs img {
  margin:0;
  filter:alpha(opacity=60);
  -ms-filter:”alpha(opacity=60)”;
  -moz-opacity:0.6;
  -khtml-opacity: 0.6;
  opacity: 0.6;
}

End of recommended TEST changes.

----- REFERENCE INFO FOR ABOVE CHANGES
/SITES/ALL/THEMES/NAMOMIPHOROGRAPHPY12/STYLE.CSS

Mods to line 41 above should kill this hijacker (line 1337):
.art-post ul > li {
    background-image: url("images/postbullets.png");
    background-repeat: no-repeat;
    overflow-x: visible;
    overflow-y: hidden;
    padding-left: 12px;
}

Mods to line 62 above should annihilate this hijacker (line 1162):

.art-article img, img.art-article, .art-block img, .art-footer img {
    border: 0 solid #FD7A17;
    margin: 10px;
}

There are probably more tweaks available but start with these and you *should* gets some dramatic results that will fix at least 90% of the issues. From there is will be easier to nail a few more pixels here and there........ .

DRIVE’s picture

@ #6 LTech

ODT with css. Plain text (txt) would be fine and wouldn't require Open Office.

Anyway, from the stylesheet alone, you cannot guess what styles are overriding GF styles. Output is required.

Maybe you can view-source of your gallery and past the entire "content" div inside <code> tags here. Otherwise we be guessing o¿0

OR, you can save the entire source code in txt and attach here... either way we need the actual code output from the theme to track which CSS might be overriding the gallery styles.

LTech’s picture

FileSize
5.5 KB

I've attached the code inside the div tags. I hope this will be enough.
(I'm not sure what you mean 'entire souce code' - all the theme code, including all the tpl files and images?)
Thanks so much for your help DRIVE.

DRIVE’s picture

not sure what I was thinking :) There is no way to troubleshoot it that way. Must be able to use Firebug or similar for live tracking, which is why I said originally we need a live example or the theme files... all of them.

So that said you might want to try #10 above. Artisteer themes share many similarities so while the actual naming conventions in your specific theme may be different the structure is very possibly identical to what I cited in #10 Check the source and see the next few divs that surround the gallery... I bet they are the same or similar as in #10 above.

Or, provide a live example.

Or you could try this patch (SEE CODE BLOCKS BELOW). Manually make the changes, upload, clear all caches (drupal and local files), re-run a gallery and see if it fixes all or most of it. This has worked for me instantly in like 7 or 8 different cases by now.

If none of the above, you will have to track it down with Firebug or similar yourself. If you know a little bit of CSS it can be fixed in a few minutes or so, no joke :)

On or about line #295 in sites/all/modules/galleryformatter/galleryformatter.module

// The code below was adapted from the great quicktabs module

/**
 * Fetch the necessary CSS files for the gallery styles.
 */
function galleryformatter_add_css($style) {
  // Add galleryformatter CSS.
  drupal_add_css(drupal_get_path('module', 'galleryformatter') . '/theme/galleryformatter.css');

  if ($style != 'nostyle') {
    $style_css = _galleryformatter_get_style_css($style);
    drupal_add_css($style_css);
  }
}

REPLACE THAT CODE WITH THE BELOW

// The code below was adapted from the great quicktabs module

/**
 * Fetch the necessary CSS files for the gallery styles.
 */
function galleryformatter_add_css($style) {
  // Add galleryformatter CSS.
  drupal_add_css(drupal_get_path('module', 'galleryformatter') . '/theme/galleryformatter.css', 
    array( 
      'type' => 'file', 
      'group' => CSS_DEFAULT, 
      'weight' => 1000,
    )
  );

  if ($style != 'nostyle') {
    $style_css = _galleryformatter_get_style_css($style);
    drupal_add_css($style_css, 
    array( 
      'type' => 'file', 
      'group' => CSS_THEME, 
      'weight' => 1000,
    )
  );
 }
}

Literally a 1 minute operation time including testing if it does work. If it doesn't work, you've wasted a couple minutes. BE SURE all your caches are clear and you are absolutely running all new code.... at the module level, its a good bet but clear caches to be sure.

LTech’s picture

Drive, I tried all the codes you posted and couldn't get it to work. The webpage is http://74.52.238.121/content/sweep if you could have a look at it I would really appreciate it.
Thanks, LTech

DRIVE’s picture

Pretty freaky.... I am able to fix it but doing so causes your theme to not print the forward and back green arrows after the thumbnails.

Stick this at the very bottom of greenarrows.css and rerun the gallery. Be sure to clear all caches beforehand.

.galleryformatter-greenarrows .gallery-thumbs .wrapper ul li {
  display:inline;
  padding: 0px 2px 0 0;
}

See if that causes the Thumbs to fall inline. If it does, see if the green arrows are there... they are not on my end... the code for them is not present.... if that is the case, change the 2px padding above to 6px padding and then rerun... on my end the green arrows appear because the code is now there. Never seen the code not be written to the output because of a change in CSS. If it were transparent or out of view it seems reasonable but to be completely gone...

<a title="Previous page" class="arrow back"><</a>
<a title="Next page" class="arrow forward">></a>

Those become missing whenever any changes I have tried actually worked to line up the thumbs in one row..... odd

LTech’s picture

Thank you so much for your help DRIVE. It works for four images now... without the arrows but I don't mind, I actually prefer it like that. The only problem is... when I add another picture - 5 images - we are back with the original mess :( http://74.52.238.121/en/content/sweep
Any ideas to solve the problem for unlimited images. Is there another module I can use with the media module instead that is similar? Maybe that would be best.

DRIVE’s picture

Not sure. There is a conflict somewhere in the theme or with another module.... duh right?

You say 5 images... I have dog dog trees penguins flowers
and I have 3 sets of those (15 images). Are you saying that you only have 5 images loaded in that gallery?

Are you using media module to derive your images? I didnt catch that part if so :)

We should try to fix it, unless you are inclined to try a different direction.

LTech’s picture

I've uploaded 5 images using the media module and it has displayed them 3 times each, instead of once. http://74.52.238.121/en/content/sweep
If we can fix it that would be great. I was just wondering if there was a similar module that displayed images I could use instead as I need it sorted out as soon as possible.
Thanks for you help.

DRIVE’s picture

If time is short, you might want to browse through the modules, media category.
http://drupal.org/project/modules?filters=tid:67

My mistake on the handling of this. I didn't realize you were using media field, sorry I missed that.

Support for Media module is new and in development. If you are using media field you must be using the dev snapshot of Gallery Formatter (7.x-1.x-dev).

Furthermore, line #198 of galleryformatter.module from dev snapshot states Media version compatibility. Might be compatible with later releases but might not be.... all depends on what the changes or additions are if you are using a Media version newer than the below.
$items[$delta] = (array) $item; // Compatibility with 7.x-1.0-beta4 and previous media versions

The post is mis-marked either:

  1. the version for this issue should be set to 7.x-1.x-dev
  2. the response should have been "must be using dev version of GF" and "see http://drupal.org/node/981770"

So if not using the dev version, you could try that, close this post and use this one http://drupal.org/node/981770 (read this now if you have a moment... it is relevant to your use case thus far).

Otherwise if time is the issue check out the other modules. This is the perfect case for testing the media module though. Assuming the conflict is between GF and MM... if its in the theme layer it can probably still be fixed, just not a matter of minutes to do so.

Any chance of getting a Zip or Tarball of the entire theme? :) Even if you paid for it there is no issue with having a developer tune it right? Our interest is purely for testing.... the theme would never get used. We might be able to fix the issue and also further the development of Media module integration.

LTech’s picture

FileSize
302.14 KB

Sorry, I didn't notice I am using version 7.x1.0 dev.
I've attached my theme, I hope it helps you develop the media module integration and if you find a solution for me pls let me know :) At the moment I have a bigger problem, I've made my site multi-lingual and on the hebrew page the image doesn't show up at all. http://74.52.238.121/he/dogs/%D7%A8%D7%90%D7%A4%D7%99
any ideas why? Should I start a new issue for this?

DRIVE’s picture

Version: 7.x-1.0 » 7.x-1.x-dev

¯¿¯

You are going to run into some more trouble with RTL languages such as Hebrew. I am not the guy for that one. Maybe some of these other guys have made some progress. I weighed in on it and provided some resources I found along the way but you are going to need to get help from someone who can read and write your language and has found some work-arounds for galleries in RTL langs.
http://drupal.org/node/1114428 - You will need to get specific help for RTL, Im sorry. I will help you on the theme functionality though... but with rtl... cant work on what I dont know :)

Also,
I was able to download the gzipped tarball of your theme and run it locally. Beautiful theme I must say. Nice job :)

On my local server I am able to get the same results as you have described... and that is with Media module disabled. I am not deriving any images from that so for me I will try to track down what is causing the thumbs to display improperly. I think that should also fix the issue with usage of Media module since it appears to be in the theme layer. Can know if Media is involved until the default known working settings are fixed between the theme first. Manuel may have to use for testing with the Media module.

Could you provide details on the setup of content-type you have for the galleries? Basically, we would want to replicate your exact structure for a content type that is using Media field and Gallery Formatter so that between the theme code you provided and the content-type settings, we can mimic your use case nearly 100% exact. Screenshots of the content type screens might be helpful.

DRIVE’s picture

OK. I fixed it in the theme using all defaults (Image, not media module) and Greenarrows. I also tested it on "MICRO GALLERY 'X' 340x200" for Gallery formatter http://drupal.org/node/1170436 and it runs great with your theme and that style too.

In your themes style.css, at line 1992 you will see this:

ul.links li, .block ul
{
	display: inline;
	background-image: none;
	padding: 0;
}

Change it to this:

ul.links li, .block ul
{
	display: inline;
	background-image: none;
	padding: 0;
}
/* added to tune thumbnails display in galleryformatter */
.block .galleryformatter .gallery-thumbs ul { display:block;margin:0;padding:0; }

Now, as for Media module, I am not using that at all for Gallery Formatter. I can check it against your content types in this theme using media module if you provide me some information. On the RTL stuff, you are going to run into trouble with that on any module that displays galleries, unless something has changed drastically in the past few weeks or so.....

Anyway, let us know! :")

LTech’s picture

I fixed the RTL using http://drupal.org/node/1114428 thanks for that tip.
The gallerly still doesn't work, I guess it must be the media module, but it works fine with four pictures so I'm going to leave it at that. Thanks for all your help.
I'm also trying to align the gallery left, not centered as it is by default. How do I change that?

DRIVE’s picture

Cool on the rtl.

Ya, to be honest with you I dont want to play with Media. The current branches are 7.x-2-x-unstable.... a beta5 and the dev branch. I have investigated it before when D7 came out and it just had a lot of issues and required much more time to fix than anyone would like. But usability is the issue so unless lending a hand on fixing it, using it is guaranteed problems not to mention that Media's dependencies are in less than good stages as well. File Entity has one version and it is a dev version. Those are showstoppers on a production site to me.

From the Media module project page:

http://drupal.org/project/media
...... There are also some issues that must be fixed before we can make stable releases. See here for info on the 1.x branch(http://drupal.org/node/1018640) and here for the 2.x branch(http://drupal.org/node/1241564).

Note that the 1.0-beta5 branch includes some non-backwards-compatible changes relative to beta4. If you're a maintainer of a module that uses Media, please update your module accordingly. If you're using modules that depend on Media, ensure that those modules are unaffected, or that you are using the correct releases of those modules.

Media, Ctools and File Entity do have ferociously active development and if I weren't helping on a number of other items that would probably be on my list.... just isn't on my radar right now (CTools has the most current and stable code base btw - that module is tight). I believe Manuel birthed the media support so for the time being he must feed it... ahaha... but really, the issues that appear to be cascading down to GF prevent from hitting that moving target. With GF having those upward dependencies by proxy, and those dependencies are needing major turning points, they must be fixed and sorted out before it could be stable in GF.... I think Media is slated to be native to D8....

Oh, speaking of cascading effects, GF is not working correctly in your use case. Therefore it is entirely possible and likely that those problems will also cascade and you will wind up with a bunch of "ghosts in the machine". It can happen to a database so you want to be careful on just how much content you start building with known problems in various code bases / modules.... just my 2c

spooky stuff taintit? lol.... good luck :)

LTech’s picture

Your making me worried! I want to start adding alot of data. Should I really stop using GF and use another module? How do I know that will be more stable with the media module?

DRIVE’s picture

Sorry bout that! :) I would ask around in the issues for Media and see what anyone else is using. I thought it (Media) was farther along than it is.

This post I think sums up where it is at currently. It is in limbo and why..... http://drupal.org/node/981770

Use it if you want.. if it isnt a site for a client you might be okay...

brett1’s picture

Hi Drive,

Thanx for your posts,
I actually abandoned Artiseer for a while as it was proving to difficult, but ...

I added all your suggestions and the last one #22 did (most of) the trick
- it was however on line 1662 not line 1992 (small technical issue)

That sorted out the inline issue ---

I then added the following code after the code from post #22
========================================================================
.gallery-frame img
{
margin: 0;
border: none;
}
=========================================================================

which I got from a form discussion I'm having in artiseer
http://www.artisteer.com/?p=support_c&e=C02yqRkbEMNE-KVHmylmVtchLxiAY8dOa

That cleared up the magnify glass issue

so looking quiet good now, except for a small case of the left arrow being slightly out -

http://www.site1.naomihamiltonphotography.com.au/content/islanders

I will need to fix that but its looking much better

I think if I remove the > it will work great !!! :>

LTech’s picture

Hi Drive,
Would you know why 'full image' is coming up on the magnifiying glass on the Hebrew site? (It's fine on the English site) http://jspca.org.il/he/dogs/%D7%92%D7%95%D7%9C%D7%99
Thanks

Manuel Garcia’s picture

@LTech text-align: right; is apparently making the text-indent trick not work in your case

.galleryformatter-greenarrows .view-full {
  text-align: left;
}

should fix it for you.

brett1’s picture

Ok, found a easy way for those using Artiseer - Basically take all the code here and paste it.
In Artiseer Goto: File: Export: CSS OPTION:
This is a place that you can dump some css and it adds it to the style sheet.

Paste the following code css style code.
========================================================================

.art-post ul > li {
background-image: url("images/postbullets.png");
background-repeat: no-repeat;
overflow-x: visible;
overflow-y: hidden;
padding-left: 12px;
}
.art-article img, img.art-article, .art-block img, .art-footer img {
border: 0 solid #FD7A17;
margin: 10px;
}
ul.links li, .block ul
{
display: inline;
background-image: none;
padding: 0;
}
ul.links li, .block ul
{
display: inline;
background-image: none;
padding: 0;
}
/* added to tune thumbnails display in galleryformatter */
.block .galleryformatter .gallery-thumbs ul { display:block;margin:0;padding:0; }

.gallery-frame img
{
margin: 0;
border: none;
}

=====================================================================

This is great because you don't need to go and edit the style sheet manually each time you modify your theme in Artiseer.

NOTE: I made the necessary changes as DRIVE described in the above post
Post #10 GREEENARROWS.CSS - Line 41 and Line 42
Post #13 I think I changed this too -

======================================================================

I still don't have that damn left arrow lined up so any help with that would be great.
http://www.site1.naomihamiltonphotography.com.au/content/islanders

Manuel Garcia’s picture

@brett1 remove the padding from:

.art-post ul > li
and
.art-post li

Or add padding: 0; to .gallery-processed .gallery-slides .gallery-slide

brett1’s picture

THANX Manuel !!! in a probably overkill fashion I added the following bit of code
# 30 post
=================================================================

.gallery-processed { padding: 0; }
.gallery-slides { padding: 0; }
.gallery-slide { padding: 0; }

.art-post li ol, .art-post li ul
{ padding: 0; }

.art-post ul > li { padding-left: 0px; }

=================================================================

I'm fairly sure it was the .art-post ul as it had a padding of 12 before

Manuel Garcia’s picture

@brett1
I meant to add
.gallery-processed .gallery-slides .gallery-slide { padding: 0; }

not padding 0 to each of the containers... but I'm happy its working for you =)

jmrukkers’s picture

The very same happens with the free template freethemes4you_musik_01_d7 1.0.

- Johannes

knalstaaf’s picture

Advice: see in what way you can make the css-classes related to GalleryFormatter less abstract. Change them to gf-gallery instead of gallery for instance.

E.g.: .gallery-slides becomes .gf-gallery-slides (needless to mention this should be done in the output code as well as in the stylesheet).