Ok, I don't know what's going on here. I did not see this on my Dev Server but am seeing it on a live server:

I see a flash of the thumbnail image and then it's replaced with this. The thumbnail image is there if I switch themes from "Frio" to "Vier." I also had to set a coverphoto more than once and refresh my "Photos" multiple times to get it to show the "Banner Photos" album at all.

My add-on does not create the "Banner Photos" album nor does it generate the thumbnails. I believe those are handled by the Photo::uploadBanner() function. Or it's something in how "Frio" generates the Photo albums since "Vier" isn't doing this. I don't know. I can't reproduce this on my Dev Server.

Edit: I've been able to reproduce it on my Dev Server. Am investigating cause...

Awesome! This is something I have really anticipated!

Am not sure whether I'll get around to testing it on my instance though. Am not sure how involved that is? But will definitely use it once it has been tested

Ugh! And yet *another* problem I just discovered with the Photo gallery modal. If the image you select has a caption stored it will fail to get the URL properly. I need to fix the JS code that extracts the image URL. That never occurred to me because on my Dev Server I never enter captions for the images I upload. But I do on a live server and it just bit me.

Stay tuned for an update soon. I want to see if I can fix another issue with the modal image browser before I push an update.

I never noticed this before but apparently you never could navigate to sub-albums in the Photo Browser modal in Vier? I just tried it on 3 different servers. The problem is the links go to "#" (nowhere) instead of the sub-albums. If they're supposed to have JS listeners attached to them they don't.

Anyway, that's a separate problem that has nothing to do with my Add-on.

Edit: found the problem, have submitted a PR for that fix too. Here's my fixed file if you want to patch your server now, it goes in /view/js/module/media/.:
github.com/randompenguin1/frie…

UPDATE TO VERSION 1.1

DOWNLOAD HERE: gitlab.com/randompenguin/cover…

Thanks to all the great feedback here I've already got some fixes in place:

• Improved client-side JS error handling
• Normalized the script to all be in jQuery (instead of a mix of vanilla JS and jQuery)
• Added handling for image URL data from Frio version of browser.js script.
• Fixed the regex that extracts the image URL in other themes so it now handles a caption having been set on the image.
• Preview now shows the image you just selected from Photo Browser modal.

Some of the other issues can only be fixed in Friendica itself. I've already submitted these as PRs and some are already merged into the dev branch, but Admins can also go grab these scripts and manually replace the files on their server to get the fixes right now:

1. /view/js/module/media/browser.js fixes the inability to navigate to albums in the photo browser modal in themes other than Frio. It also makes the script data returned from selecting an image consistent between Frio and non-Frio themes, which in turn reduces potential errors in Cover Photo retrieving the selected image URL.

2. /view/theme/frio/frameworks/justifiedGallery/jquery.justifiedGallery.min.js fixes the missing Cover Photo thumbnail images on the Photo pages when using the Frio theme.

@Random Penguin
Thank you very much for this add-on. It's love at first sight :)

A note: if a remote profile is called up, the banner sticks directly to the first post. I created a little space with this code in line 68.

$html = $cover_photo = '<span class="coverphoto" style="display:block;width:100%;margin:0 auto;margin-bottom:10px;"><img src="'.$profile['header'].'" style="width:100%;max-width:100%;"/></span>' . $edit_button . $html;

Perhaps this will be of interest to you.

I guess the seamlessness of it didn't bother me, but I can see how it makes the image look like it's part of that first post.

Rather than always adding a 10px margin I made it add it only on other people's profiles, because on your own there will be the edit button - and exactly how much space there is (if any) between that button and the image depends on what theme you are using and how it styles that button type.

So that section now looks like this:

if ($owner == $uid && !preg_match($regex,$_REQUEST['pagename']) ) { // person is looking at their own profile
	$margin = "0 auto";
	$edit_button = '<a href="'.DI::baseUrl().'/settings/addons/coverphoto" class="btn settings-submit btn-sm" style="margin-bottom: 5px;"><i class="fa fa-camera" aria-hidden="true"></i> '.DI::l10n()->t('Change Cover Photo').'</a>';
} else {
	margin = "0 auto 10px auto";
	$edit_button = '';
}
// build coverphoto code
$html .= $cover_photo = '<span class="coverphoto" style="display:block;width:100%;margin:'.$margin.';"><img src="'.$profile['header'].'" style="width:100%;max-width:100%;"/></span>' . $edit_button . $html;

You may also notice it is now $html .= instead of just $html = in case there are any other add-ons or functions that hook into page_content_top. Otherwise the coverphoto add-on would overwrite them.