From 41dba3ab856de21077b551840fa6851b5f7775d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Sch=C3=A4r?= Date: Mon, 4 Mar 2024 16:36:27 +0100 Subject: [PATCH] Adding Meta Threads icon as well --- .../acf-json/group_5b6c0884eb9b8.json | 29 +++++++ .../acf-json/group_5b6d603e15f2a.json | 27 +++++++ .../themes/les-verts/acf-translate.php | 57 +++++++++++++ .../lib/twig/filters/social_link.php | 5 ++ .../molecules/m-person/m-person.config.yml | 1 + .../molecules/m-person/m-person.hbs | 14 ++-- .../styleguide/src/docs/06-icons.config.yml | 1 + .../src/icons/threads--no-outline.svg | 1 + .../styleguide/src/icons/threads.svg | 1 + .../src/icons_raw/threads--no-outline.svg | 9 +++ .../styleguide/src/icons_raw/threads.svg | 14 ++++ .../templates/atoms/a-social-icon.twig | 2 + .../templates/molecules/m-person.twig | 79 +++++++++++-------- 13 files changed, 201 insertions(+), 39 deletions(-) create mode 100644 wordpress/wp-content/themes/les-verts/styleguide/src/icons/threads--no-outline.svg create mode 100644 wordpress/wp-content/themes/les-verts/styleguide/src/icons/threads.svg create mode 100644 wordpress/wp-content/themes/les-verts/styleguide/src/icons_raw/threads--no-outline.svg create mode 100644 wordpress/wp-content/themes/les-verts/styleguide/src/icons_raw/threads.svg diff --git a/wordpress/wp-content/themes/les-verts/acf-json/group_5b6c0884eb9b8.json b/wordpress/wp-content/themes/les-verts/acf-json/group_5b6c0884eb9b8.json index 3163df3f..accb464f 100644 --- a/wordpress/wp-content/themes/les-verts/acf-json/group_5b6c0884eb9b8.json +++ b/wordpress/wp-content/themes/les-verts/acf-json/group_5b6c0884eb9b8.json @@ -283,6 +283,35 @@ ], "min": "", "max": "1" + }, + "layout_threads000003": { + "key": "layout_threads000003", + "name": "threads", + "label": "Threads", + "display": "block", + "sub_fields": [ + { + "key": "field_threads000004", + "label": "Threads Name", + "name": "threads", + "type": "text", + "instructions": "Use @name", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "placeholder": "", + "prepend": "", + "append": "", + "maxlength": "" + } + ], + "min": "", + "max": "1" } }, "button_label": "Add Contact", diff --git a/wordpress/wp-content/themes/les-verts/acf-json/group_5b6d603e15f2a.json b/wordpress/wp-content/themes/les-verts/acf-json/group_5b6d603e15f2a.json index 09d555e5..87794907 100644 --- a/wordpress/wp-content/themes/les-verts/acf-json/group_5b6d603e15f2a.json +++ b/wordpress/wp-content/themes/les-verts/acf-json/group_5b6d603e15f2a.json @@ -228,6 +228,33 @@ "min": "", "max": "1" }, + "layout_threads0000001": { + "key": "layout_threads0000001", + "name": "threads", + "label": "Threads", + "display": "block", + "sub_fields": [ + { + "key": "field_threads0000002", + "label": "Link to the Threads profile", + "name": "link", + "aria-label": "", + "type": "url", + "instructions": "", + "required": 1, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "placeholder": "" + } + ], + "min": "", + "max": "1" + }, "layout_626bcda0bb4b4": { "key": "layout_626bcda0bb4b4", "name": "linkedin", diff --git a/wordpress/wp-content/themes/les-verts/acf-translate.php b/wordpress/wp-content/themes/les-verts/acf-translate.php index 887b3dc2..c1369805 100644 --- a/wordpress/wp-content/themes/les-verts/acf-translate.php +++ b/wordpress/wp-content/themes/les-verts/acf-translate.php @@ -728,6 +728,33 @@ 'min' => '', 'max' => '1', ), + 'layout_threads0000001' => array( + 'key' => 'layout_threads0000001', + 'name' => 'threads', + 'label' => __( 'Threads', 'lesverts' ), + 'display' => 'block', + 'sub_fields' => array( + array( + 'key' => 'field_threads0000002', + 'label' => __( 'Link to the threads profile', 'lesverts' ), + 'name' => 'link', + 'aria-label' => '', + 'type' => 'url', + 'instructions' => '', + 'required' => 1, + 'conditional_logic' => 0, + 'wrapper' => array( + 'width' => '', + 'class' => '', + 'id' => '', + ), + 'default_value' => '', + 'placeholder' => '', + ), + ), + 'min' => '', + 'max' => '1', + ), 'layout_5b6d680d1c8e3' => array( 'key' => 'layout_5b6d680d1c8e3', 'name' => 'tiktok', @@ -6368,6 +6395,36 @@ 'min' => '', 'max' => '1', ), + 'layout_threads000003' => array( + 'key' => 'layout_threads000003', + 'name' => 'threads', + 'label' => __( 'Threads', 'lesverts' ), + 'display' => 'block', + 'sub_fields' => array( + array( + 'key' => 'field_threads000004', + 'label' => __( 'Threads Name', 'lesverts' ), + 'name' => 'threads', + 'aria-label' => '', + 'type' => 'text', + 'instructions' => __( 'Use @name', 'lesverts' ), + 'required' => 0, + 'conditional_logic' => 0, + 'wrapper' => array( + 'width' => '', + 'class' => '', + 'id' => '', + ), + 'default_value' => '', + 'placeholder' => '', + 'prepend' => '', + 'append' => '', + 'maxlength' => '', + ), + ), + 'min' => '', + 'max' => '1', + ), ), 'button_label' => __( 'Add Contact', 'lesverts' ), 'min' => '', diff --git a/wordpress/wp-content/themes/les-verts/lib/twig/filters/social_link.php b/wordpress/wp-content/themes/les-verts/lib/twig/filters/social_link.php index dd72e87e..7629f51d 100644 --- a/wordpress/wp-content/themes/les-verts/lib/twig/filters/social_link.php +++ b/wordpress/wp-content/themes/les-verts/lib/twig/filters/social_link.php @@ -35,6 +35,11 @@ $base = 'https://www.instagram.com/'; $string = preg_replace( '/^(www)?\.instagram\.com\/?/', '', $string ); $string = str_replace( '@', '', $string ); + } elseif ( 'threads' === $type ) { + $base = 'https://threads.net/'; + $string = preg_replace( '/^(www)?\.threads\.net\/?/', '', $string ); + $string = str_replace( '@', '', $string ); + $string = "@" . $string; } elseif ( 'mastodon' === $type ) { if ( preg_match( '/^@(\S+)@(\S+)$/', $string, $matches ) ) { $base = 'https://' . $matches[2]; diff --git a/wordpress/wp-content/themes/les-verts/styleguide/src/components/molecules/m-person/m-person.config.yml b/wordpress/wp-content/themes/les-verts/styleguide/src/components/molecules/m-person/m-person.config.yml index 5427fb20..860aa0a8 100644 --- a/wordpress/wp-content/themes/les-verts/styleguide/src/components/molecules/m-person/m-person.config.yml +++ b/wordpress/wp-content/themes/les-verts/styleguide/src/components/molecules/m-person/m-person.config.yml @@ -15,6 +15,7 @@ context: website: www.balthasar-glaettli.ch facebook: https://www.facebook.com/wikipedia/ instagram: https://www.instagram.com/nasa/ + threads: https://www.threads.net/@wikipedia tiktok: https://www.tiktok.com/@wikipedia bluesky: https://bsky.app/profile/wikipedia.bsky.social variants: diff --git a/wordpress/wp-content/themes/les-verts/styleguide/src/components/molecules/m-person/m-person.hbs b/wordpress/wp-content/themes/les-verts/styleguide/src/components/molecules/m-person/m-person.hbs index d49d0d65..a2fdf6f3 100644 --- a/wordpress/wp-content/themes/les-verts/styleguide/src/components/molecules/m-person/m-person.hbs +++ b/wordpress/wp-content/themes/les-verts/styleguide/src/components/molecules/m-person/m-person.hbs @@ -15,11 +15,12 @@ {{#if website}}{{website}}{{/if}}
- {{#if facebook}}{{/if}} + {{#if bluesky}}{{/if}} {{#if tiktok}}{{/if}} - {{#if bluesky}}{{/if}} - {{#if twitter}}{{/if}} {{#if instagram}}{{/if}} + {{#if threads}}{{/if}} + {{#if facebook}}{{/if}} + {{#if twitter}}{{/if}}
{{/unless}} @@ -38,11 +39,12 @@ {{#if website}}{{website}}{{/if}}
- {{#if facebook}}{{/if}} - {{#if tiktok}}{{/if}} {{#if bluesky}}{{/if}} - {{#if twitter}}{{/if}} + {{#if tiktok}}{{/if}} {{#if instagram}}{{/if}} + {{#if threads}}{{/if}} + {{#if facebook}}{{/if}} + {{#if twitter}}{{/if}}
{{/if}} diff --git a/wordpress/wp-content/themes/les-verts/styleguide/src/docs/06-icons.config.yml b/wordpress/wp-content/themes/les-verts/styleguide/src/docs/06-icons.config.yml index 6f8dd888..88a14541 100644 --- a/wordpress/wp-content/themes/les-verts/styleguide/src/docs/06-icons.config.yml +++ b/wordpress/wp-content/themes/les-verts/styleguide/src/docs/06-icons.config.yml @@ -23,6 +23,7 @@ context: - twitter - linkedin - instagram + - threads - mail - youtube - mastodon diff --git a/wordpress/wp-content/themes/les-verts/styleguide/src/icons/threads--no-outline.svg b/wordpress/wp-content/themes/les-verts/styleguide/src/icons/threads--no-outline.svg new file mode 100644 index 00000000..e218575c --- /dev/null +++ b/wordpress/wp-content/themes/les-verts/styleguide/src/icons/threads--no-outline.svg @@ -0,0 +1 @@ + diff --git a/wordpress/wp-content/themes/les-verts/styleguide/src/icons/threads.svg b/wordpress/wp-content/themes/les-verts/styleguide/src/icons/threads.svg new file mode 100644 index 00000000..e218575c --- /dev/null +++ b/wordpress/wp-content/themes/les-verts/styleguide/src/icons/threads.svg @@ -0,0 +1 @@ + diff --git a/wordpress/wp-content/themes/les-verts/styleguide/src/icons_raw/threads--no-outline.svg b/wordpress/wp-content/themes/les-verts/styleguide/src/icons_raw/threads--no-outline.svg new file mode 100644 index 00000000..9776fb03 --- /dev/null +++ b/wordpress/wp-content/themes/les-verts/styleguide/src/icons_raw/threads--no-outline.svg @@ -0,0 +1,9 @@ + + + + ico/24px/facebook/green/no-outline + Created with Sketch. + + + + diff --git a/wordpress/wp-content/themes/les-verts/styleguide/src/icons_raw/threads.svg b/wordpress/wp-content/themes/les-verts/styleguide/src/icons_raw/threads.svg new file mode 100644 index 00000000..30ca5a38 --- /dev/null +++ b/wordpress/wp-content/themes/les-verts/styleguide/src/icons_raw/threads.svg @@ -0,0 +1,14 @@ + + + + ico/24px/facebook/green + Created with Sketch. + + + + + + diff --git a/wordpress/wp-content/themes/les-verts/templates/atoms/a-social-icon.twig b/wordpress/wp-content/themes/les-verts/templates/atoms/a-social-icon.twig index 7b646d2a..e9ec5133 100644 --- a/wordpress/wp-content/themes/les-verts/templates/atoms/a-social-icon.twig +++ b/wordpress/wp-content/themes/les-verts/templates/atoms/a-social-icon.twig @@ -8,6 +8,8 @@ {% set link = link|social_link('tiktok') %} {% elseif 'instagram' == type %} {% set link = link|social_link('instagram') %} +{% elseif 'threads' == type %} + {% set link = link|social_link('threads') %} {% elseif 'mastodon' == type %} {% set link = link|social_link('mastodon') %} {% elseif 'tumblr' == type %} diff --git a/wordpress/wp-content/themes/les-verts/templates/molecules/m-person.twig b/wordpress/wp-content/themes/les-verts/templates/molecules/m-person.twig index ae4e69f9..5415d16c 100644 --- a/wordpress/wp-content/themes/les-verts/templates/molecules/m-person.twig +++ b/wordpress/wp-content/themes/les-verts/templates/molecules/m-person.twig @@ -41,18 +41,11 @@
{% for block in contact %} - {% if 'facebook' == block.acf_fc_layout %} - - {% endif %} - {% if 'twitter' == block.acf_fc_layout %} + {% if 'bluesky' == block.acf_fc_layout %} {% endif %} {% if 'tiktok' == block.acf_fc_layout %} @@ -62,13 +55,6 @@ 'title': __('Visit the TikTok profile of %s', constant('THEME_DOMAIN'))|format(person.full_name), } %}
{% endif %} - {% if 'bluesky' == block.acf_fc_layout %} -
{% include 'atoms/a-social-icon.twig' with { - 'link': block.bluesky, - 'type': 'bluesky', - 'title': __('Visit the Bluesky profile of %s', constant('THEME_DOMAIN'))|format(person.full_name), - } %}
- {% endif %} {% if 'instagram' == block.acf_fc_layout %}
{% include 'atoms/a-social-icon.twig' with { 'link': block.insta, @@ -76,6 +62,27 @@ 'title': __('Visit the instagram profile of %s', constant('THEME_DOMAIN'))|format(person.full_name), } %}
{% endif %} + {% if 'threads' == block.acf_fc_layout %} +
{% include 'atoms/a-social-icon.twig' with { + 'link': block.threads, + 'type': 'threads', + 'title': __('Visit the Threads profile of %s', constant('THEME_DOMAIN'))|format(person.full_name), + } %}
+ {% endif %} + {% if 'facebook' == block.acf_fc_layout %} +
{% include 'atoms/a-social-icon.twig' with { + 'link': block.facebook, + 'type': 'facebook', + 'title': __('Visit the facebook page of %s', constant('THEME_DOMAIN'))|format(person.full_name), + } %}
+ {% endif %} + {% if 'twitter' == block.acf_fc_layout %} +
{% include 'atoms/a-social-icon.twig' with { + 'link': block.twitter, + 'type': 'twitter', + 'title': __('Visit the twitter profile of %s', constant('THEME_DOMAIN'))|format(person.full_name), + } %}
+ {% endif %} {% endfor %} {% endif %} @@ -112,16 +119,10 @@
{% for block in contact %} - {% if 'facebook' == block.acf_fc_layout %} - - {% endif %} - {% if 'twitter' == block.acf_fc_layout %} + {% if 'bluesky' == block.acf_fc_layout %} {% endif %} {% if 'tiktok' == block.acf_fc_layout %} @@ -130,18 +131,30 @@ 'type': 'tiktok' } %}
{% endif %} - {% if 'bluesky' == block.acf_fc_layout %} -
{% include 'atoms/a-social-icon.twig' with { - 'link': block.bluesky, - 'type': 'bluesky' - } %}
- {% endif %} {% if 'instagram' == block.acf_fc_layout %}
{% include 'atoms/a-social-icon.twig' with { 'link': block.insta, 'type': 'instagram' } %}
{% endif %} + {% if 'threads' == block.acf_fc_layout %} +
{% include 'atoms/a-social-icon.twig' with { + 'link': block.threads, + 'type': 'threads' + } %}
+ {% endif %} + {% if 'facebook' == block.acf_fc_layout %} +
{% include 'atoms/a-social-icon.twig' with { + 'link': block.facebook, + 'type': 'facebook' + } %}
+ {% endif %} + {% if 'twitter' == block.acf_fc_layout %} +
{% include 'atoms/a-social-icon.twig' with { + 'link': block.twitter, + 'type': 'twitter' + } %}
+ {% endif %} {% endfor %} {% endif %}