WordPress › Support » [Plugin: NextGEN Gallery] Missing description under thumbnails

alexandrk
Member
Posted 4 years ago #

Just updated to Nextgen-Gallery 1.0.1 have no idea how to enable description under thumbnails. Please let me know if you have solution. Thank you!
mrkingid
Member
Posted 4 years ago #

I have the same issue. Hopefully Alex will be by soon.
holdengreen
Member
Posted 4 years ago #

Same Problem Here. My gallery feel naked without descriptions under thumbnails.

Alex Rabe
Member
Posted 4 years ago #

It's now part of your template. Please look into the gallery.php file and edit it in the way you want. Example :

<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box">
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
			</a>
		</div>
	</div>

Add the code <?php echo $image->description ?> there where you need it. (below the link, below the div etc.)

<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box">
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
			</a>
		</div>
        <?php echo $image->description ?>
	</div>

mrkingid
Member
Posted 4 years ago #

A+. Thanks Alex!!!
mrkingid
Member
Posted 4 years ago #

Alex,

Do you have any templates to download and use directly? I see you samples on your page, but am looking for something a little more direct.

AM I correct in saying the css is embedded into the PHP file?

Thanks.
alexandrk
Member
Posted 4 years ago #

Thank you very much for all your help!!
Alex Rabe
Member
Posted 4 years ago #

No the CSS is not embedded, copy the "master" template view/gallery.php form the plugin to your theme into nggallery/gallery.php. Then start playing with the CSS & the code, you will direct see the result...

(Your nggallery.css shoudl be as well copied to the theme folder)
mrkingid
Member
Posted 4 years ago #

Thank you, but I still must be missing something.

OK so I copy gallery.php and nggallery.css over to an nggallery folder that is in MY theme folder.

From there I change the name of gallery.php to gallery-round.php to give it a template name.

Then I add the round css info into the nggallery.css file?

Correct?

I did this but it still doesn't work.

I do have [nggallery id=1 template=round] on my page.
Alex Rabe
Member
Posted 4 years ago #

The nggallery.css need to be in the root of your theme folder not in the subfolder. Please post also a link

mrkingid
Member
Posted 4 years ago #

you can see the link at http://dorispatersonart.com/gallery/

I got most things working but I am unable to get the<span> to work for cutting the corners off the thumbnail images.

Any ideas.

My two parameters are:

.sample3 img {
	width: 125px;
	height: 100px;
	border: none;
	padding: 7px 7px 7px 7px;
	background: url(images/round-bg.gif) no-repeat;
}

.sample3 span {
	width: 111px;
	height: 86px;
	display: block;
	position: absolute;
	top: 7px;
	left: 7px;
	background: url(images/round-corner.png) no-repeat;
}

Alex Rabe
Member
Posted 4 years ago #

something with your round-corner.png doesn't fit (I'm no CSS expert), I tested with firebug left/top 17px; and can see then the upper left border. Study the example from WebDesigner Wall
mrkingid
Member
Posted 4 years ago #

I see what you mean. Hmmmmm

I'll have to play with it more but I used the files from WebDesigner Wall.

My resizing might be off.
electrolund
Member
Posted 4 years ago #

I followed your instructions and found that your syntax for the quicktag wasn't quite correct. It should be:

[nggallery=1 template=sample1]

With this corrected, I get the following error on the preview:

Rendering of template gallery-1.php failed

Thinking it was a permissions issue, I made sure my gallery template file was 0644, as are all the other default WP templates. Any ideas why this would be?
mrkingid
Member
Posted 4 years ago #

The syntax is actually

[nggallery id=1 template=sample1]
electrolund
Member
Posted 4 years ago #

Ahh, you are right. My mistake. I'm still having that same gallery template error though. Basically if I call it this way:

[nggallery id=28]

The gallery loads. If I attempt to use my gallery template:

[nggallery id=28 template=1]

where my template file is called "gallery-1.php", I get the error I listed above. Hmm.
mrkingid
Member
Posted 4 years ago #

Is the 'nggallery.css' in your theme ROOT directory and the gallery-1.php in a directory named 'nggallery' that is in your root theme directory?

PS. I finally got the SPAN tag to work. Had to physically resize the PNG file to the size of the thumbnail instead of trying to do it in CSS.
electrolund
Member
Posted 4 years ago #

Thanks, mrkingid. I didn't see that bit about the css file in Alex's instructions. Just to be clear, Alex says that the gallery template file should be here:

{wordpress dir}\wp-content\themes\default\nggallery\gallery-template1.php

You are saying it should be here:

{wordpress dir}\wp-content\themes\nggallery\gallery-template1.php

I've tried both now, with a copy of the nggallery.css file in those two locations above as well as:

{wordpress dir}\wp-content\themes\nggallery.css

Notice I said a copy. I found that css file here:

{wordpress dir}\wp-content\plugins\nextgen-gallery\css\nggallery.css

I'm assuming that it's safe to copy and not move the file, since after every update of the plugin, it will be restored anyway.

So far, no changes.
mrkingid
Member
Posted 4 years ago #

Sorry for the confusion.

The gallery template has to be here...

{wordpress dir}\wp-content\themes\your theme directory\gallery-template1.php

And you are correct the nggallery is in...

{wordpress dir}\wp-content\themes\nggallery.css

Yes it is safe to copy as the template file will use only the css file in the themes folder.

You modify the nggallery.css file that is in the theme folder to change the layout of the gallery.
Alex Rabe
Member
Posted 4 years ago #

Thanks mrkingid for your help in explanation. I will need to update my documentation pages a bit better :-)

Let me note :

if you add the gallery.php (form the plugin folder) to

{wordpress dir}\wp-content\themes\your theme directory\gallery.php

then you can call it with [nggallery id=x]

if you need another template use the tag [nggallery id=x template=mysample]

and NextGEN Gallery look for a file in

{wordpress dir}\wp-content\themes\your theme directory\gallery-mysample.php
justderek
Member
Posted 4 years ago #

So there does not need to be a subdirectory to your theme directory called nggallery at all?
Alex Rabe
Member
Posted 4 years ago #

Ups... I did a mistake, yes the folder is needed :

{wordpress dir}\wp-content\themes\your theme directory\nggallery\gallery.php

Sorry for the confusing
electrolund
Member
Posted 4 years ago #

Thanks for your help everyone! I've got this working now. In my case, I opted to change the line of code from showing description to showing alttext instead:

<?php echo $image->alttext ?>

Example.

But one other note. My template copy of the nggallery.css is not being loaded. Instead, as per my selection in NextGen admin area, ngg_shadow2.css is used, which is found here:

{wordpress dir}/wp-content/plugins/nextgen-gallery/css/ngg_shadow2.css

Could that file also be copied over to my template folder so that I can make the customizations?
Alex Rabe
Member
Posted 4 years ago #

in this case copy ngg_shadow2.css to your theme and rename it to nggallery.css
electrolund
Member
Posted 4 years ago #

Thanks, Alex. It should also be noted that to use a theme template nggallery.css, you must also select "Default" in the NextGen Style submenu.

But, I found from experimentation that the location of the theme version of nggallery.css must be here to work:

{wordpress dir}\wp-content\themes\your theme directory\nggallery.css

NOT here, as stated above:

{wordpress dir}\wp-content\themes\nggallery.css

That said, might I suggest for future that this be changed to here?:

{wordpress dir}\wp-content\themes\your theme directory\nggallery\nggallery.css

That would be nicer to maintain, since gallery.php is already in that nggallery subfolder. Less to keep track of that way.

One other thought is that when using template style sheets, there might be paths that break as a result. In my case, there is a shadow effect (shadowAlpha.png) which was broken, since the file is no longer in the plugin root folder. Easy to fix, but still worth noting.
ntripcevich
Member
Posted 4 years ago #

I'm impressed with v101 of NextGen and the Templates approach seems like a better way to control appearance. However I think that forcing people to use CSS for simple theming changes will limit the novice users quite a bit.
Maybe a library of contributed CSS templates for NextGen can be hosted somewhere (with a link from within the NG Options panel). Also, it seems like the default template provided should have Alt Text labels in the Gallery and then they can be deleted from the CSS (because its easier to locate and delete than to write new lines of CSS).

justderek
Member
Posted 4 years ago #

I've been struggling to get my gallery to look the way it did in pre-1.0 versions of NGG, which was like this.

I now seem to have the files in the right directories, because the captions are appearing. Unfortunately, they're not displaying correctly - here's the link to my gallery.

I don't know php. Following the steps above, my template file gallery-mytemplate.php now reads like this:

<!-- Thumbnails -->
	<?php foreach ($images as $image) : ?>

	<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box">
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
			</a>
			<?php echo $image->description ?>
		</div>
	</div>
 	<?php endforeach; ?>

I have some clue about CSS (self-taught by trial and error). Right now the relevant part of my nggallery.css file looks like this:

.ngg-gallery-thumbnail-box {
	float: left;
	font-size:90%;	/* goes here instead of under .ngg-gallery-thumbnail span ?  */
}

.ngg-gallery-thumbnail {
	float: left;
	margin-right: 5px;
	height: 115px;	/* fix for  inline/IE problem from WP Forums thread @  http://wordpress.org/support/topic/202931?replies=3 */
}

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

/* only show resume, webpage, reel & etc. links in slimbox, not in thumbnail gallery */
		.ngg-gallery-thumbnail span .resumelink, .ngg-gallery-thumbnail span .weblink, .ngg-gallery-thumbnail span .reellink, .ngg-gallery-thumbnail span .photolink {
			display:none;
		}

In previous versions, NGG allowed me to use html tags in the image descriptions/captions. Is this no longer supported?

johnscane
Member
Posted 4 years ago #

I have not been able to figure this out yet.
Can't we just have it back the way it used to be?
This seems to be overly complicated compared to checking a box and having it all work perfectly.
monodistortion
Member
Posted 4 years ago #

Justderek,

The problem with $image->description might be a bug, I don't know the nggallery code enough to say. It's giving you html entities when you don't want them.

Luckily PHP has a lot of great functions to deal with strings like htmlspecialchars_decode(). I tested this out with nggallery 1.0.2 and it works ok.

<div class="description">
<?php echo htmlspecialchars_decode($image->description) ?>
</div>

Try a lot of special characters in your description like ½ © test & & " ' <br /><a href="#">test</a> and they should come out ok.
monodistortion
Member
Posted 4 years ago #

Hmm, just be careful though if other people are allowed to administer your nggallery. It might be possible to hide malicious html or JavaScript into the description text.

12 3 Next »

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

[resolved] [Plugin: NextGEN Gallery] Missing description under thumbnails (62 posts)

Topic Closed

About this Topic

Tags

Code is Poetry