WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
[resolved] Album - Compact Display No Longer Orderly (19 posts)

  1. photocrati
    Member
    Plugin Author

    Posted 1 year 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/

  2. southcreek
    Member
    Posted 1 year 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.

  3. katrink
    Member
    Posted 1 year ago #

    having same issue compact gallery went all crazy.

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

  4. KD35
    Member
    Posted 1 year 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.

  5. KD35
    Member
    Posted 1 year 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.

  6. KD35
    Member
    Posted 1 year ago #

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

  7. katrink
    Member
    Posted 1 year 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. :(

  8. KD35
    Member
    Posted 1 year 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.

  9. photocrati
    Member
    Plugin Author

    Posted 1 year 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;
    }
  10. tbohannon
    Member
    Posted 1 year 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

  11. photocrati
    Member
    Plugin Author

    Posted 1 year ago #

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

  12. Annelies Visser
    Member
    Posted 1 year 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?

  13. photocrati
    Member
    Plugin Author

    Posted 1 year ago #

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

  14. tapdancer
    Member
    Posted 1 year 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.

  15. tapdancer
    Member
    Posted 1 year ago #

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

  16. Annelies Visser
    Member
    Posted 1 year 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?

  17. tapdancer
    Member
    Posted 1 year ago #

    I originally had the thumbnails ignore the aspect ratio so all the thumbnails were 250x175. I noticed that the sites that had portrait thumbnails were fine so I tried to recreate the thumbnails with the new settings. (under manage gallery you select all the thumbnails and then select create new thumbnails in the dropdown and apply)

    This did not fix the problem so I changed the thumbnails back to ignoring aspect ratio and recreated again and this time it was fixed.
    I'm not sure if it was a fluke but I'm happy it worked.

  18. Annelies Visser
    Member
    Posted 1 year ago #

    Thanks for your answer, I will try it out!

  19. LekLek
    Member
    Posted 1 year ago #

    I was having this problem, and am very glad to find this support thread. Copying and replacing the old style sheet, as suggested by Photocrati above in March, did solve the layout problem. Thanks, and will check back here before updating the plugin next time.
    http://moretimetotravel.com

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic