Menampilkan Gambar pada Komentar

Table of Contents

Cara Menampilkan Gambar pada Komentar Blogger - Banyak blog yang menampilkan markup komentar yang bisa menampilkan blockquote, code, pre, atau image. Akantetapi untuk gambar /image hanya akan tampil URL saja. Pada postingan ini akan menjelasakan bagaimana URL tersebut akan kita tampilkan dalam bentuk gambar.

Format Penulisan

Biasanya format penulisan image untuk komentar adalah <i rel="img">URL_Gambar</i> atau <i rel="image">URL_Gambar</i>.

JavaScript #1

JavaScript ini langsung menampilkan gambar pada komentar. Simpan di atas </body>.

<script>/*<![CDATA[*/
const imgElements = document.querySelectorAll('i[rel="img"],i[rel="image"]');
imgElements.forEach((element) => {
    const imgUrl = element.textContent;
    const imgTag = document.createElement('img');
    imgTag.src = imgUrl;
    element.innerHTML = '';
    element.appendChild(imgTag);
    imgTag.classList.add('cmt-img');
    imgTag.setAttribute('alt', 'gambar');
    imgTag.style.display = 'block';
    imgTag.style.margin = '15px 0';
});
/*]]>*/</script>

Demo

JavaScript #2

Untuk Versi 2 ini, gambar tidak langsung ditampilkan, tapi menggunakan tombol terlebih dahulu.

<script>/*<![CDATA[*/
const imgElements = document.querySelectorAll('i[rel="img"]'); 
imgElements.forEach((element) => {  
	const imgTag = document.createElement('img');  
	const imgUrl = element.textContent;  
	imgTag.src = imgUrl;  
	element.innerHTML = '';  
	element.appendChild(imgTag);  
	imgTag.style.display = 'none';  
	imgTag.setAttribute('alt', 'gambar');
    imgTag.classList.add('cmt-img');  
	const button = document.createElement('button');  
	button.textContent = 'Tampilkan Gambar';  
	button.classList.add('btn-img');  
	element.appendChild(button);  
	button.addEventListener('click', () => {  
		button.remove();  
		imgTag.style.display = 'block'; 
        imgTag.style.margin = '15px 0';
        }); 
	});
/*]]>*/</script>

Demo

Demo bisi juga dilihat pada komentar di bawah.

Kostumisasi Tombol

Silahkan buat CSS untuk tombol dengan class .btn-img. Sebagai contoh CSS dibawah ini, silahkan diedit suka-suka.

.btn-img{
  background:#f6c7be;
  border:1px solid #d5553e;
  padding:5px 8px;
  border-radius:5px;
  cursor:pointer
}

Resource
https://www.bungfrangki.com/2024/08/menampilkan-komentar-gambar-di-blogger.html