WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] NEXTGEN Gallery captions (11 posts)

  1. jklx
    Member
    Posted 2 years ago #

    I have this problem with captions position under thumbnails in galleries. There are too low - it looks like there are 2 empty lines between image and caption. I have it since I start working with nextgen. Where can I change it to make it looks like in this demo http://nextgen-gallery.com/templates/caption/ ?

  2. Toshi Yoshida
    Member
    Posted 2 years ago #

    Can you post a link so we can see the problem?

  3. jklx
    Member
    Posted 2 years ago #

  4. Toshi Yoshida
    Member
    Posted 2 years ago #

    You seem to have two line breaks <br>on your page that the nextgen demo site doesn't have. I don't know why you have that occuring but do recall seeing other posts mentioning extra line breaks so try searching for those.

    The only thing I noted was that the demo site only used landscape thumbnails whereas you have landscape and portrait. Thats controlled by a setting under Thumbnails.

    An option might be to try out some of the provided nextgen styles to see if there's one that minises the visual effect of the line breaks.

    Personally if I was using landscape and portrait thumbnails I'd either prefix the names differently then sort them by name so they didn't imtermingle or put them into separate galleries on the same page.

  5. jklx
    Member
    Posted 2 years ago #

    Just to let you know every image on this site is a square. Album sites are not a nextgen albums but they are a html tables.

  6. jklx
    Member
    Posted 1 year ago #

    does someone know the solution ?

    here's my nggallery.css code:

    /*
    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: center;
     	font-weight: bold;
    	margin:0px;
    	padding:0px;
    	font-size: 1.4em;
    	margin-bottom: 10px;
    }
    
    .ngg-thumbnail {
    	float: center;
    	margin-right: 12px;
    }
    
    .ngg-thumbnail img {
    	background-color:#FFFFFF;
    	border:0px solid #FFFFFF;
    	margin:4px 0px 4px 5px;
    	padding:4px;
    	position:relative;
    }
    
    .ngg-thumbnail img:hover {
    	background-color: #FFFFFF;
    }
    
    .ngg-description {
    	text-align: center;
    }
    
    /* ----------- Album Styles Compact -------------*/
    
    .ngg-album-compact {
    	float:center;
    	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 {
    	text-align: center;
    	overflow: hidden;
    	margin-top: 10px;
    	width: 100%;
    	clear:both;
    	display:block;
    }
    
    .ngg-galleryoverview .desc {
    /* required for description */
       margin:0px 10px 10px 0px;
       padding:5px;
    }
    
    .ngg-gallery-thumbnail-box {
    	display: inline-block;
    }
    
    .ngg-gallery-thumbnail {
    	float: center;
    	margin-right: 5px;
    	text-align: center;
    }
    
    .ngg-gallery-thumbnail img {
    	background-color:#FFFFFF;
    	border:1px solid #FFFFFF;
    	display:block;
    	margin:4px 0px 4px 5px;
    	padding:4px;
    	position:relative;
    }
    
    .ngg-gallery-thumbnail img:hover {
    	background-color: #FFFFFF;
    }
    
    .ngg-gallery-thumbnail span {
    	/* Images description */
    	font-size:100%;
    	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 #FFFFFF;
    	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 #FFFFFF;
    	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;
    }
  7. Toshi Yoshida
    Member
    Posted 1 year ago #

    I think I remember what other posters have said can causes this problem. It's due the html being split over two (or more) lines instead of being contiguous. So in the gallery-caption.php file (if you using the gallery caption shortcode) look for something like

    <img style="width: 1999px; height: 1499px;"
     alt="Example Image"  src="file:///F:/aaWeb/Websites/Images/android_tux.jpeg">

    You want the <img..................> (and other statements) to not have line brakes. Line wrap is ok.

  8. jklx
    Member
    Posted 1 year ago #

    Is there a chance You could tell me exactly what i suppose to change ?

    this is my gallery-caption.php code

    <?php
    /**
    Template Page for the gallery overview
    
    Follow variables are useable :
    
    	$gallery     : Contain all about the gallery
    	$images      : Contain all images, path, title
    	$pagination  : Contain the pagination content
    
     You can check the content when you insert the tag <?php var_dump($variable) ?>
     If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
    **/
    ?>
    <?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>
    
    <div class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>">
    
    <?php if ($gallery->show_slideshow) { ?>
    	<!-- Slideshow link -->
    	<div class="slideshowlink">
    		<a class="slideshowlink" href="<?php echo $gallery->slideshow_link ?>">
    			<?php echo $gallery->slideshow_link_text ?>
    		</a>
    	</div>
    <?php } ?>
    
    <?php if ($gallery->show_piclens) { ?>
    	<!-- Piclense link -->
    	<div class="piclenselink">
    		<a class="piclenselink" href="<?php echo $gallery->piclens_link ?>">
    			<?php _e('[View with PicLens]','nggallery'); ?>
    		</a>
    	</div>
    <?php } ?>
    
    	<!-- Thumbnails -->
    	<?php foreach ( $images as $image ) : ?>
    
    	<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
    		<div class="ngg-gallery-thumbnail" >
    			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
    				<?php if ( !$image->hidden ) { ?>
    				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
    				<?php } ?>
    			</a>
    			<span><?php echo $image->caption ?></span>
    		</div>
    	</div>
    	<?php if ( $image->hidden ) continue; ?>
    	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
    	<br style="clear: both" />
    	<?php } ?>
     	<?php endforeach; ?>
    
    	<!-- Pagination -->
     	<?php echo $pagination ?>
    
    </div>
    
    <?php endif; ?>
  9. Toshi Yoshida
    Member
    Posted 1 year ago #

  10. jklx
    Member
    Posted 1 year ago #

    it looks better now, but still not as good as in the demo site :/

  11. jklx
    Member
    Posted 1 year ago #

    ok. I solved my problem :)

    I have erased the line breaks in few more places. And added a br/ on the end

    Now my gallery-caption.php code looks like this:

    <?php
    /**
    Template Page for the gallery overview
    
    Follow variables are useable :
    
    	$gallery     : Contain all about the gallery
    	$images      : Contain all images, path, title
    	$pagination  : Contain the pagination content
    
     You can check the content when you insert the tag <?php var_dump($variable) ?>
     If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
    **/
    ?>
    <?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>
    
    <div class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>">
    
    <?php if ($gallery->show_slideshow) { ?>
    	<!-- Slideshow link -->
    	<div class="slideshowlink">
    		<a class="slideshowlink" href="<?php echo $gallery->slideshow_link ?>">
    			<?php echo $gallery->slideshow_link_text ?>
    		</a>
    	</div>
    <?php } ?>
    
    <?php if ($gallery->show_piclens) { ?>
    	<!-- Piclense link -->
    	<div class="piclenselink">
    		<a class="piclenselink" href="<?php echo $gallery->piclens_link ?>">
    			<?php _e('[View with PicLens]','nggallery'); ?>
    		</a>
    	</div>
    <?php } ?>
    
    	<!-- Thumbnails -->
    	<?php foreach ( $images as $image ) : ?>
    
    	<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> ><div class="ngg-gallery-thumbnail" ><a href="<?php echo $image->imageURL ?>"title="<?php echo $image->description ?>"<?php echo $image->thumbcode ?>><?php if ( !$image->hidden ){ ?><img title="<?php echo $image->alttext ?>"alt="<?php echo $image->alttext ?>"src="<?php echo $image->thumbnailURL ?>"/><?php } ?></a><span><?php echo $image->caption ?></span></div><br/>
    	</div>
    	<?php if ( $image->hidden ) continue; ?>
    	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
    	<br style="clear: both" />
    	<?php } ?>
     	<?php endforeach; ?>
    
    	<!-- Pagination -->
     	<?php echo $pagination ?>
    
    </div>
    
    <?php endif; ?>

    THANK YOU TOSHI !!
    I really appreciate your help :)

Topic Closed

This topic has been closed to new replies.

About this Topic