From 5012004b680d7a22f9b5771b4359d396cbafc0a0 Mon Sep 17 00:00:00 2001 From: Amaury Carrade Date: Wed, 11 Jul 2018 15:21:49 +0200 Subject: [PATCH] Download options can be configured per-network. - Download options can be configured per-network. Key changed from `downloaded_content` to `download_content` and moved to each network section. - Better explanations regarding Firefox privacy shield and Instagram changing URLs: its for well known social networks only (and others, but not in our context). --- CHANGELOG.md | 8 ++-- README.md | 47 +++++++++++++++------- blueprints.yaml | 82 +++++++++++++++++++++++++++++---------- classes/SSEShortcode.php | 38 +++++++++++------- languages/en.yaml | 9 +++-- languages/fr.yaml | 9 +++-- static-social-embeds.yaml | 45 ++++++++++++++------- 7 files changed, 166 insertions(+), 72 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index afe81e9..bc49e0c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,10 +2,12 @@ ## 11-07-2018 1. [](#new) - * Added [Pleroma](https://pleroma.social) support (using the `toot` shortcode). - + * Added [Pleroma](https://pleroma.social) support (using the same `toot` shortcode as Mastodon). +1. [](#improved) + * Download options can be configured per-network. + * Better explanations regarding Firefox privacy shield and Instagram changing URLs. 1. [](#bugfix) - * Fixed some Mastodon URLs badly parsed. + * Fixed some Mastodon URLs wrongly parsed. # v1.0.1 ## 07-07-2018 diff --git a/README.md b/README.md index f6c2c1a..113f011 100644 --- a/README.md +++ b/README.md @@ -54,34 +54,51 @@ built_in_js: true # the default embeds to work, check this. include_font_awesome_5: true + +# Options for all networks +# +# -- theme -- +# The embed theme: with the default CSS, matches the light & dark +# themes for the related network, except for Instagram (which does not +# have a dark theme), where the dark theme colours are inspired by Twitter. +# +# -- downloaded_content -- # The plugin can download images, videos, and GIFs, to ensure a # complete independence from the social networks, at the cost of -# some disk space. -downloaded_content: - images: true - videos: true - -# Options for Twitter: embed theme (with the default CSS, matches the -# light & dark Twitter themes) and API credentials required to load -# tweets (an explanation on how to create an application is available -# below). +# some disk space. This includes avatars and custom emojis (if any). + + twitter: theme: light + + # Please not that if false, Firefox will block Twitter images from loading by default (for privacy reasons). + download_content: + images: true + videos: true + + # API credentials required to load tweets (an explanation on how to create an application is available below). consumer_key: null consumer_secret: null access_token: null access_token_secret: null -# Options for Mastodon: embed theme (with the default CSS, matches the -# light & dark Mastodon themes). + mastodon: theme: light -# Options for Instagram: embed theme (with the default CSS, the light theme -# matches Instagram, and the dark one was created from the light one and -# some inspiration from Twitter own dark theme). + download_content: + images: true + videos: true + + instagram: theme: light + + # Please not that if false, Firefox will block Instagram images from loading by default (for privacy reasons). + # Please also note that as Instagram's images CDN URLs may expire, you should keep that to true if possible. + download_content: + images: true + videos: true ``` Themes can be `light` or `dark` as for now and for the built-in CSS. If you want to add your own, themes only add a CSS class to the embeds containers: `sse-theme-[thetheme]` (e.g. `sse-theme-light` or `sse-theme-dark`); you can put anything there and reference it on your CSS file. @@ -94,6 +111,8 @@ To use Twitter embeds, you'll need to register an application. This is done in a 2. Then, click the **Keys and access tokens** tab and at the bottom of the page, click **Create my Access Token**. 3. Finally, copy the credentials in the configuration file (or in the admin). +If not configured, you'll see an error if you try to embed a tweet, but other embeds will work fine. + ### Customization If you want to customize the embeds' HTML code, you can override the `partials/static-social-embeds` templates. The template name is the same as the shortcode name (see below), e.g. `toot.html.twig` for Mastodon embeds template. Templates context vary for different social networks; checkout built-in templates or shortcode classes to know which variables you can use. diff --git a/blueprints.yaml b/blueprints.yaml index 55c53ae..1275a38 100644 --- a/blueprints.yaml +++ b/blueprints.yaml @@ -1,5 +1,5 @@ name: Static Social Embeds -version: 1.0.1 +version: 1.1.0 description: | Embeds social status (like tweets, instagram posts, toots, etc.) in articles without using their embed iframe, but rather statically without any dependency to the service. @@ -87,26 +87,6 @@ form: downloaded_content_help: type: spacer text: PLUGIN_SSE.ADMIN.DOWNLOADS.HELP_2 - downloaded_content.images: - type: toggle - label: PLUGIN_SSE.ADMIN.DOWNLOADS.IMAGES - highlight: 1 - default: 1 - options: - 1: PLUGIN_ADMIN.YES - 0: PLUGIN_ADMIN.NO - validate: - type: bool - downloaded_content.videos: - type: toggle - label: PLUGIN_SSE.ADMIN.DOWNLOADS.VIDEOS - highlight: 1 - default: 1 - options: - 1: PLUGIN_ADMIN.YES - 0: PLUGIN_ADMIN.NO - validate: - type: bool section_twitter: type: section title: PLUGIN_SSE.ADMIN.TWITTER.TITLE @@ -130,6 +110,26 @@ form: options: light: PLUGIN_SSE.ADMIN.LIGHT dark: PLUGIN_SSE.ADMIN.DARK + twitter.download_content.images: + type: toggle + label: PLUGIN_SSE.ADMIN.DOWNLOADS.IMAGES + highlight: 1 + default: 1 + options: + 1: PLUGIN_ADMIN.YES + 0: PLUGIN_ADMIN.NO + validate: + type: bool + twitter.download_content.videos: + type: toggle + label: PLUGIN_SSE.ADMIN.DOWNLOADS.VIDEOS + highlight: 1 + default: 1 + options: + 1: PLUGIN_ADMIN.YES + 0: PLUGIN_ADMIN.NO + validate: + type: bool twitter_column_2: type: column fields: @@ -169,6 +169,26 @@ form: options: light: PLUGIN_SSE.ADMIN.LIGHT dark: PLUGIN_SSE.ADMIN.DARK + mastodon.download_content.images: + type: toggle + label: PLUGIN_SSE.ADMIN.DOWNLOADS.IMAGES + highlight: 1 + default: 1 + options: + 1: PLUGIN_ADMIN.YES + 0: PLUGIN_ADMIN.NO + validate: + type: bool + mastodon.download_content.videos: + type: toggle + label: PLUGIN_SSE.ADMIN.DOWNLOADS.VIDEOS + highlight: 1 + default: 1 + options: + 1: PLUGIN_ADMIN.YES + 0: PLUGIN_ADMIN.NO + validate: + type: bool section_instagram: type: section title: PLUGIN_SSE.ADMIN.INSTAGRAM.TITLE @@ -186,3 +206,23 @@ form: options: light: PLUGIN_SSE.ADMIN.LIGHT dark: PLUGIN_SSE.ADMIN.DARK + instagram.download_content.images: + type: toggle + label: PLUGIN_SSE.ADMIN.DOWNLOADS.IMAGES + highlight: 1 + default: 1 + options: + 1: PLUGIN_ADMIN.YES + 0: PLUGIN_ADMIN.NO + validate: + type: bool + instagram.download_content.videos: + type: toggle + label: PLUGIN_SSE.ADMIN.DOWNLOADS.VIDEOS + highlight: 1 + default: 1 + options: + 1: PLUGIN_ADMIN.YES + 0: PLUGIN_ADMIN.NO + validate: + type: bool diff --git a/classes/SSEShortcode.php b/classes/SSEShortcode.php index b8ad485..c092da6 100644 --- a/classes/SSEShortcode.php +++ b/classes/SSEShortcode.php @@ -13,20 +13,26 @@ abstract class SSEShortcode extends Shortcode const CACHE_PREFIX = 'sse'; const TEMPLATES_DIRECTORY = 'partials/static-social-embeds/'; + /** + * @var string The shortcode name, as returned by getShortcodeName(). + * @see SSEShortcode::getShortcodeName() + */ + private $shortcode_name; + /** @var string The cache directory for API data */ - protected $cache_dir; + private $cache_dir; /** @var string The cache directory for downloaded images/videos */ - protected $images_dir; + private $images_dir; /** @var string The public path to the cache directory for downloaded images/videos */ - protected $images_path; + private $images_path; /** @var string The temporary directory for downloaded medias */ - protected $tmp_dir; + private $tmp_dir; /** @var FilesystemCache The cache driver for API data */ - protected $cache; + private $cache; /** @@ -36,6 +42,8 @@ public function __construct() { parent::__construct(); + $this->shortcode_name = $this->getShortcodeName(); + /** @var $locator ResourceLocatorInterface */ $locator = $this->grav['locator']; @@ -79,7 +87,7 @@ abstract protected function getData($url); private function getDataCached($url) { /** @var $cache Cache */ - $cache_id = self::CACHE_PREFIX . '-' . $this->getShortcodeName() . '-' . $url; + $cache_id = self::CACHE_PREFIX . '-' . $this->shortcode_name . '-' . $url; if ($this->cache->contains($cache_id)) { @@ -100,14 +108,14 @@ private function getDataCached($url) */ public function init() { - $this->shortcode->getHandlers()->add($this->getShortcodeName(), function(ShortcodeInterface $sc) + $this->shortcode->getHandlers()->add($this->shortcode_name, function(ShortcodeInterface $sc) { $template_context = array_merge($this->getDataCached(trim($sc->getBbCode())), [ 'config' => $this->config->get('plugins.static-social-embeds') ]); return $this->grav['twig']->processTemplate( - self::TEMPLATES_DIRECTORY . $this->getShortcodeName() . '.html.twig', + self::TEMPLATES_DIRECTORY . $this->shortcode_name . '.html.twig', $template_context ); }); @@ -151,29 +159,31 @@ protected function fetchMedia($url, $format = 'auto') // Are we allowed to cache images? - if ($format == 'image' && !$this->config->get('plugins.static-social-embeds.downloaded_content.images')) + if ($format == 'image' && !$this->config->get('plugins.static-social-embeds.' . $this->shortcode_name . '.download_content.images')) { return $url; } // Or videos? - if ($format == 'video' && !$this->config->get('plugins.static-social-embeds.downloaded_content.videos')) + if ($format == 'video' && !$this->config->get('plugins.static-social-embeds.' . $this->shortcode_name . '.download_content.videos')) { return $url; } + $cache_permissions = $this->config->get('system.images.cache_perms', '0755'); + $ch = curl_init(); $tmp_file_path = $this->tmp_dir . '/' . sha1($url) . '.' . $extension; $tmp_dir_name = dirname($tmp_file_path); - if (!is_dir($tmp_dir_name)) mkdir($tmp_dir_name, $this->config->get('system.images.cache_perms', '0755'), true); + if (!is_dir($tmp_dir_name)) mkdir($tmp_dir_name, $cache_permissions, true); $tmp_file = fopen($tmp_file_path, 'w'); curl_setopt_array($ch, [ - CURLOPT_FILE => $tmp_file, + CURLOPT_FILE => $tmp_file, CURLOPT_TIMEOUT => 3600, - CURLOPT_URL => $url + CURLOPT_URL => $url ]); curl_exec($ch); @@ -193,7 +203,7 @@ protected function fetchMedia($url, $format = 'auto') $storage_file_path = '/' . implode('/', $storage_file_path) . '/' . $storage_file_name; $storage_file_dir = dirname($this->images_dir . $storage_file_path); - if (!is_dir($storage_file_dir)) mkdir($storage_file_dir, $this->config->get('system.images.cache_perms', '0755'), true); + if (!is_dir($storage_file_dir)) mkdir($storage_file_dir, $cache_permissions, true); rename($tmp_file_path, $this->images_dir . $storage_file_path); diff --git a/languages/en.yaml b/languages/en.yaml index 7ee2442..820cbed 100644 --- a/languages/en.yaml +++ b/languages/en.yaml @@ -83,8 +83,8 @@ PLUGIN_SSE: avatars).

If this is disabled, Firefox users will not see images by default, as Firefox blocks images and videos loaded - from other domains for privacy reasons. They will have to disable the privacy protection by clicking the shield - in their address bar. + from social network domains for privacy reasons. They will have to disable the privacy protection by clicking the + shield in their address bar. HELP_2: | Embeds data is (always) stored in cache/static-social-embeds/.
You can delete this folder at any time: the content will be re-downloaded on-demand.

@@ -143,7 +143,10 @@ PLUGIN_SSE: Embed Instagram posts in articles using [instagram="instagramPostURL"] with blanks lines before and after.
As posts are retrieved using non-authenticated requests, you cannot embed Instagram posts from private - accounts. + accounts.

+ + Please note that Instagram images CDN URLs may change over time, so to be on the safe side, you should keep + the download options enabled if possible. THEME: LABEL: Instagram theme HELP: The embeds theme. This option is only guaranteed to be followed with the built-in CSS. diff --git a/languages/fr.yaml b/languages/fr.yaml index fd65206..d7ab0e6 100644 --- a/languages/fr.yaml +++ b/languages/fr.yaml @@ -85,8 +85,8 @@ PLUGIN_SSE: par vidéo, et quasiment rien pour les avatars).

En cas de désactivation, les utilisateurs de Firefox ne verront pas les images par défaut, car Firefox - bloque le chargement des contenus depuis d'autres domaines pour des raisons de protection de la vie privée. Iels - devront alors désactiver la protection en cliquant sur le bouclier dans leur barre d'adresse. + bloque le chargement des contenus depuis les domaines des grands réseaux sociaux pour des raisons de protection + de la vie privée. Iels devront alors désactiver la protection en cliquant sur le bouclier dans leur barre d'adresse. HELP_2: | Les données des posts sont (toujours) mises en cache dans le dossier cache/static-social-embeds/.
Vous pouvez supprimer ce dossier quand vous le voulez : les données sont re-téléchargées à la demande.

@@ -136,7 +136,10 @@ PLUGIN_SSE: Intégrez des publications d'Instagram dans vos articles en écrivant [instagram="URL du post Instagram"] entouré de lignes blanches de part et d'autre.
Les posts étant récupérés via une requête non-authentifiée, vous ne pouvez pas inclure des posts Instagram - extraits de comptes privés. + extraits de comptes privés.

+ + Les adresses des images et vidéos d'Instagram pouvant varier avec le temps, nous vous recommandons, afin + d'être tranquille, d'activer le téléchargement des médias. THEME: LABEL: Thème des publications Instagram HELP: Le thème des publications intégrées. Cette option n'est garantie que si le CSS intégré est utilisé. diff --git a/static-social-embeds.yaml b/static-social-embeds.yaml index fadd719..b04751d 100644 --- a/static-social-embeds.yaml +++ b/static-social-embeds.yaml @@ -9,31 +9,48 @@ built_in_js: true # the default embeds to work, check this. include_font_awesome_5: true + +# Options for all networks +# +# -- theme -- +# The embed theme: with the default CSS, matches the light & dark +# themes for the related network, except for Instagram (which does not +# have a dark theme), where the dark theme colours are inspired by Twitter. +# +# -- downloaded_content -- # The plugin can download images, videos, and GIFs, to ensure a # complete independence from the social networks, at the cost of -# some disk space. -downloaded_content: - images: true - videos: true - -# Options for Twitter: embed theme (with the default CSS, matches the -# light & dark Twitter themes) and API credentials required to load -# tweets (an explanation on how to create an application is available -# below). +# some disk space. This includes avatars and custom emojis (if any). + + twitter: theme: light + + # Please not that if false, Firefox will block Twitter images from loading by default (for privacy reasons). + download_content: + images: true + videos: true + + # API credentials required to load tweets. consumer_key: null consumer_secret: null access_token: null access_token_secret: null -# Options for Mastodon: embed theme (with the default CSS, matches the -# light & dark Mastodon themes). + mastodon: theme: light -# Options for Instagram: embed theme (with the default CSS, the light theme -# matches Instagram, and the dark one was created from the light one and -# some inspiration from Twitter own dark theme). + download_content: + images: true + videos: true + + instagram: theme: light + + # Please not that if false, Firefox will block Instagram images from loading by default (for privacy reasons). + # Please also note that as Instagram's images CDN URLs may expire, you should keep that to true if possible. + download_content: + images: true + videos: true