Добавить текст поверх изображения, ЕСЛИ изображение начинается с указанного c имени? | JS Завершение изображения в классе

Question

У меня есть набор изображений на моем сервере, которые начинаются с определенного имени, так:

"communityphoto_John.jpg"

"communityphoto_Mary.jpg" et c.

Можно ли с помощью PHP отображать текст поверх изображения всякий раз, когда он находит эти изображения, начинающиеся с "communityphoto_"? например: «Фотография отправлена ​​сообществом, отправьте свою на нашу электронную почту»

Я нашел несколько решений, но все они, кажется, запекают текст на изображение (например, создают / сохраняют фактическое изображение с встроенный текст), но я просто хочу sh отобразить текст поверх изображения, так как в будущем оно может измениться, но я не хочу заменять все изображения.

Я заранее извиняюсь что я не могу быть более полезным, я все еще в начале своего PHP приключения и еще не дошел до сих пор. Заранее большое спасибо за внимание и советы

Answer 1

Я думаю, JavaScript и некоторые CSS будут лучшим вариантом для вас в этом случае. В зависимости от того, как загружаются изображения, лучше всего будет проанализировать или отфильтровать их, и в любом случае добавить класс (или немного HTML).

Возьмите, например, следующий фрагмент. Он находит все изображения с communityphoto_ в имени и, если найдет их, проходит через них, оборачивает их в <div> с классом .community-image.

Затем с некоторыми CSS вы Вы можете использовать псевдокласс ::after для размещения произвольного текста на нем, как вам угодно. Вы также можете добавить этот текст как <span> или что-то в JavaScript, если хотите. Также обратите внимание, что вы не можете просто выполнить ::after на img, потому что теги img являются void элементами (или самозакрывающимися), которые не принимают никакого контента ни при каких обстоятельствах, поэтому вот почему я завернул его в элемент, и он применил его там.

var communityImages = document.querySelectorAll('img[src*="communityphoto_"]');
if( communityImages.length > 0 ){
  communityImages.forEach(function(image){
    image.outerHTML = '<div class="community-image">'+ image.outerHTML +'</div>';
  });
}

.community-image {
  display: inline-block;
  position: relative;
}

.community-image:after {
  content: "Photo submitted by the community, submit yours to our email";
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,.2);
  font-size: 11px;
  padding: 3px 6px;
}

<div>
  <img src="https://xhynk.com/placeholder/300/100/communityphoto_1/"/>
  <img src="https://xhynk.com/placeholder/300/100/communityphoto_2/"/>
  <img src="https://xhynk.com/placeholder/300/100/something/" />
  <img src="https://xhynk.com/placeholder/300/100/communityphoto_3/"/>
  <img src="https://xhynk.com/placeholder/300/100/communityphoto_4/"/>
  <img src="https://xhynk.com/placeholder/300/100/another/"/>
</div>