Неверные атрибуты srcset из httrack

Question

Я спайдерил сайт с httracks и генерировал много файлов на разных уровнях. Но сайт использует picture / source теги с srcset атрибуты, которые httrack не обрабатывает, все эти картинки не работают в автономном режиме.

httrack может видеть ссылки, если используется опция Attempt to detect all links (even in unknown tags/javascript code) (в winhttrack) и скопировал все изображения в локальное хранилище. Но это не изменило путь к относительному.

Теперь мне нужен скрипт (powershell/gnu bash), который может редактировать все html-файлы, чтобы адаптировать пути в srcset с правильным относительным путем.

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

что делать:

файлы примеров:

index.html
cat1/product1.html
cat2/option3/product5.html

каждый содержит несколько графических тегов, таких как:

<picture>
     <source srcset="/images/img1_low.jpg, /images/img1_low_ret.jpg x2" media="(max-width: 470px)">
     <source srcset="/images/img1_med.jpg, /images/img1_med_ret.jpg x2" media="(max-width: 960px)">
     <source srcset="/images/img1_hi.jpg, /images/img1_hi_ret.jpg x2" media="(min-width: 961px)">
     <img src="../images/img1_hi.jpg" />
</picture>

внутри тега изображения путь всегда правильно сделан из httrack: (images/img1_hi.jpg, ../images/img1_hi.jpg, ../../images/img1_hi.jpg)

но тег источника также должен содержать соответствующие пути:

в index.html:

<picture>
     <source srcset="images/img1_low.jpg, images/img1_low_ret.jpg x2" media="(max-width: 470px)">
     <source srcset="images/img1_med.jpg, images/img1_med_ret.jpg x2" media="(max-width: 960px)">
     <source srcset="images/img1_hi.jpg, images/img1_hi_ret.jpg x2" media="(min-width: 961px)">
     <img src="images/img1_hi.jpg" />
</picture>

в cat1/product1.html:

<picture>
     <source srcset="../images/img1_low.jpg, ../images/img1_low_ret.jpg x2" media="(max-width: 470px)">
     <source srcset="../images/img1_med.jpg, ../images/img1_med_ret.jpg x2" media="(max-width: 960px)">
     <source srcset="../images/img1_hi.jpg, ../images/img1_hi_ret.jpg x2" media="(min-width: 961px)">
     <img src="../images/img1_hi.jpg" />
</picture>

в cat2/option3/product5.html:

<picture>
     <source srcset="../../images/img1_low.jpg, ../../images/img1_low_ret.jpg x2" media="(max-width: 470px)">
     <source srcset="../../images/img1_med.jpg, ../../images/img1_med_ret.jpg x2" media="(max-width: 960px)">
     <source srcset="../images/img1_hi.jpg, ../../images/img1_hi_ret.jpg x2" media="(min-width: 961px)">
     <img src="../../images/img1_hi.jpg" />
</picture>

моя попытка:

#!/usr/bin/bash

function workfolder {
    # $1 = current folder
    # $2 = prefix upfolders

    pushd $PWD
    cd $1

    for i in $( ls ) ; do
        if [ -d $i ] ; then
            workfolder $i ../$2
        fi
    done

    for i in $( ls *.html ) ; do
        sed -i 's/srcset="images/srcset="$2images/g' $i
        sed -i 's/, images/, $2images/g' $i
    done

    popd

}

workfolder .

помимо слишком большого количества ошибок $2 в седе замена не решена, но заменена на литералы.

Answer 1

#!/usr/bin/bash
function workfolder {
    # $1 = current folder
    # $2 = prefix upfolders

    pushd $PWD > /dev/null
    cd $1
    echo "=====^ $PWD ====="
    for i in $( ls ) ; do
        if [ -d $i ] ; then
            workfolder $i ..\\/$2
        fi
    done
    for i in $( ls *.html ) ; do
        echo " working on: $PWD/$i with $2"
        sed -i 's/srcset="image/srcset="'$2'image/g' $i
        sed -i 's/\,\ image/\,\ '$2'image/g' $i
    done
    popd > /dev/null
    echo "=====v $PWD ====="
}

workfolder .

ловушки являются: использование $2 в команде sed (1-я попытка не была расширена) и правильное экранирование ../ как 2-й параметр в форме, используемой в командах sed

Answer 2

Краткое содержание

Этот метод работает в HTTrack и изменяет файлы на лету. Для этого не требуется сценарий постдействия, как описано в контексте этого вопроса.

Решение

Проблема с HTTrack заключается в том, что в браузерах, поддерживающих , изображения не отображаются. Как говорится в ОП; это происходит из-за того, что браузер пытается загрузить URL-адрес, который HTTrack не преобразовал.

Решение (кредит user2657515) состояло в том, чтобы полностью удалить атрибут, это заставило бы современные браузеры вернуться кsrcатрибут и позволить изображению отображаться так, как задумано.

Для этого я использовал -Vвариант в HTTrack

-V : выполнять системную команду после каждого файла ($0 — это имя файла: -V "rm $0") (--userdef-cmd)

Значение параметра использует команду UNIX для преобразования текста во вновь загруженном файле:

      sed -i 's/srcset="[^"]*"//g' $0

Чтобы запустить HTTrack Cli с этой опцией, вы можете написать команду вида:

      httrack https://website.to.copy.co.uk/ -V "sed -i \'s/srcset="[^"]*"//g\' \$0"

Подводя итог:
каждый раз, когда файл загружается с помощью HTTrack, запускайтеsedкоманда в файле. Еслиsrcsetприсутствует, удалите его.

Answer 3

Установите плагин Code Snippets . Добавьте новый фрагмент со следующим кодом:

      add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );

Нажмите кнопку «Сохранить изменения и активировать». Этот фрагмент удалит тег srcset с вашего сайта. Источник кода