»
Grav

Grav – Подключаем AddToAny для каждого поста в сетке постов блога

Вступление

Скажу честно реализовать шаринг постов из перечня постов блога не такая уж и серьезная задача для CMS WordPress но для Grav как обычно выяснилось что готового решения попросту нет. По этому придуманный велосипед (по другому не назову) пришлось мастерить самому. Теперь по порядку, и по подробнее.

AddToAny и переделка их стокового варианта для TWIG шаблона

И так AddToAny предлагает нам весьма удобное решение с которым можно ознакомиться здесь:

https://www.addtoany.com/buttons/customize/page_url_title

Ниже стоковый код от AddToAny:

<div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="http://www.example.com/page.html" data-a2a-title="Example Page Title"> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_google_plus"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </div> <script async src="https://static.addtoany.com/menu/page.js"></script>

Как видно из кода необходимо чтобы атрибут data-a2a-url имел ссылку той страницы которую расшариваем. А атрибут data-a2a-title имел тайтл страницы которую шарим. Единственное чего здесь явно не хватает это картинки расшариваемоой страницы, это можно исправить добавлением атрибута data-img-url c прямым линком на картинку.

TWIG шаблон AddToAny

Наигравшись кодом мне удалось создать вот такой шаблон вывода, для каждого items’a сетки:

{% if truncate %} {% if page.header.link %} {% if page.header.continue_link is not same as(false) %} {% endif %} {{ page.title }} {% else %} {{ page.title }} {% endif %} {% else %} {% endif %}

Напомню что все это дело выглядит не много загадочно так как речь идет о выводе при помощи TWIG.

Как видим в коде у нас есть кнопка которая имеет нужные нам атрибуты, но как же красота? Все верно, для красоты нам необходимо попап окно в котором собственно и будут отображаться картинка, название и красивые кнопки для шары страницы.

Узнать подробнее о плагине Focus Popup можно по ссылке ниже:

https://github.com/Elkfox/Focus

Пример работы с попап окнами от Focus

https://www.jqueryscript.net/lightbox/Popup-Plugin-jQuery-Focus-js.html

Теперь необходимо создать TWIG шаблон для вывода нашего попапа, ниже то что мне удалось наваять:

<!—–Sosial Linc AddToAny-> <div class="popup overlay AddToAny" id="AddToAnyPopup"> <div class="popup-inner"> <div class="popup-content left"> <div id="SDStudio_popup_content"> <div class="h3 SDStudio_PopUp_Post_Title">Зашарить:</div> <div class="h4 SDStudio_PopUp_Post_Name"></div> <img src="/user/pages/01.home/Loader_255×350.gif"class="SDStudio_PopUp_Post_IMG"></div> <!–- ADDTOANY START-> <div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="#l" data-a2a-title="Example Page Title"> <a class="a2a_button_viber"></a> <a class="a2a_button_skype"></a> <a class="a2a_button_telegram"></a> <a class="a2a_button_facebook"></a> <a class="a2a_button_facebook_messenger"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_google_plus"></a> <a class="a2a_button_google_gmail"></a> <a class="a2a_button_google_bookmarks"></a> <a class="a2a_button_email"></a> <a class="a2a_button_whatsapp"></a> <a class="a2a_button_copy_link"></a> <a class="a2a_button_evernote"></a> <a class="a2a_button_sms"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </div> <script async src="https://static.addtoany.com/menu/page.js"></script> <!–- ADDTOANY END-> <div> <a class="popup-close" data-close aria-label="common.close">X</a> </div> </div> </div> <div class="My_Overlay"></div>

Не забываем подключить js и css Focus Popup’a

Естественно чтобы все это дело заработало нужно было намудрить JS’a, о чем речь пойдет ниже.

В общем выкладываю как получилось, естественно что Вам нужно будет переработать даный код под свои нужды, и свою разметку.

// ------------------------------------------------ // AddToAny - Шарим айтомсы сетки и не только // ------------------------------------------------ // AddToAny - Вешаемобработку шары на всех страницах, на кнопку в меню // AddToAny - Вешаемобработку шары на всех страницах, на кнопку в меню jQuery(document).ready(function($){ $(document).ready(function () { /*Центрирование элемента - ФУНКЦИЯ*/ jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px"); this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px"); return this; }; var SDStudio_UrlPageShare = window.location.href; if (location.href.match('/')) { var SDStudio_TitlePageShare = $('title').text(); var SDStudio_ImagePageShare = $('[property="og:image"]').attr('content'); } else { var SDStudio_TitlePageShare = $('h1.SDStudio_Page_Title_in_Head').text(); var SDStudio_ImagePageShare = $('div#SDStudio_Img_Meta img#SDStudio_left_img').attr('src'); // var SDStudio_ImagePageShare = $('div#SDStudio_Head_image_background img#SDStudio_left_img').attr('src'); } $('a[aria-label="Social Shared"]').addClass('Popup-load').attr('data-target', '#AddToAnyPopup').attr('data-this-share-url', SDStudio_UrlPageShare).attr('data-img-url',SDStudio_ImagePageShare).attr('title',SDStudio_TitlePageShare); $('a[aria-label="Social Shared"], div#SDStudio_Head_image_background i.fa.fa-share-alt-square').click(function(){ // Показываем кнопку других шар $('a.a2a_dd').css('display',''); // Теперь ищем и заменям значения для нашей шары из айтомса поста $('div#AddToAnyPopup').find('div.a2a_kit').attr('data-a2a-url',SDStudio_UrlPageShare); $('div#AddToAnyPopup').find('div.a2a_kit').attr('data-a2a-title',SDStudio_TitlePageShare); $('.h4.SDStudio_PopUp_Post_Name').text(SDStudio_TitlePageShare); $('img.SDStudio_PopUp_Post_IMG').attr('src',SDStudio_ImagePageShare).css('max-width','100%'); var myPopup = new Focus('#AddToAnyPopup'); // Применяем центрирование для попап окна $('.popup-content.left').center(); // Показываем попап окно myPopup.show(); }); // -------------------------- // Для шары в меню на странице + под главной картинкой + меню в футере $('#social-1991-particle > div > a.Popup-load, #SDStudio_Meta_Block > div.SDStudio_metablog_blog_bosts > span > a, #social-4842-particle > div > a.Popup-load').click(function(){ // И нчинаем переназначать переменки var SDStudio_TitlePageShare = $('h1.SDStudio_Page_Title_in_Head').text(); var SDStudio_ImagePageShare = $('div#SDStudio_Head_image_background').attr('data-lazybgimage'); // Показываем кнопку других шар $('a.a2a_dd').css('display',''); // Теперь ищем и заменям значения для нашей шары из айтомса поста $('div#AddToAnyPopup').find('div.a2a_kit').attr('data-a2a-url',SDStudio_UrlPageShare); $('div#AddToAnyPopup').find('div.a2a_kit').attr('data-a2a-title',SDStudio_TitlePageShare); $('.h4.SDStudio_PopUp_Post_Name').text(SDStudio_TitlePageShare); $('img.SDStudio_PopUp_Post_IMG').attr('src',SDStudio_ImagePageShare).css('max-width','100%'); var myPopup = new Focus('#AddToAnyPopup'); // Применяем центрирование для попап окна $('.popup-content.left').center(); // Показываем попап окно myPopup.show(); }); // console.log(SDStudio_TitlePageShare); // console.log(SDStudio_ImagePageShare); // console.log(SDStudio_ImagePageShare); }); });

В общих чертах все получилось, надеюсь я ничего не упустил.

Связанные записи
GravGrav - ПлагиныWEB

Редактируем страницы из фронтенда в Grav при помощи ContentTools

GravWEBWordPressВсе для .htaccess

Редирект с www на без www и наоборот при помощи .htaccess (для grav и не только)

GravjQueryWEBWordPress

JavaScript – Как определить, больше ли ширина экрана или аналог @media запросов в CSS

GravWEBWordPress

Gtmetrix.com(http://gtmetrix.com/) – Как сразу загрузить все оптимизированные изображения