Hi @m_c_c,

I will try to answer your questions.

1) Adding content. There is no need to insert inline images in the Photoblog collections because all the attached images defined as "Teaser" or "Read more" will be displayed in a gallery style.

2) Inline Image Placement. Actually the not resized inline images could be an issue, so let's report it and see if the developers consider it a bug and fix it. However, as I said above, if you just need an images gallery, you might not insert inline images in the posts.

3) Captions. Yes, you just need to add a caption to the files and they will be displayed below each thumbnail and also below the larger images in the modal window (the one that appears when you click on a thumbnail). Please check this page for more information: http://b2evolution.net/man/file-properties

4) Colorbox. I know that one of the colorbox templates put the navigation buttons at the middle of the picture, but I'm not sure about how to change the default template, or at least not right now. Let me look for a safe way to do it without hacking the core.

Regards!

Thanks, @mgsolipa.

The info about adding captions is particularly helpful. The only issue with inline placement is that I was considering using the Photoblog skin on another blog on the site, but would want to use the inline setting for formatting. But I only considering that and working with the modified evo-press skin that I am using is fine.

Can't say again how easy and effective the Photo Albums skin is!

Thanks again -

Mark

Hello -

I know you like to keep a well organized forum, so I hope this question belongs here and not a new thread.

I would like to know where to paste the code from my addthis account so the sharing options appear on individual photos. There is an area under each photo where visitors can flag a photo as spam, thumbs up, thumbs down. That is where I would like the addthis code to be displayed. I've searched around, your site, and tried different locations of pasting the code, but to no avail. Assistance with this would be much appreciated.

Hello @billwill,

This can be perfectly a new post.

There is a ShareThis plugin available (http://plugins.b2evolution.net/sharethis_plugin) but it inserts the share panel into the single post page, but not into the modal window (where the vote buttons are). So, in order to actually achieve this you should add some code, but first, please tell us which b2evolution version are you currently running and also which skin is set in the blog that you want to modify.

Thanks.

Hello @mgsolipa

Thanks for the reply. I wanted to upgrade to the current version before I replied to you, so now I'm using version 5.2.2 stable, released 2/21/15. I am using the Photo Albums skin.

Glad to know this can be done. AddThis supplies a snippet, so finding out where to paste it is great. I'd prefer to continue using my AddThis account, since I've had it for so long, but if it isn't possible, I guess I can create a ShareThis account.

Thanks again.

@billwill as I told you before, there are a couple of lines that you need to add to your site in order to make it work. This suggestions imply a core hack, which is not recomended in regular situations. Actually I made a feature request in order to avoid it, so if it's accepted, this can be integrated into a plugin as it should.

Step 1 - Go to file conf/_advanced.php - line: ~822. Replace this:

//'#touchswipe#' => array( '//cdn.jsdelivr.net/jquery.touchswipe/1.6.5/jquery.touchSwipe.min.js', '//cdn.jsdelivr.net/jquery.touchswipe/1.6.5/jquery.touchSwipe.js' ),
		//'#mediaelement#' => array( '//cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/js/mediaelement-and-player.min.js', '//cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/js/mediaelement-and-player.js' ),
		//'#mediaelement_css#' => array( '//cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/css/mediaelementplayer.min.css', '//cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/css/mediaelementplayer.css' ),
	);

with this:

//'#touchswipe#' => array( '//cdn.jsdelivr.net/jquery.touchswipe/1.6.5/jquery.touchSwipe.min.js', '//cdn.jsdelivr.net/jquery.touchswipe/1.6.5/jquery.touchSwipe.js' ),
		//'#mediaelement#' => array( '//cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/js/mediaelement-and-player.min.js', '//cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/js/mediaelement-and-player.js' ),
		//'#mediaelement_css#' => array( '//cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/css/mediaelementplayer.min.css', '//cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/css/mediaelementplayer.css' ),
		'#addthis#' => array('//s7.addthis.com/js/300/addthis_widget.js'),
	);

### Step 2 - Go to file inc/_core/_template.funcs.php - line ~1096. Replace this:

add_js_headline( 'var b2evo_colorbox_params = {
						maxWidth: "95%",
						maxHeight: "90%",
						slideshow: true,
						slideshowAuto: false'.
						$colorbox_params.'
					}' );

with this:

add_js_headline( 'var b2evo_colorbox_params = {
						maxWidth: "95%",
						maxHeight: "90%",
						slideshow: true,
						slideshowAuto: false,
						onOpen:function(){ openCallBack("YOUR ID CODE") }'.
						$colorbox_params.'
					}' );

Note: replace the "YOUR ID CODE" with your real AddThis id.

Step 3 - Go to file skins/photoalbums/_skin.class.php and add this almost at the end of the file

		require_css('socialmodal.css', 'relative');
		require_js( '#addthis#', 'rsc_url', true );
		require_js( 'addthis_colorbox.js', 'relative', true );

just after this:

			add_headline( $custom_css );
		}

Step 4 - take the attached file and uncompress it in the same skin directoy where _skin.class.php is*

*see comments below, you will find an update of the attached file in the comment made on Apr, 03 2015 (http://forums.b2evolution.net/photo-albums-skin-questions#c104016).

@billwill the result will be as is shown in the image above.

Note: I strongly recommend you to make a backup of the files that will be touched.

Regards !

@mgsolipa -

Thank you for your clear and complete instructions. I made the changes you outlined, and it appears great and nearly performs as I was hoping. The only hitch is, when sharing, it shares the album the photo is in, not the individual photo itself.

Have I missed something, or does more need to be added to share the specific photo being viewed and have the thumbnail be displayed in the share?

Thanks again,
bw

Hello?

Still wondering about this. Its the last piece of this puzzle.

Thanks,
bw

@billwill : in this skin, each post is a photo album with multiple photos on a single HTML page and what you share is the URL of that post/page.

If you'd like to share specific photos, it would be better to have only one photo per post/page. Of course, that would look a bit stupid with the photo albums skin, BUT it would look just fine with the "photo blog" skin. This one is designed for one photo per post.

Hope this helps :)

@fplanque -

Thank you. I'll give it a try and let you know how it goes.
bw

@fplanque

Ok. That didn't take long. Seems this is now more of a feature request than a how-to.

I lose too much of what I love about the photo album skin by trying the photo blog. Can't swipe, can't have thumbnails grids, to mention two biggies. On the other hand, most people want to share a specific photo to their social media page, not an entire album, so this one missing piece is a big one, at least for me.

Since I know little about coding, before I file a request, is it even possible for something like this to be coded? To keep the features of the photo album skin and the modifications mgsolipa provided, and somehow have the social share link for a single photo?

Maybe the link could create either a temporary post, temporary html file, or have a dedicated html page that by some URL magic could create a virtual page that social media could access for sharing purposes?

@mgsolipa
I apologize for not making this specific before. I assumed (yes, I know) since the sharing link would be on an individual photo, it would share that individual photo.

Any hope for a solution here? I agree with Bill that most people prefer sharing an individual photo instead of an entire album, and like fplanque says, it would look stupid with the skin you guys are talking about. The photo blog skin doesn't have the features of photo album, so it seems at least for me, adding the photoshare somehow to the photoalbum skin would be ideal.

Please consider it! This one last step would make this skin the best option out there, including scripts designed to be albums.

thanks for your time and attention.

@billwill @hackysack what you're asking for might be possible but it's not easy.

We'll consider it for sure. But I fear this is going to take us too far astray of the current critical development path to be delivered promptly.

In the meantime it may be faster to pimp up the photoblog skin (which is on the todo list anyways).

Note: it's already possible to have thumbnails on the photoblog skin. Just add a "Media index" Menu link into the Menu widget.

Can you guys share the URLs of your sites so we really understand what you're up to?

Also maximum details about what's missing/uncool from the photoblog skin would help ;)

In addition to what @fplanque said above, I was already working in something that may be useful right now. I just didn't share it before because it didn't work as I wanted, but now it does.

Having an individual page for each image will be difficult indeed, so as a workaround, we can indentify the image by its link ID, add it to the URL and open the modal window accordingly.

Sample URL: http://example.com/blog4.php/bus-stop-ahead#link_6-open

The first part of that sample is the post's URL (which was being shared by all the images in the former wrong implementation). Now, by adding the hash (#link_6-open), we can get a unique URL for each image and open them in a modal after loading the album. You guys must be warned, this is just a cosmetic addition, so it won't be as powerful as a fully developed feature, but it may meet your current needs. Please give it a try and let me know what do you think.

Just remember, we are defining a URL to a link ( which is the relation between the post and the image ), instead of to the image's URL, which is different and not related with the album/post ( you can see it cliking on the "Open in a new window" link included in the modal, just below the image ). This is the appropiate way, because this is how "Like", "Don't like", "Inappropriate" and "Spam" voting system works. You don't vote for a single image file, you vote for the link ( image + post ), so it makes sense to keep this behaviour when we want to share an image from an album.

You just need to follow the same steps I wrote above (http://forums.b2evolution.net/photo-albums-skin-questions#c103857). Please be careful, because I updated Step 3. The file mentioned there in Step 4 is attached to this comment.

I also made a little video where you can see this in action, please check it here: http://b2evostuff.mgsolipa.com/share-images-from-a-photoalbum (sorry for a personal blog link, I can't share youtube links here).

Regards!

• photoalbums2.zip (1008 B.)

An "interesting" read about AddThis:

https://nakedsecurity.sophos.com/2014/12/01/browser-fingerprints-the-invisible-cookies-you-cant-delete/

Thanks for sharing @achillis. Personally I'm not particularly too paranoid with this subject, maybe in the future we will have regulations regarding browser fingerpint tracking techniques, as we already have with cookies... but it's sure that new techiniques will appear after that :S.

I think that in addition to the existing sharing plugins, we should make one of our own that doesn't load any external javascript.

googling "social share buttons without javascript" will make this easy ;)

then we might add our own little to keep the thing visible on the screen... or maybe even do it with pure CSS.

Does it make sense?