Mengambil Url Gambar Pertama Dari Posting

Published by Concept Phone Rabu, 31 Oktober 2018

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, contohnya dengan cara ini:

var sourceText = document.querySelector('.post-body').innerHTML;

Sumber https://www.dte.web.id/