Установить главное изображение без публикации в теме

Поддержка
21

Я думаю, что обычно имя добавляется в атрибут alt. Когда я загружаю файл, имя обычно добавляется перед размером в markdown, и именно эта часть используется в “alt”.

Таким образом, hide-this-image-vacations-2025.jpg превратится в ![hide-this-image-vacations-2025|500x500](upload://wDxG1UR10Uj4bCO9l3pUbJvBAW5.png)

и может быть скрыто с помощью

.cooked img[alt="hide-this-image-vacations-2025"] {
  display: none;
}
22

Поскольку я не эксперт в CSS, я спросил ChatGPT о вашем варианте и получил этот ответ, так как хочу скрыть изображения, начинающиеся с hide-this-image-, но затем имеющие что-то ещё. Вот что я получил:

Нет, чистый CSS не поддерживает селекторы с подстановочными знаками или «начинается с» для атрибутов alt у изображений.

Селекторы атрибутов CSS поддерживают только:

  • Точное совпадение: [alt="value"]
  • Содержит слово: [alt~="value"]
  • Содержит подстроку: [alt*="value"]
  • Начинается с: [alt^="value"]
  • Заканчивается на: [alt$="value"]

Однако alt^="hide-this-image-" не будет работать надёжно в вашем примере, потому что CSS не может сопоставить атрибут alt тега <img> во всех браузерах при отображении изображения, особенно в системах вроде Discourse, где атрибут alt не обязательно отражается в DOM так, чтобы CSS мог получить к нему доступ.

Обходной путь с помощью CSS (работает только в некоторых средах):

.cooked img[alt^="hide-this-image-"] {
  display: none;
}

Но, опять же, это может работать не стабильно в Discourse из-за того, как изображения отображаются (например, через markdown или JS). В таком случае вам понадобится JavaScript.

Надёжная альтернатива на JavaScript:

document.querySelectorAll('.cooked img[alt^="hide-this-image-"]').forEach(img => {
  img.style.display = 'none';
});

Это будет работать надёжно во всех средах, включая Discourse.

23

Решение от ChatGPT, похоже, работает:

image
image1114×546 58.3 KB

А Facebook Debugger видит его как основное изображение:

image
image741×377 50.1 KB

Компонент с JavaScript:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.onPageChange(() => {
    document
      .querySelectorAll('.cooked img[alt^="featured-image-"]')
      .forEach((img) => {
        const parent = img.closest("div");
        if (parent) {
          parent.style.display = "none";
        } else {
          img.style.display = "none";
        }
      });
  });
});

Я заметил, что оставалось некоторое пространство там, где должно было быть изображение, поэтому я снова обратился к ChatGPT, и он добавил, что нужно скрыть родительский контейнер, который в данном случае — тег <div>.

Теперь всё работает отлично!

24

Спасибо. Добавил в свои заметки.