Nextgen Gallery & WP eStore: Will not display in gird view

[malcolmmind]

Hello Admin,

I have Nextgen gallery and WP eStore installed and followed the instructions to setup “add cart” functionality for a entire gallery. I can not figure out why the images don’t display in grid view. It display gird view no problem if I ust display the gallery without WP eStore.

Thank You for your help.

Malcolm

Installed plugins:

1.Nextgen Gallery 1.8.2

2.WP eStore 5.7.8

Web page example:

http://freshdrobe.com/t-shirts/af-tee/

[amin007]

Which nextgen gallery integration did you use? (there are two methods).

Your thumbnail area looks big. What value do you have in the “Width x height (in pixel)” field of your NextGen Gallery options (Thumbnail options tab)?

[malcolmmind]

Thank you very much for your quick response, I am using the alternative integration method. My size is 100 x 75.

[amin007]

Okay that shouldn’t be an issue. Some CSS code in this site is reserving a large area for the image thumbnails so it is not being able to stack in a grid. We need to find out where this rogue CSS is coming from. Please do this test and let me know what you find:

https://support.tipsandtricks-hq.com/forums/topic/test-to-identy-a-conflicting-theme-or-plugin

[malcolmmind]

I removed all plugins except:

Automatic WordPress Backup

Health Check

Hosted By HostGator.com

NextGEN Gallery

WP Super Cache

I ran the web page through markup validation service and received tons of errors. Not sure which one to send you for review?

[Reggie]

I’m having a spacing issue. I think this can be fixed with CSS, but I’m not sure what to change. Can someone point me in the right direction

http://vmseven.com/?page_id=510

[amin007]

@malcolmmind, Your theme would be the first thing to test (I wouldn’t worry too much about the plugins). Can you switch to the default WordPress’s twenty ten or twentey eleven theme and give me a link to your gallery page?

@vmseven, you have one inline CSS that defined to take 50% of each NextGen gallery element (this is making it to where you can only have two images side by side). You have another CSS (most likely from your theme) that is specifying the line-height to be 20px!

body {

font-size: 12px;

letter-spacing: 0.4px;

line-height: 20px;

word-spacing: 1px;

}

A 20 pixel line height is making it to have the lines too much space between them. You also have an extra “
” there which is introducing an extra empty line (you can take that out).

[Reggie]

With the twentyTen Theme it looks like

http://bidum.dyndns.org/twentyTenTheme.PNG

Now the next row is to close to previous row

I set the line-height to 0px and the shop object is where I want it but the text fields are being overlapped by the fields. I can get more images per row by simply changing the images per row feature in nextgen gal and making my page wider

here are a couple images for you to see

http://bidum.dyndns.org/line-height0px.PNG

http://bidum.dyndns.org/line-height20px.PNG

I’d like to make it look like the line-height:0px version. Gotta be a css change to make this work, but my limited css skills have failed me.

Hoping you can point me in the right direction pleeeeeeeeeease

[Reggie]

Code:

.ngg-gallery-thumbnail span {
margin-top: -90px;
margin-bottom: 120px;
}

Here is the tweak to fix this. The above code was inserted at the end of my themes CSS file. I left my original line-height value to 20px

the extra “” you spoke of is where the Description of the image would go. But I don’t use the description field in NextGen Gal so I used margin -90px in which actually covers those “”. If I use a description on my images I would have to use about -50px or so on margin-top.

the margin-bottom simply gives me more separation between the next set/row of images

Hope this helps

[malcolmmind]

Sure no problem:

http://freshdrobe.com/t-shirts/af-tee/

[malcolmmind]

One thing I forgot to mention yesterday: I updated My NextGen Gallery Plugin and placed WP-eStore.php back into the View folder of NextGen Gallery. I checked the Web Page and it was displaying the Gallery in Grid View. Then I used the short code

[nggallery id=1 template=wp-eStore-auto-addtocart]

afterwards the web page would not display my gallery in grid view with and without the short code.

[amin007]

That doesn’t look right. I will send you an email to get site access so I can check it out.

[malcolmmind]

I just sent the form back to you for site access, I really appreciate the help. Thank you.

[amin007]

You had the following code on that page. I really have no idea what you were trying to do with all these CSS but this was messing everything up.

<div>

<pre><span style="font-family: monospace;"><span style="font-family: monospace;">[nggallery id=1]</span><span style="font-family: monospace;">

</span></span></pre>

</div>

All you really need is the plain shortcode on a page (no funky HTML or CSS or wrap it up unless you know what you are doing

[nggallery id=1]

I just changed it and now the gallery is showing up nicely in a grid.

[malcolmmind]

Holy Moly Donut Shops! Thank you so much, where in the jumping cheesecake was this code located?

[Author]

Posts