Mengambil URL Gambar Pertama dari Posting

Tabel Konten
  1. Versi PHP 
    1. Penggunaan 
  2. Versi JavaScript 
    1. Penggunaan 

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;

10 Komentar

  • Kang Rian

    apakah kode ini bertujuan untuk tambahan gambar pada auto readmore di halaman awal blog seperti biasanya?

    • Taufik Nurrohman

      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.

  • Damar Zaky

    waah udah bukan bloger lagi ini mah :)

  • Unknown

    CMS. berarti wordprees, joomla? keren dah :-bd

  • budkalon

    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.

    • Taufik Nurrohman

      Kalau dari favicon mungkin bisa → http://css-tricks.com/favicons-next-to-external-links

  • Anonim

    masih bingung sama penggunaannya. $page[content] :p

  • azewBz

    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

Komentar telah ditutup.