Membuat AMP Image Creator Menggunakan Framework Vue.js Untuk Blog/Website Valid AMP
Desember 22, 2017
Add Comment
Hello sobat blogger, pada kesempatan kali ini saya akan membagikan sebuah source code untuk Membuat AMP Image Creator Menggunakan Framework Vue.js Untuk Blog/Website Valid AMP.
Karena AMP Image Creator ini merupakan tools para blogger, maka postingan kali ini saya tujukan atau saya khususkan untuk temen-temen yang suka ngeblog ya ... terutama yang saat ini blognya menggunakan template AMP.
Apa itu Template AMP?
TEMA atau Template Blog AMP adalah desain tampilan blog menggunakan kode-kode dari AMP Project. AMP adalah singkatan dari Accelerated Mobile Pages. Menurut Google, Accelerated Mobile Pages (AMP) adalah laman web yang dirancang berdasarkan spesifikasi sumber terbuka.
Disebutkan di laman resminya, AMP Project adalah inisiatif sumber terbuka yang bertujuan untuk membuat web lebih baik bagi semua kalangan. Proyek ini memungkinkan pembuatan situs dan iklan dengan performa tinggi, cepat, dan konsisten di berbagai perangkat dan platform distribusi.
Ngomong-ngomong soal template AMP, blog Programmer Bojonegoro dulu juga pernah valid AMP lho :v Tapi karena saya males ngedit templatenya, akhirnya sekarang sudah nggak valid AMP lagi hehehe ...
Cara cek laman valid AMP atau enggak, silakan temen-temen klik link berikut: https://search.google.com/test/amp
Nah, setelah kita mengetahui penjelasan sekilas tentang template AMP. Selanjutnya kita juga harus mengetahui fungsi dari AMP Image Creator yang akan kita buat.
Seperti yang kita ketahui bersama, saat artikel ini ditulis, Blogger belum mendukung template AMP. Akibatnya, kita harus mengedit manual setiap postingan agar selalu valid AMP.
Jadi, AMP Image Creator ini berfungsi untuk memudahkan kita dalam membuat tag amp-img secara otomatis melalui url gambar. Sehingga kita tidak perlu capek-capek dan membuang waktu lagi untuk membuat tag amp-img secara manual.
Berikut source code untuk Membuat AMP Image Creator Menggunakan Framework Vue.js Untuk Blog/Website Valid AMP
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AMP Image Creator</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="shortcut icon" href="https://www.ampproject.org/static/img/amp_favicon.png?v=3">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>AMP Image Creator</h1>
<p>Create <code>amp-img</code> tag from image url quickly</p>
</div>
<div class="col-md-8">
<!-- Future Development, mybe ads here -->
</div>
</div>
</div>
<div class="container" id="app">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default" style="margin-top:2vh">
<div class="panel-body">
<div class="form-group">
<label>Image URL*</label>
<input class="form-control" v-on:keyup="getImageData()" v-model="src" type="text" placeholder="http://example.com/image.jpg" />
</div>
<div class="form-group">
<label>Layout</label>
<select class="form-control" v-model="layout">
<option>nodisplay</option>
<option>fixed</option>
<option>responsive</option>
<option>fixed-height</option>
<option>fill</option>
<option>container</option>
<option>flex-item</option>
</select>
</div>
<div class="form-group">
<label>Alt text</label>
<input class="form-control" v-model="alt" type="text" placeholder="alternative text" />
</div>
<div class="form-group">
<textarea onclick="this.select()" class="form-control" rows="8" style="font-family:monospace">
<amp-img
width="{{ width }}"
height="{{ height }}"
alt="{{ alt }}"
src="{{ src }}"
layout="{{ layout }}">
</amp-img></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Made with <i class="glyphicon glyphicon-heart"></i> by <a href="https://programmerbojonegoro.blogspot.co.id/" rel="dofollow" target="_blank">Programmer Bojonegoro</a></p>
</div>
</div>
</div>
</footer>
<script>
var app = new Vue({
el: '#app',
data: {
width: '',
height: '',
layout: 'responsive',
alt: '',
src: ''
},
methods: {
getImageData: function () {
var img = new Image();
img.onload = function(){
// clear ukuran
app.width = '';
app.height = '';
// ambil ukuran gambar
app.width = this.width;
app.height = this.height;
};
img.src = this.src;
console.log(this.src);
var index = this.src.lastIndexOf("/") + 1;
var filename = this.src.substr(index);
this.alt = unescape(filename);
console.log(filename);
}
}
})
</script>
</body>
</html>
0 Response to "Membuat AMP Image Creator Menggunakan Framework Vue.js Untuk Blog/Website Valid AMP"
Posting Komentar