Mengambil URL Gambar Pertama dari Posting
Versi PHP
function get_first_image_url($data, $default_url = null) {
/**
* Matched with ...
* ----------------
*
* [1]. `![alt text](IMAGE URL)`
* [2]. `![alt text](IMAGE URL "optional title")`
*
* ... and the single-quoted version of them
*
*/
if(preg_match_all('#\!\[.*?\]\(([^\s]+?)( +([\'"]).*?\3)?\)#', $data, $matches)) {
return $matches[1][0];
}
/**
* Matched with ...
* ----------------
*
* [1]. `<img src="IMAGE URL">`
* [2]. `<img foo="bar" src="IMAGE URL">`
* [3]. `<img src="IMAGE URL" foo="bar">`
* [4]. `<img src="IMAGE URL"/>`
* [5]. `<img foo="bar" src="IMAGE URL"/>`
* [6]. `<img src="IMAGE URL" foo="bar"/>`
* [7]. `<img src="IMAGE URL" />`
* [8]. `<img foo="bar" src="IMAGE URL" />`
* [9]. `<img src="IMAGE URL" foo="bar" />`
*
* ... and the uppercased version of them, and the single-quoted version of them
*
*/
if(preg_match_all('#<img .*?src=([\'"])([^\'"]+?)\1.*? *\/?>#i', $data, $matches)) {
return $matches[2][0];
}
return $default_url; // Default image URL if nothing matched
}
Penggunaan
<img src="<?php echo get_first_image_url($page['content'], 'img/no-image.png'); ?>">
$page['content']
cuma contoh. Anda harus mengambilnya dari konten posting Anda sesuai dengan API pada CMS yang Anda pakai.
Versi JavaScript
function getFirstImageURL(data, noImage) {
/**
* Matched with ...
* ----------------
*
* [1]. `![alt text](IMAGE URL)`
* [2]. `![alt text](IMAGE URL "optional title")`
*
* ... and the single-quoted version of them
*
*/
var matches = /\!\[.*?\]\(([^\s]+?)( +[\'"].*?[\'"])?\)/.exec(data);
return matches ? matches[1] : noImage;
/**
* Matched with ...
* ----------------
*
* [1]. `<img src="IMAGE URL">`
* [2]. `<img foo="bar" src="IMAGE URL">`
* [3]. `<img src="IMAGE URL" foo="bar">`
* [4]. `<img src="IMAGE URL"/>`
* [5]. `<img foo="bar" src="IMAGE URL"/>`
* [6]. `<img src="IMAGE URL" foo="bar"/>`
* [7]. `<img src="IMAGE URL" />`
* [8]. `<img foo="bar" src="IMAGE URL" />`
* [9]. `<img src="IMAGE URL" foo="bar" />`
*
* ... and the uppercased version of them, and the single-quoted version of them
*
*/
matches = /<img .*?src=[\'"]([^\'"]+?)[\'"].*? *\/?>/i.exec(data);
return matches ? matches[1] : noImage;
}
Penggunaan
var img = '<img src="' + getFirstImageURL(sourceText, 'img/no-image.png') + '">';
document.write(img);
sourceText
cuma contoh. Anda harus mengambilnya dari konten posting Anda, misalnya dengan cara ini:
var sourceText = document.querySelector('.post-body').innerHTML;
Labels: Gambar, JavaScript, PHP, Potongan, Regex
10 Comments:
apakah kode ini bertujuan untuk tambahan gambar pada auto readmore di halaman awal blog seperti biasanya?
waah udah bukan bloger lagi ini mah :)
CMS. berarti wordprees, joomla? keren dah :-bd
Yap. Tapi kalau yang versi JavaScript tidak disarankan untuk dipakai seperti itu. Lebih baik dipakai untuk mengekstrak URL gambar dari data posting yang diambil dari JSON, bukan dari HTML secara langsung.
nggak bisa ngambil dari url ya? Jadi misalnya ada komentator masang link di komentar, terus bakalan ada thumbnail-nya di sampingnya, dan thumb-nya itu diambil dari gambar pertama di url tersebut.
Kalau dari favicon mungkin bisa → http://css-tricks.com/favicons-next-to-external-links
masih bingung sama penggunaannya. $page[content] :p
Kalau yang kamu maksud itu untuk si Mecha, Mecha sudah punya metode seperti itu, namanya Get::imagesURL() dan Get::imageURL(). Cuma tidak Saya dokumentasikan karena sudah digunakan secara internal di dalam Get::page(). Kamu bisa mengambil URL gambar pertama dari posting melalui variabel $page->image atau $article->image. Lihat sub-judul Get Article Data by a Reference pada bagian results.
[1]. https://github.com/mecha-cms/cms/blob/40e650e3d5250c342570ff4aca30f1b1d715da95/system/kernel/get.php#L563&L654
[2]. https://github.com/mecha-cms/cms/blob/40e650e3d5250c342570ff4aca30f1b1d715da95/system/kernel/get.php#L424
<img src="<?php echo $article->image; ?>"> :D
maaf mas taufik klau pertanyaan saya melonceng dri tutorial ini..
gmana mas cara merubah tampilan url gambar ketika di inspect
contoh :
tampilan url gambar di blog saya.
background-image: url(https://azewbz.googlecode.com/svn/trunk/badge.png);
tampilan url gambar di blog lain.
background-image: url(../image/home-grup.png);
contoh yg ke2 url gambar jadi singkat, nah cara biar bisa gtu gmna mas?
maaf sebelumya sya sempet cari" totornya di sini ga ada :D
Post a Comment
<< Home