TV productions

Got it! (and I can login ?? )

It would be nice if you set up an account. I don’t have much time today, but tomorrow or the day after tomorrow should be fine.

Use this email please: info AT tv MINUS productions DOT org

That is indeed really odd! Have you any clue about when the empty albums are created (i.e. when you do something special, hit a button…).

I need more information on this, because I am not able to reproduce the bug.
I would like to know which plugins you’ve activated (because it seems to be a scripting thing).
Besides that, please post (or e-mail) any information you think that could be useful in solving this problem.

Meanwhile I will make a script to remove all the empty albums.

I am looking at the code and I see a bug that caused your problem. I don’t know a quick fix for you right now, but there will be a quick bugfix update of Easy Photo Album that will fix this.

To be honest: there are no docs, but I’m glad you’ve mentioned here. There is some information, but not all, on the about page of Easy Photo Album. You can go to the about page by going to Plugins > Installed plugins and click on About underneath Easy Photo Album. (or go to mydomain.com/wp-admin/index.php?page=epa-about)

I think I will add some kind of documentation to a next release of this plugin. Thank you for asking for it!

It seems that the scripts and styles are not loaded. Have you checked the option show in main loop? Because some other plugins cause easy photo albums being displayed on your front page, but Easy Photo Album doesn’t know about that. So when the option show in main loop isn’t checked, check it and it should display right.

If that option was already checked, I need to know more information before I can help you. Things like what theme you are using and what plugins are activated…

Good luck!

On my own testwebsite
I’ve downloaded Shuttershot also (from fabthemes.com, is that the right one, right?) and I was only able to reproduce the fact that the images didn’t open in a lightbox. The scripts are loaded and the album displays nicely. I noticed that Shuttershot is a little bit old for the newest version of WordPress (3.7.1), so it could have a connection. I don’t know how to fix this for my on site.

On your site: lenacam.com
I’ve found the KIZ KULESI post where the album is included and indeed, the scripts and styles are not loaded. I don’t really know how to fix this properly. The best thing to do would be ask a developer to update the theme to the current theme standards. What you can do though, is change some lines of code in the plugin (those changes will lost after every plugin update):
Open wp-content/plugins/easy-photo-album/EPA_PostType.php and search for the following line (around line 483):

if (isset ( $post ) && ((isset ( $post->post_type ) && self::POSTTYPE_NAME == $post->post_type) || (is_home () && EasyPhotoAlbum::get_instance ()->inmainloop) || has_shortcode ( $post->post_content, 'epa-album' ))) {

replace it with:

if (isset ( $post ) && ((isset ( $post->post_type ) && self::POSTTYPE_NAME == $post->post_type) || (is_home () && EasyPhotoAlbum::get_instance ()->inmainloop) || has_shortcode ( $post->post_content, 'epa-album' )) || is_single()) {

Save the file

@testing

It seems you’ve found a bug! Thank you for that. I was able to reproduce it and now I’ve fixed for the next release.

Just to help you out: delete those two albums and create a new one and do what you want.

@testing

It seems that the required css and javascript isn’t included on the page. You can try to enable the option in main loop on the settings page. If that doesn’t work, I need more information about how your theme works before I can help you.

@jmsbond002

The page you’re referring to is the archive page. So you have to edit archive.php instead of single.php. Just follow those instructions, only read archive.php where the instructions say single.php.

I have a solution, but it is not perfect, because it will show the arrows always (i.e. that the right arrow is visible on the first image of an album and when you click on it, the last image is shown. Regardless if the option wrap around is set to true or not.).

Replace the contents of wp-content/easy-photo-album/css/lightbox.css with:

/* line 7, ../sass/lightbox.sass */
body:after {
  content: url(img/close.png) url(img/loading.gif) url(img/prev.png) url(img/next.png);
  display: none;
}

/* line 11, ../sass/lightbox.sass */
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

/* line 20, ../sass/lightbox.sass */
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}
/* line 28, ../sass/lightbox.sass */
.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
/* line 32, ../sass/lightbox.sass */
.lightbox a img {
  border: none;
}

/* line 35, ../sass/lightbox.sass */
.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 44, ../sass/lightbox.sass */
.lb-container {
  padding: 4px;
}

/* line 47, ../sass/lightbox.sass */
.lb-loader {
  position: absolute;
  top: 43%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

/* line 56, ../sass/lightbox.sass */
.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(img/loading.gif) no-repeat;
}

/* line 63, ../sass/lightbox.sass */
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* line 71, ../sass/lightbox.sass */
.lb-container > .nav {
  left: 0;
}

/* line 74, ../sass/lightbox.sass */
.lb-nav a {
  outline: none;
}

/* line 77, ../sass/lightbox.sass */
.lb-prev, .lb-next {
  width: 49%;
  height: 100%;
  cursor: pointer;
  /* Trick IE into showing hover */
  display: block !important;
}

/* line 84, ../sass/lightbox.sass */
.lb-prev {
  left: 0;
  float: left;
  background: url(img/prev.png) left 48% no-repeat;
}

/* line 90, ../sass/lightbox.sass */
.lb-next {
  right: 0;
  float: right;
  background: url(img/next.png) right 48% no-repeat;
}

/* line 96, ../sass/lightbox.sass */
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 103, ../sass/lightbox.sass */
.lb-data {
  padding: 0 4px;
  color: #bbbbbb;
}
/* line 106, ../sass/lightbox.sass */
.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
/* line 111, ../sass/lightbox.sass */
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}
/* line 115, ../sass/lightbox.sass */
.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}
/* line 121, ../sass/lightbox.sass */
.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(img/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
/* line 130, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

Safe the file.

Replace the contents of wp-content/easy-photo-album/css/lightbox.min.css with:

body:after{content:url(img/close.png) url(img/loading.gif) url(img/prev.png) url(img/next.png);display:none;}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:black;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity:.8;display:none;}.lightbox{position:absolute;left:0;width:100%;z-index:10000;text-align:center;line-height:0;font-weight:normal;}.lightbox .lb-image{display:block;height:auto;max-width:none;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;}.lightbox a img{border:none;}.lb-outerContainer{position:relative;background-color:white;*zoom:1;width:250px;height:250px;margin:0 auto;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;}.lb-outerContainer:after{content:"";display:table;clear:both;}.lb-container{padding:4px;}.lb-loader{position:absolute;top:43%;left:0;height:25%;width:100%;text-align:center;line-height:0;}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(img/loading.gif) no-repeat;}.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;}.lb-container>.nav{left:0;}.lb-nav a{outline:none;}.lb-prev,.lb-next{width:49%;height:100%;cursor:pointer;display:block !important;}.lb-prev{left:0;float:left;background:url(img/prev.png) left 48% no-repeat;}.lb-next{right:0;float:right;background:url(img/next.png) right 48% no-repeat;}.lb-dataContainer{margin:0 auto;padding-top:5px;*zoom:1;width:100%;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;}.lb-dataContainer:after{content:"";display:table;clear:both;}.lb-data{padding:0 4px;color:#bbb;}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em;}.lb-data .lb-caption{font-size:13px;font-weight:bold;line-height:1em;}.lb-data .lb<em>-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999;}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(img/close.png) top right no-repeat;text-align:right;outline:none;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);opacity:.7;}.lb-data .lb-close:hover{cursor:pointer;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;}

Though I don’t really understand why you wan’t to disable the auto hiding of the arrows.

Note: The changes you have made now are not supported by the development of Easy Photo Album, so with the next release, your changes will be lost. You can of course apply them again, but it may cause an unstable plugin.

Oh, you are talking about an included album. That is a slightly difference. I have updated the plugin (the development version only, so you have to download it here), by adding two filers: epa_album_content_before and epa_album_content_after.

Now open your theme functions file, functions.php and add the next lines of code:

function my_custom_epa_album_content_before($html) {
    $html .= '<div class="epa-album-container">';
    return $html;
}
add_filter('epa_album_content_before', 'my_custom_epa_album_content_before', 10, 1);

function my_custom_epa_album_content_after($html, $excerpt = false) {
    // The argument $excerpt is true when the album is displayed in an excerpt.
    $html .= '</div>';
    return $html;
}
add_filter('epa_album_content_after', 'my_custom_epa_album_content_after', 10, 2);

You can/should change the names of the functions (not my_custom_….) and you can edit the class and the tag.

NOTE: The development version of Easy Photo Album is tested, but not always stable.

I was just thinking about adding descriptions to albums, but I don’t really know how. So a question for you:

How would you like to see a description for an album?

My suggestion: Display the description above an album, if single (this can now be done with the shortcode, by inserting an album into a post. But that is not the easy way ?? )

When you have a well build and well designed theme, the container of a photo album (even when it shows excerpts) should have the class easy-photo-album.

For example the output of an album on the blogpage (this is an excerpt view):

<div id="post-313" class="post-313 easy-photo-album type-easy-photo-album status-publish hentry">

				<div class="postmetadata">
					<span class="meta-date"><a href="https://wordpress.dev/albums/a-nice-photo-album/" title="A nice photo album" rel="bookmark">
						<span class="month">okt</span>
						<span class="day">27</span>
						<span class="year">2013</span>
					</a></span>

					<span class="meta-author"><span>by admin</span></span>

					<span class="editlink"><a class="post-edit-link" href="https://wordpress.dev/wp-admin/post.php?post=313&action=edit">Edit</a></span>				</div>

				<div class="post-contents">
										<h3 class="entry-title">
					<a href="https://wordpress.dev/albums/a-nice-photo-album/" title="A nice photo album" rel="bookmark">A nice photo album</a>
					</h3>
										<div class="post-content">
					<!-- Easy Photo Album -->
<style type="text/css">
	#epa-album-313 .epa-image {
		width: 23%;
	}
</style><ul id="epa-album-313" class="epa-album epa-cf">
<li class="epa-row  epa-cf">
				<div class="epa-image"><a href="https://wordpress.dev/wp-content/uploads/2011/07/img_07671.jpg" data-lightbox="epa-album-313" title="Rock in sea"><img src="https://wordpress.dev/wp-content/uploads/2011/07/img_07671-150x150.jpg" alt="Huatulco Coastline"><br><span class="epa-title wp-caption">Rock in sea</span></a></div><div class="epa-image"><a href="https://wordpress.dev/wp-content/uploads/2011/07/img_07471.jpg" data-lightbox="epa-album-313" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget est fermentum, tempus metus vitae, ultricies nisl. Aenean auctor pellentesque pulvinar. Cras sed blandit ligula. Nulla sagittis fringilla ante eu tempor. Nulla facilisi. Morbi viverra leo est, tempus volutpat enim faucibus eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit."><img src="https://wordpress.dev/wp-content/uploads/2011/07/img_07471-150x150.jpg" alt="Brazil Beach"><br><span class="epa-title wp-caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget est fermentum, tempus metus vitae, ultricies nisl. Aenean auctor pellentesque pulvinar. Cras sed blandit ligula. Nulla sagittis fringilla ante eu tempor. Nulla facilisi. Morbi viverra leo est, tempus volutpat enim faucibus eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></a></div><div class="epa-image"><a href="https://wordpress.dev/wp-content/uploads/2011/07/dsc20050102_192118_511.jpg" data-lightbox="epa-album-313" title="A dark sunset"><img src="https://wordpress.dev/wp-content/uploads/2011/07/dsc20050102_192118_511-150x150.jpg" alt="Wind Farm"><br><span class="epa-title wp-caption">A dark sunset</span></a></div><div class="epa-image"><a href="https://wordpress.dev/wp-content/uploads/2011/07/img_0513-11.jpg" data-lightbox="epa-album-313" title="The coastline of Huatulco"><img src="https://wordpress.dev/wp-content/uploads/2011/07/img_0513-11-150x150.jpg" alt="Huatulco Coastline"><br><span class="epa-title wp-caption">The coastline of Huatulco</span></a></div>
</li></ul><!-- epa more --> <a href="https://wordpress.dev/albums/a-nice-photo-album/#more-313" class="more-link">Meer foto's...</a>
					</div>
				</div>
				<br class="clear">

			</div>

See the first line. There is the class easy-photo-album applied to the main div. Now you can style the whole entry with css (css rule .easy-photo-album) OR you can style only the photo album “block” by applying css to the ul tag (css rule .easy-photo-album ul.epa-image) OR you can style the whole post area, in my case the div tag with class post-content.

I hope it is all clear. If you’ve any questions, don’t hesitate to ask them.

You have to check Photo Albums in the Screen settings “tab” in the upper right corner. When it is checked, you’ll be able to add menu-items for photo albums.

You can see it in this image.