Adding share buttons to every post image


#1

Hi! I’m new to Discourse ! :grin:

  1. I have a question regarding the option to image sharing.
    Let’s say I open a discussion full of images and I want people to share these images. How can this be done?
    I want an image sharer on every single image, can this thing be done?
    What are my options?

  2. I want the post share button to look different and more appealing, is there a way to do it?

Thank you!


#2

Please define ‘share’ for your specific instance. Please describe what ‘share’ means to you for this instance.

Because of that, I do not understand this question:

What is an image sharer?

Please use CSS to style it. If you need to restructure the share button and popup then a plugin would be needed.


#3

Hi,
So this is what I want to do:
post a message with a few images, and I want that on each image there will be a facebook and twitter button so people can share it.

Thanks!!!


#4

Ahh, I see.

The immediate option is to post one image per reply. That way visitors/users can click the share icon (the chain links) and share the individual reply.

If you wish for users to comment on the image, then perhaps you can post one image per topic. The subsequent replies are for that specific image. So when someone comes along and shares the image, they not only get the image but also the discussion about it on the same topic. :smile:


#5

Thank you so much for your reply!

What I want to do Is actually put a Facebook and a Twitter button on top of the image or next to it, without the need of the users to click on that chain, is there such a thing on discourse?


#6

To my knowledge, there is not a feature to add share buttons outside the share modal window. However, I think there is a URL that you can use and link it with facebook and twitter icons next to the image. I am not able to get the definite URL because I’m not terribly intimate with the code that runs Discourse (yet).


#7

Too bad.

Thanks for your help!


(Руслан Корнев) #8

Hi, i’m new in plugin development. But i think this tutorial may be useful.


#9

I think that is an outdated tutorial. Some of the plugin structure has changed since then. The developers are working to extend plugin capabilities and document them for plugin authors.


(Руслан Корнев) #10

Nope, just tested, working as expected. There are also similar plugins like ALL CAPS, Spoiler etc.


#11

Right! I collect all plugins on GitHub via my GitHub starred list.

If it’s a plugin, written well and shows ways to use plugins, I snatch it. :thumbsup:

However, my initial concern still stands because the codebase is constantly changing and that tutorial may or may-not be updated swiftly to compensate. I have no doubt the developers will make the changes as needed but if it does not work for someone in the near-future, that may be why.


(Mittineague) #12

app/assets/javascripts/discourse/templates/topic.hbs has two plugin-outlets

            {{/if}}

            {{plugin-outlet "edit-topic"}}

            {{d-button action="finishedEditingTopic" class="btn-primary btn-small no-text" icon="check"}}
.....
        </div>
        {{plugin-outlet "topic-title"}}
      </div>

that’s where I’d start


(Harsh Agrawal) #13

@Assaf_N
I’m new here but I think this might help.
You can generate JS code from markerly http://www.markerly.com/gtc and add it on your discourse forum (I think there should be a way). This will add sharing buttons to all the images.


(Kane York) #14

Those were added for tagger, I think that one for ads needs to go somewhere different… maybe right below that </div>.


(Mittineague) #15

I hacked in a couple more plugin outlets (I would have named the existing “topic-title” “after-title-wrapper” but meh)

            {{#unless isPrivateMessage}}
              {{topic-category topic=model}}
            {{/unless}}
          {{/if}}
        </div>
        {{plugin-outlet "topic-title"}}
      </div>
        {{plugin-outlet "after-container"}}
    </div>
        {{plugin-outlet "after-topic-title"}}
  {{/if}}

and gave the plugins spans with display inline-block

I agree. the best place would be where I put the “after-container” plugin-outlet


(Mittineague) #16

After looking more, perhaps per post might be more like what you’re after than per topic?

If so, I think the post.hbs might be the file of interest.

Crude, but it hopefully can get you started

I hacked in a plugin outlet.

      <!-- keep the classes here in sync with composer.hbs -->
  <div {{bind-attr class="showUserReplyTab:avoid-tab view.repliesShown::contents :regular view.extraClass"}}>
    <div class='cooked'>
      {{{cooked}}}
	  {{plugin-outlet "in-cooked"}}
    </div>
    {{#if cooked_hidden}}
      <a href {{action "expandHidden" this}}>{{i18n 'post.show_hidden'}}</a>
    {{/if}} 

created a connectors template

{{#if Discourse.SiteSettings.in_post_active}}
	<div class="in-post">
		{{#if cooked}}
			{{{get_img this}}}
		{{/if}}
	</div>
{{/if}}

then created a js.es6 file

Handlebars.registerHelper('get_img', function(property, options) {
	var post = Ember.Handlebars.get(this, property, options),
    cooked = post.get('cooked');
	var output = "";
	if (cooked.indexOf("img") != -1) {
		var expr = /img src="([^"]*)"/gm;
		var matches = cooked.match(expr);
		if (matches) {
			output += '<div class="get-img">Post Image Links ';
			for (var i = 0; i < matches.length; i++) {
				matches[i] = matches[i].replace(/img src="/, '');
				matches[i] = matches[i].replace(/"/, '');
				var file_origin = window.location.origin;
				var ext_expr = /http/;
				if (ext_expr.test(matches[i])) {
					file_origin = "";
				}
				var filename_expr = /([^\/]*)$/gm;
				var filename_match = matches[i].match(filename_expr);
				var filename = "";
				if (filename_match) {
					filename_match[0] = filename_match[0].replace(/\//, '');
					filename_match[0] = filename_match[0].replace(/\?(.)*/, '');
					filename = filename_match[0];
				}
				output += '<br /><a href="'
				+ file_origin + matches[i] 
				+ '">' + filename + '</a>';	
			}
			output += '</div>';
		}
	}
	return output;
});

which looks like