Mecha versi 2.6.3 sudah dirilis!

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

Taufik Nurrohman

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

Anonim

<img src="<?php echo $article->image; ?>"> :D

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.