Album – Compact Display No Longer Orderly

  • ResolvedPlugin Contributor photocrati

    (@photocrati)


    11 years, 2 months ago

    This thread is referring to the issue of NextGEN Gallery Album – Compact Display unordered.

    If you are experiencing this error, please detail the below needed information + temp. login information in a Bug Report to us here. Thanks!

    – WordPress up to date?
    – NextGEN up to date? (Did this error begin as of v1.9.10, v1.9.11 or v1.9.12?)
    – Which version of NextGEN were you running before you upgraded?

    (please confirm the following, with your server host tech) :
    – MySQL up to date (5.2.4)?
    – PHP up to date (5.0)?
    – The mod_rewrite Apache module activated?
    – PHP Safe Mode OFF?

    and if you’re willing to share:
    – Who are you hosted with?
    – What theme are you running?
    – Which plugins do you have installed and activated?
    – Does this error still occur if you switch your theme to the WP default, and deactivate all plugins except NextGEN Gallery? (*be sure to clear your browser cache and reload your site after deactivating)

    We will likely have a fix for this in our next upgrade, but to be sure we do – we’ll need as much information as possible from those of you who are experiencing this bug.

    *Please do not post unrelated issues in this thread. This thread is specifically for the issue of NextGEN Gallery – Album Compact display no longer orderly as of v1.9.11 & v1.9.12 upgrade.

    Thanks!

    http://wordpress.org/extend/plugins/nextgen-gallery/

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • southcreek

    (@southcreek)

    11 years, 2 months ago

    I’ve tried this with several themes with the same results, except for one, ‘Evolve’, which works properly. This is why I believe it’s more than just a CSS issue. CSS tweaks could help, but was just a temporary solution for me.

    You can see the results here. http://www.commonbullets.com/gallery/1972-corvette/ using the Evolve theme as compared to the prior screen shots I submitted.

    katrink

    (@katrink)

    11 years, 2 months ago

    having same issue compact gallery went all crazy.

    screenshot of the crazy
    http://www.bondeddesignclient.com/CompactAlbum.png

    KD35

    (@kd35)

    11 years, 2 months ago

    Damnit I am also having the same issue, I wish I didn’t update. My site was suppose to go live but now I have to spend my time trying to fix this myself as the new owners haven’t released ANY FIX despite multiple people having this bug.

    So annoying.

    KD35

    (@kd35)

    11 years, 2 months ago

    – WordPress up to date? — YES
    – NextGEN up to date? (Did this error begin as of v1.9.10, v1.9.11 or v1.9.12?) — IN 1.9.12(THE LATEST)
    – Which version of NextGEN were you running before you upgraded? 1.9.10

    (please confirm the following, with your server host tech) :
    – MySQL up to date (5.2.4)? YES
    – PHP up to date (5.0)? YES
    – The mod_rewrite Apache module activated? YES
    – PHP Safe Mode OFF? YES, IT’S OFF

    and if you’re willing to share:
    – Who are you hosted with? Dedicated Server @ eCatel
    – What theme are you running? Magazine from Themeforest.net
    – Which plugins do you have installed and activated? NEXTGEN, ALL IN ONE SEO, Contact form 7, Breadcrumb NXT, Custom Permalinks
    – Does this error still occur if you switch your theme to the WP default, and deactivate all plugins except NextGEN Gallery? (*be sure to clear your browser cache and reload your site after deactivating) — YES, even when using the standard ELEVEN 13 theme, same thing happens.

    KD35

    (@kd35)

    11 years, 2 months ago

    Well I fixed it by copying my old custom NGGallery CSS from v1.9.10 and replaced the new one and vwala, fixed.

    katrink

    (@katrink)

    11 years, 2 months ago

    Would I be able to get a copy of your old version? My client updated and did not bother to do a backup so mine is gone gone. 🙁

    KD35

    (@kd35)

    11 years, 2 months ago

    /*
    CSS Name: Default Styles
    Description: NextGEN Default Gallery Stylesheet
    Author: Alex Rabe
    Version: 2.11

    This is a template stylesheet that can be used with NextGEN Gallery. I tested the
    styles with a default theme Kubrick. Modify it when your theme struggle with it,
    it’s only a template design

    */

    /* ———– Album Styles Extend ————-*/

    .ngg-albumoverview {
    margin-top: 10px;
    width: 100%;
    clear:both;
    display:block !important;
    }

    .ngg-album {
    height: 100%;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #fff;
    }

    /* IE6 will ignore this , again I hate IE6 */
    /* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
    html>body .ngg-album {
    overflow:hidden;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #cccccc;
    }

    .ngg-album {
    overflow: hidden;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #cccccc;
    }

    .ngg-albumtitle {
    text-align: left;
    font-weight: bold;
    margin:0px;
    padding:0px;
    font-size: 1.4em;
    margin-bottom: 10px;
    }

    .ngg-thumbnail {
    float: left;
    margin-right: 12px;
    }

    .ngg-thumbnail img {
    border:1px solid #000000;
    position:relative;
    }

    .ngg-thumbnail img:hover {
    background-color: #000000;
    }

    .ngg-description {
    text-align: left;
    }

    /* ———– Album Styles Compact ————-*/

    .ngg-album-compact {
    float:left;
    height:180px;
    padding-right:4px !important;
    margin:0px !important;
    text-align:left;
    width:120px;
    }

    .ngg-album-compactbox {
    margin:0pt 0pt 0px !important;
    }

    .ngg-album-compactbox .Thumb {
    border:1px solid #000000;
    margin:0px !important;
    padding:0px !important;
    width:102px;
    height:102px;
    }

    .ngg-album-compact h4 {
    font-size:14px;
    margin-bottom:0px;
    margin-top:0px;
    }

    .ngg-album-compact p {
    font-size:10px;
    margin-top:2px;
    }

    /* ———– Gallery style ————-*/

    .ngg-galleryoverview {
    overflow: hidden;
    margin-top: 10px;
    width: 100%;
    clear:both;
    display:block !important;
    }

    .ngg-galleryoverview .desc {
    /* required for description */
    margin:0px 10px 10px 0px;
    padding:5px;
    }

    .ngg-gallery-thumbnail-box {
    float: left;
    }

    .ngg-gallery-thumbnail {
    float: left;
    margin-right: 2px;
    text-align: center;
    }

    .ngg-gallery-thumbnail img {
    border:1px solid #000000;
    display:block;
    margin:2px 0px 2px 2px;
    position:relative;
    }

    .ngg-gallery-thumbnail img:hover {
    background-color: #000000;
    }

    .ngg-gallery-thumbnail span {
    /* Images description */
    font-size:90%;
    padding-left:5px;
    display:block;
    }

    .ngg-clear {
    clear: both;
    }

    /* ———– Gallery navigation ————-*/

    .ngg-navigation {
    font-size:0.9em !important;
    clear:both !important;
    display:block !important;
    padding-top: 15px;
    padding-bottom: 2px;
    text-align:center;
    }

    .ngg-navigation span {
    font-weight:bold;
    margin:0pt 6px;
    }

    .ngg-navigation a.page-numbers,
    .ngg-navigation a.next,
    .ngg-navigation a.prev,
    .ngg-navigation span.page-numbers,
    .ngg-navigation span.next,
    .ngg-navigation span.prev {
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 8px;
    text-decoration: none;
    }

    .ngg-navigation a.page-numbers:hover,
    .ngg-navigation a.next:hover,
    .ngg-navigation a.prev:hover,
    .ngg-navigation span.page-numbers:hover,
    .ngg-navigation span.next:hover,
    .ngg-navigation span.prev:hover {
    background-color: #0066CC;
    color: #FFFFFF !important;
    text-decoration: none !important;
    }

    /* ———– Image browser style ————-*/

    .ngg-imagebrowser {

    }

    .ngg-imagebrowser h3 {
    text-align:center;
    }

    .ngg-imagebrowser img {
    border:1px dashed #A9A9A9;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    display:block !important;
    padding:2px;
    }

    .ngg-imagebrowser-nav {
    padding:5px;
    margin-left:10px;
    }

    .ngg-imagebrowser-nav .back {
    float:left;
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
    }

    .ngg-imagebrowser-nav .next {
    float:right;
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
    }

    .ngg-imagebrowser-nav .counter {
    text-align:center;
    font-size:0.9em !important;
    }

    .exif-data {
    margin-left: auto !important;
    margin-right: auto !important;
    }

    /* ———– Slideshow ————-*/
    .slideshow {
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    outline: none;
    }

    .slideshowlink {

    }

    /* ———– JS Slideshow ————-*/
    .ngg-slideshow {
    overflow:hidden;
    position: relative;
    }

    .ngg-slideshow * {
    vertical-align:middle;
    }

    /* See also : http://www.brunildo.org/test/img_center.html */
    .ngg-slideshow-loader{
    display: table-cell;
    text-align: center;
    vertical-align:middle;
    }

    .ngg-slideshow-loader img{
    background: none !important;
    border: 0 none !important;
    margin:auto !important;
    }

    /* ———– Single picture ————-*/
    .ngg-singlepic {
    background-color:#FFFFFF;
    display:block;
    padding:4px;
    }

    .ngg-left {
    float: left;
    margin-right:10px;
    }

    .ngg-right {
    float: right;
    margin-left:10px;
    }

    .ngg-center {
    margin-left: auto !important;
    margin-right: auto !important;
    }

    /* ———– Sidebar widget ————-*/
    .ngg-widget,
    .ngg-widget-slideshow {
    overflow: hidden;
    margin:0pt;
    padding:5px 0px 0px 0pt;
    text-align:left;
    }

    .ngg-widget img {
    border:2px solid #A9A9A9;
    margin:0pt 2px 2px 0px;
    padding:1px;
    }

    /* ———– Related images ————-*/
    .ngg-related-gallery {
    background:#F9F9F9;
    border:1px solid #E0E0E0;
    overflow:hidden;
    margin-bottom:1em;
    margin-top:1em;
    padding:5px;
    }
    .ngg-related-gallery img {
    border: 1px solid #DDDDDD;
    float: left;
    margin: 0pt 3px;
    padding: 2px;
    height: 50px;
    width: 50px;
    }

    .ngg-related-gallery img:hover {
    border: 1px solid #000000;
    }

    /* ———– Gallery list ————-*/

    .ngg-galleryoverview ul li:before {
    content: ” !important;
    }

    .ngg-gallery-list {
    list-style-type:none;
    padding: 0px !important;
    text-indent:0px !important;
    }

    .ngg-galleryoverview div.pic img{
    width: 100%;
    }

    .ngg-gallery-list li {
    float:left;
    margin:0 2px 0px 2px !important;
    overflow:hidden;
    }

    .ngg-gallery-list li a {
    border:1px solid #CCCCCC;
    display:block;
    padding:2px;
    }

    .ngg-gallery-list li.selected a{
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#000000 none repeat scroll 0 0;
    }

    .ngg-gallery-list li img {
    height:40px;
    width:40px;
    }

    li.ngg-next, li.ngg-prev {
    height:40px;
    width:40px;
    font-size:3.5em;
    }

    li.ngg-next a, li.ngg-prev a {
    padding-top: 10px;
    border: none;
    text-decoration: none;
    }

    Try that, it should work.

    Plugin Contributor photocrati

    (@photocrati)

    11 years, 2 months ago

    We have been able to replicate this issue, in the CSS and should have a fix for this in our next upgrade.

    A quick, temp. solution would be to copy the below 1.9.10 stylesheet and replace the stylesheet under Gallery > Style in your NGG settings:

    /*
CSS Name: Default Styles
Description: NextGEN Default Gallery Stylesheet
Author: Alex Rabe
Version: 2.11

This is a template stylesheet that can be used with NextGEN Gallery. I tested the
styles with a default theme Kubrick. Modify it when your theme struggle with it,
it's only a template design

*/

/* ----------- Album Styles Extend -------------*/

.ngg-albumoverview {
	margin-top: 10px;
	width: 100%;
	clear:both;
	display:block !important;
}

.ngg-album {
    height: 100%;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #fff;
}

/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
    overflow:hidden;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #cccccc;
}

.ngg-album {
	overflow: hidden;
	padding: 5px;
	margin-bottom: 5px;
	border: 1px solid #cccccc;
}

.ngg-albumtitle {
	text-align: left;
 	font-weight: bold;
	margin:0px;
	padding:0px;
	font-size: 1.4em;
	margin-bottom: 10px;
}

.ngg-thumbnail {
	float: left;
	margin-right: 12px;
}

.ngg-thumbnail img {
	background-color:#FFFFFF;
	border:1px solid #A9A9A9;
	margin:4px 0px 4px 5px;
	padding:4px;
	position:relative;
}

.ngg-thumbnail img:hover {
	background-color: #A9A9A9;
}

.ngg-description {
	text-align: left;
}

/* ----------- Album Styles Compact -------------*/

.ngg-album-compact {
	float:left;
	height:180px;
	padding-right:6px !important;
	margin:0px !important;
	text-align:left;
	width:120px;
}

.ngg-album-compactbox {
	background:transparent url(albumset.gif) no-repeat scroll 0%;
	height:86px;
	margin:0pt 0pt 6px !important;
	padding:12px 0pt 0pt 7px !important;
	width:120px;
}

.ngg-album-compactbox .Thumb {
	border:1px solid #000000;
	margin:0px !important;
	padding:0px !important;
	width:91px;
	height:68px;
}

.ngg-album-compact h4 {
	font-size:15px;
	font-weight:bold;
	margin-bottom:0px;
	margin-top:0px;
	width:110px;
}

.ngg-album-compact p {
	font-size:11px;
	margin-top:2px;
}

/* ----------- Gallery style -------------*/

.ngg-galleryoverview {
	overflow: hidden;
	margin-top: 10px;
	width: 100%;
	clear:both;
	display:block !important;
}

.ngg-galleryoverview .desc {
/* required for description */
   margin:0px 10px 10px 0px;
   padding:5px;
}

.ngg-gallery-thumbnail-box {
	float: left;
}

.ngg-gallery-thumbnail {
	float: left;
	margin-right: 5px;
	text-align: center;
}

.ngg-gallery-thumbnail img {
	background-color:#FFFFFF;
	border:1px solid #A9A9A9;
	display:block;
	margin:4px 0px 4px 5px;
	padding:4px;
	position:relative;
}

.ngg-gallery-thumbnail img:hover {
	background-color: #A9A9A9;
}

.ngg-gallery-thumbnail span {
	/* Images description */
	font-size:90%;
	padding-left:5px;
	display:block;
}

.ngg-clear {
	clear: both;
}

/* ----------- Gallery navigation -------------*/

.ngg-navigation {
	font-size:0.9em !important;
	clear:both !important;
	display:block !important;
	padding-top: 15px;
    padding-bottom: 2px;
	text-align:center;
}

.ngg-navigation span {
	font-weight:bold;
	margin:0pt 6px;
}

.ngg-navigation a.page-numbers,
.ngg-navigation a.next,
.ngg-navigation a.prev,
.ngg-navigation span.page-numbers,
.ngg-navigation span.next,
.ngg-navigation span.prev {
	border:1px solid #DDDDDD;
	margin-right:3px;
	padding:3px 8px;
    text-decoration: none;
}

.ngg-navigation a.page-numbers:hover,
.ngg-navigation a.next:hover,
.ngg-navigation a.prev:hover,
.ngg-navigation span.page-numbers:hover,
.ngg-navigation span.next:hover,
.ngg-navigation span.prev:hover {
	background-color: #0066CC;
	color: #FFFFFF !important;
	text-decoration: none !important;
}

/* ----------- Image browser style -------------*/

.ngg-imagebrowser {

}

.ngg-imagebrowser h3 {
	text-align:center;
}

.ngg-imagebrowser img {
	border:1px solid #A9A9A9;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%;
	display:block !important;
	padding:5px;
}

.ngg-imagebrowser-nav {
	padding:5px;
	margin-left:10px;
}

.ngg-imagebrowser-nav .back {
	float:left;
	border:1px solid #DDDDDD;
	margin-right:3px;
	padding:3px 7px;
}

.ngg-imagebrowser-nav .next {
	float:right;
	border:1px solid #DDDDDD;
	margin-right:3px;
	padding:3px 7px;
}

.ngg-imagebrowser-nav .counter {
	text-align:center;
	font-size:0.9em !important;
}

.exif-data {
  	margin-left: auto !important;
    margin-right: auto !important;
}

/* ----------- Slideshow -------------*/
.slideshow {
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	outline: none;
}

.slideshowlink {

}

/* ----------- JS Slideshow -------------*/
.ngg-slideshow {
    overflow:hidden;
    position: relative;
}

.ngg-slideshow * {
    vertical-align:middle;
}

/* See also : http://www.brunildo.org/test/img_center.html */
.ngg-slideshow-loader{
    display: table-cell;
    text-align: center;
    vertical-align:middle;
}

.ngg-slideshow-loader img{
    background: none !important;
    border: 0 none !important;
    margin:auto !important;
}

/* ----------- Single picture -------------*/
.ngg-singlepic {
	background-color:#FFFFFF;
	display:block;
	padding:4px;
}

.ngg-left {
	float: left;
	margin-right:10px;
}

.ngg-right {
	float: right;
	margin-left:10px;
}

.ngg-center {
  	margin-left: auto !important;
    margin-right: auto !important;
}

/* ----------- Sidebar widget -------------*/
.ngg-widget,
.ngg-widget-slideshow {
	overflow: hidden;
	margin:0pt;
	padding:5px 0px 0px 0pt;
	text-align:left;
}

.ngg-widget img {
	border:2px solid #A9A9A9;
	margin:0pt 2px 2px 0px;
	padding:1px;
}

/* ----------- Related images -------------*/
.ngg-related-gallery {
	background:#F9F9F9;
	border:1px solid #E0E0E0;
	overflow:hidden;
	margin-bottom:1em;
	margin-top:1em;
	padding:5px;
}
.ngg-related-gallery img {
	border: 1px solid #DDDDDD;
	float: left;
	margin: 0pt 3px;
	padding: 2px;
	height: 50px;
	width:  50px;
}

.ngg-related-gallery img:hover {
	border: 1px solid #000000;
}

/* ----------- Gallery list -------------*/

.ngg-galleryoverview ul li:before {
	content: '' !important;
}

.ngg-gallery-list {
	list-style-type:none;
	padding: 0px !important;
	text-indent:0px !important;
}

.ngg-galleryoverview div.pic img{
	width: 100%;
}

.ngg-gallery-list li {
	float:left;
	margin:0 2px 0px 2px !important;
	overflow:hidden;
}

.ngg-gallery-list li a {
	border:1px solid #CCCCCC;
	display:block;
	padding:2px;
}

.ngg-gallery-list li.selected a{
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:#000000 none repeat scroll 0 0;
}

.ngg-gallery-list li img {
	height:40px;
	width:40px;
}

li.ngg-next, li.ngg-prev {
	height:40px;
	width:40px;
	font-size:3.5em;
}

li.ngg-next a, li.ngg-prev a  {
	padding-top: 10px;
	border: none;
	text-decoration: none;
}

#TB_window {
	z-index: 9999 !important;
}
    tbohannon

    (@tbohannon)

    11 years, 1 month ago

    This is not just an issue with Compact. I am having the same issue with Extend view even after replacing the style sheet posted by Photocrati.

    Using Genesis StudioPress (Backcountry Child Theme).

    WP 3.51

    Plugin Contributor photocrati

    (@photocrati)

    11 years, 1 month ago

    @tbohannon – In an effort to keep issues consolidated, would you mind creating a new thread with your issue relating to Extend Album? Thanks!

    Annelies Visser

    (@annelies-visser)

    11 years ago

    I am experiencing the same problem.
    I have copied and replaced the stylsheet mentioned above, but now it is even worse.

    If I deactivate all plugins and switch to WP default, will this not have effects on how my site is looking at the moment? Will I not loose all my settings?

    Plugin Contributor photocrati

    (@photocrati)

    11 years ago

    @annelies, switching themes and/or deactivating plugins should retain settings when you turn them back on after deactivating.

    tapdancer

    (@tapdancer)

    11 years ago

    I’m having this problem as well and just tried the above stylesheet. It didn’t do a thing. I tried turning off plugins that may be interfering. I’m running the latest WordPress and my host is current on php and MySql. Rackspace is the host. Help. My client is freaking out.

    tapdancer

    (@tapdancer)

    11 years ago

    Just had the plugin recreate the thumbnails and it fixed it. Those of you out there with this problem, try that.

    Annelies Visser

    (@annelies-visser)

    11 years ago

    @ photocrati, I deactivated plugins and switched theme, but it didn’t help I’m afraid.

    @ tapdancer, can you explain how you let the plugin recreate the thumbnails?

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • The topic ‘Album – Compact Display No Longer Orderly’ is closed to new replies.