Intro

Grab that Element (GTE) module produced images from web pages grabbing DOM elements and save them locally as image.
It comes very handy when you want to give users a nice piece of your webpages to be shared via Social. Works great on Instagram.

Scope

We noticed users often need to get screenshot of part of the web pages.
We believe that implementing a GTE button at the edge of interesting elements, we will produce a better experience for users when it's about taking screenshots of a specific piece from pages of yours.

Requirements

At the current stage, this feature is provided by the html2canvas library.

A deeper understanding of the library will be useful, expecualy about supported features https://html2canvas.hertzen.com/features/

Install

composer require 'drupal/gte:^1.0'
Download the library from https://html2canvas.hertzen.com/ so that there's a https://YOURSITE/libraries/html2canvas/html2canvas.min.js file
drush en gte --uri=https://YOURSITE

Usage

The GTE module is currently in a pretty raw stage. In order to have the button in place, manual actions with the theme code is required.

In MYTHEME.theme preprocess function create your twig variable by the gte_add_download_click() function.

Example =

$variables['my_gte_button']['#markup'] = gte_add_download_click($settings = Array("element" => "article-".$variables['node']->id()));

drush cr
use that variable inside templates. Example = in
node.html.twig you have the {{ my_gte_button }} variable working

Similar projects :

Grab that Element (GTE)

Issues