How would you recommend building an image social share invite on x theme?

Support
#1

I am wondering how you would recommend building out an image modal that allows for social sharing and download through xtheme and its available tools.

For example…


Your help is greatly appreciated. Thanks in advance.

#2

Hello @bcoplin,

Thanks for writing in!

You can replicate this using X theme and Cornerstone by utilizing the global blocks, headline element, image element and content area modal element. First, create a section, row and 3 columns. Insert your content area modal in each column. Instead of using an icon for the modal toogle, you will have to use an image instead. And then, go to X > Global Blocks and create each of the contents you want to insert the modal popup. It will need a headline, image, icon and other elements that you want to display in each of the modal content. Once done creating all 3 global blocks, take note of the global block shortcodes. You will need to insert the global block shortcode in each of the content area modal contents.

Hope this makes sense.

#3

That makes sense. Anyway to make the social sharing part a reality?

#4

Hi @bcoplin,

Yes, since we can not drag a Social Share element inside the Content Area Modal, you need to use the Entry Share shortcode.

More details about Entry Share shortcode here.

Cheers!

#5

Ok so the only issue I am having is that the social share buttons share the page and not the image. How do we make it share the image only and not the page?

Also how do I make the download button do a direct download? So once you click it it downloads to your computer or smart phone?

You can see it built out here. https://watermarkoc.com/temp/

#6

Hello @bcoplin,

Please be advised that the Entry Share will share the URL of the page. The limitation of this shortocde is that you cannot define the url or image link that you want to share. You might want to look for alternative 3rd party plugin to share the image instead.

To make the download button do a direct download, please edit your global block and add a custom image-download class to each of the buttons. And then please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

(function($){
  $('.image-download').attr('download', 'image-download');
})(jQuery);

We would love to know if this has worked for you. Thank you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.