Грабим слайдер на примере.

В этой ветке создаем темы по настройке лент WPGrabber.

Модератор: Admin

Ответить
Аватара пользователя
genic
Новичок
Сообщения: 6
Зарегистрирован: 12 дек 2015, 15:50

Грабим слайдер на примере.

Сообщение genic » 31 авг 2016, 19:07

И снова здравствуйте!

Понадобилось мне значит спарсить новости с сайта 112.ua, а у них в некоторых записях используется слайдер.
На примере такой статьи ТЫК и рассмотрим.

Обычно я выравниваю картинки по центру, и соответственно такого рода записи выглядят не очень

Изображение

Попробуем исправить это дело.

Нам понадобится плагин Nivo Image Slider (репо)
Исходный код слайдера имеет вид

Код: Выделить всё

<div id="gallery-0" class="royalSlider rsDefaultInv">
            <div>
            <img class="rsImg" src="https://img.112.agency/585x351/2016/08/29/255675.jpeg" data-rsBigImg="https://img.112.agency/original/2016/08/29/255675.jpeg"  alt=""
                 itemtype="httpss://schema.org/ImageObject" itemprop="associatedMedia" itemscope="" itemid="https://img.112.agency/original/2016/08/29/255675.jpeg" itemtype="https://schema.org/ImageObject"/>
            <meta itemprop="url" content="https://img.112.agency/original/2016/08/29/255675.jpeg">
            <meta itemprop="width" content="931">
            <meta itemprop="height" content="695">
            <figure class="rsCaption">
                Фото: <a href="https://www.president.gov.ua/administration/apu-info">администрация президента Украины</a>
                </br>            </figure>
            <img width="96" height="55" class="rsTmb" src="https://img.112.agency/231x131/2016/08/29/255675.jpeg">
        </div>
            <div>
            <img class="rsImg" src="https://img.112.agency/585x351/2016/08/29/255676.jpeg" data-rsBigImg="https://img.112.agency/original/2016/08/29/255676.jpeg"  alt=""
                 itemtype="httpss://schema.org/ImageObject" itemprop="associatedMedia" itemscope="" itemid="https://img.112.agency/original/2016/08/29/255676.jpeg" itemtype="https://schema.org/ImageObject"/>
            <meta itemprop="url" content="https://img.112.agency/original/2016/08/29/255676.jpeg">
            <meta itemprop="width" content="800">
            <meta itemprop="height" content="635">
            <figure class="rsCaption">
                Фото: <a href="https://www.president.gov.ua/administration/apu-info">администрация президента Украины</a>
                </br>            </figure>
            <img width="96" height="55" class="rsTmb" src="https://img.112.agency/231x131/2016/08/29/255676.jpeg">
        </div>
            <div>
            <img class="rsImg" src="https://img.112.agency/585x351/2016/08/29/255677.jpeg" data-rsBigImg="https://img.112.agency/original/2016/08/29/255677.jpeg"  alt=""
                 itemtype="httpss://schema.org/ImageObject" itemprop="associatedMedia" itemscope="" itemid="https://img.112.agency/original/2016/08/29/255677.jpeg" itemtype="https://schema.org/ImageObject"/>
            <meta itemprop="url" content="https://img.112.agency/original/2016/08/29/255677.jpeg">
            <meta itemprop="width" content="800">
            <meta itemprop="height" content="581">
            <figure class="rsCaption">
                Фото: <a href="https://www.president.gov.ua/administration/apu-info">администрация президента Украины</a>
                </br>            </figure>
            <img width="96" height="55" class="rsTmb" src="https://img.112.agency/231x131/2016/08/29/255677.jpeg">
        </div>
            <div>
            <img class="rsImg" src="https://img.112.agency/585x351/2016/08/29/255678.jpeg" data-rsBigImg="https://img.112.agency/original/2016/08/29/255678.jpeg"  alt=""
                 itemtype="httpss://schema.org/ImageObject" itemprop="associatedMedia" itemscope="" itemid="https://img.112.agency/original/2016/08/29/255678.jpeg" itemtype="https://schema.org/ImageObject"/>
            <meta itemprop="url" content="https://img.112.agency/original/2016/08/29/255678.jpeg">
            <meta itemprop="width" content="800">
            <meta itemprop="height" content="623">
            <figure class="rsCaption">
                Фото: <a href="https://www.president.gov.ua/administration/apu-info">администрация президента Украины</a>
                </br>            </figure>
            <img width="96" height="55" class="rsTmb" src="https://img.112.agency/231x131/2016/08/29/255678.jpeg">
        </div>
    </div>
<div class="clear"></div>
(я специально зацепил со страницы блок <div class="clear"></div> (который к слайдеру отношения не имеет), но к нему мы привяжемся делая шаблон обработки).

Итак.
Сначала сделаем шаблон обработки для контейнера <div id="gallery-0" class="royalSlider rsDefaultInv">

Шаблон поиска

Код: Выделить всё

|<div id="gallery[^>]+>(.*?)<div class="clear">|is 
Шаблон замены

Код: Выделить всё

[nivo-slider theme='dark']$1[/nivo-slider]
- атрибут theme – это собственно внешний вид слайдера. Всего их три. Посмотрите описание к слайдеру.

Далее делаем шаблон для обработки картинок

Шаблон поиска

Код: Выделить всё

|<img class="rsImg.*?src="(.*?)".*?>|is
Шаблон замены

Код: Выделить всё

[nivoslides image_link='$1']
Тут я специально взял первую ссылку на картинку, т.к. по этой ссылке картинки ровно обрезаны (585x351). Если взять за основу ссылки на оригинальные картинки, то слайдер у нас будет менять высоту при смене слайда. Поэкспериментируйте чтобы понять о чем это я.

После всего вышеописанного, мы имеем такой вид слайдера у себя на сайте

Изображение

Минус в том, что так как у нас картинки вставляются не тегом <img, а шорткодом плагина, то при отсутствии других картинок в статье, миниатюру записи мы не получим.

На этом все. Успехов.

P.S. Буду благодарен, если кто нибудь подскажет галерею (на худой конец слайдер) которую сожно было-бы использовать, вставляя в запись картинки в виде

Код: Выделить всё

<div class="">
<img src="картинка" width="" height="" alt=""> 
<img src="картинка" width="" height="" alt=""> 
<img src="картинка" width="" height="" alt=""> 
</div>

Ответить