Картинки-спойлеры

Create issue
Issue #8 resolved
Ферапонт Соусов repo owner created an issue

Приделать возможность скрывать картинки-спойлеры.

  1. Замена уменьшенной копии изображения в нити на соответствующую картинку-заглушку. (Предусмотреть показ заглушки и в каталоге, если ОП-пост)
  2. Соответствующая галочка в форме постинга.
  3. Должно использоваться только на тех досках, где специально указано.
  4. Опционально: возможность задать для разных досок разные заглушки.

Учитывайте, что некоторая работа по этой задаче была начата ещё до публикации репозитория. Вам необязательно допиливать именно тот код (можете делать с нуля), но в таком случае все неиспользуемые куски кода следует потом убрать.

Настройки по включению функции на определённых досках можно реализовать через конфиг, но, согласно тикету #9, мы стремимся к переносу специфичных для отдельных досок опций в административную панель (/inc/classes/manage.class.php). Желательно держать это в уме, и если даже делать через конфиг, то подразумевать это как промежуточный вариант с возможностью доработки.

Comments (8)

  1. BusOfDespair

    А что, если вместо настроек изменять изображение-заглушку средствами CSS?

    Добавляется CSS:

    .spoiler-image.imglink::after {
      content : '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      background-image: url(https://bitbucket-assetroot.s3.amazonaws.com/repository/oL9BX96/462528513-spoiler.png?AWSAccessKeyId=AKIAIQWXW6WLXMB5QZAQ&Expires=1570080992&Signature=GyDN3v%2F4%2F%2FpWWQwg%2F%2BkxrsOp0bA%3D);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      width: 100%;
      height: 100%;
      opacity : 1;
      transition: opacity .2s;
    }
    
    .spoiler-image .thumb {
      opacity: 0;
      transition: opacity .2s;
    }
    
    .spoiler-image.img-full .thumb,
    .spoiler-image:hover .thumb {
      opacity: 1;
    }
    
    .spoiler-image.imglink.img-full,
    .spoiler-image.imglink:hover::after {
      opacity: 0;
    }
    

    Контейнеру a.imglink в board-post.class.php добавляется класс “spoiler-image”; В kusaba.js при развороте картинки к a.imglink добавляется класс “img-full”.

    Таким образом картинка-заглушка будет исчезать по наведению на превью, без полного разворота, что удобнее и экономит трафик.

    Не нужно думать, где хранить настройку картинки, не нужно городить интерфейс для ее изменения, в целом реализация становится тривиальной.

    Легко сделать разные заглушки не только индивидуально для доски, но и под каждый стиль, красный автобус например плохо сочетается с темными стилями Burichan и Bluemoon.

    Еще можно обойтись без картинки вовсе, а вместо этого добавить картинке фильтр размытия или пикселяции с надписью “спойлер” поверх:

    .spoiler-image.imglink::after {
      content : '[SPOILER]';
      text-align: center;
      display: block;
      position: absolute;
      font-weight: bold;
      top: 50%;
      left: 0;
      width: 100%;
      opacity : 1;
      transition: opacity .2s;
    }
    

    Система получается и легче в реализации, и намного более гибкой.

  2. Ферапонт Соусов reporter

    Я не понял, от каких настроек это спасает, если всё равно требуется задавать, на каких досках надо включать спойлеры (на всех досках они не нужны). Так-то можно с помощью ЦСС саму заглушку выводить, да. Хотя опять же непонятно, как этот код позволит выводить разные заглушки для разных досок.

    Заглушки, в отличие от фильтроты, лучше вписываются в сложившиеся традиции интерфейсов и при желании позволяют передавать индивидуальность чана.

  3. BusOfDespair

    Действительно, галку на включение спойлера придется добавлять.

    Все равно этот CSS позволяет при желании реализовать и заглушку, и фильтроту, и кроме этого спойлер можно раскрывать при наведении, без полного разворота картинки.

    Индивидуальные картинки для разных досок можно реализовать двумя путями: либо для каждой доски в head добавляется link на свой css-файл, либо в этой строке к body добавляется класс вида “board-b”, “board-a”, а дальше в global.css селекторами вида “.boad-b .image-spoiler” пилится нужный CSS. Последнее наверно предпочтительнее, так как можно пихать этот код не только в globa.css, но и в стили. Кроме того, так можно всяких аккаринов делать специфичными для доски.

  4. Ферапонт Соусов reporter

    Ну. так-то никто не против показа заглушки через ЦСС.

  5. Log in to comment