I am trying to fetch images from pixabay and show in blog.But images are disappearing after few days. My Code is like below.
function imageSelect_blog(evt) {
const imageURL = event.target.getAttribute('src');
$('#showuploadedimage').attr('src', imageURL);
var xhttp = new XMLHttpRequest();
var url = "/admin/upload_pixabay_image.php";
var data = { url : imageURL, id: "<?php echo $_GET['id']; ?>" };
var params = JSON.stringify(data);
xhttp.open("POST", url, true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.send(params);
bootstrapModal.hide();
}
const pixModalBtn = document.getElementById('pixModalBtn');
const pixabayModal = document.getElementById('pixabayModal');
const API_KEY = 'api_key';
var bootstrapModal = new bootstrap.Modal(pixabayModal);
pixModalBtn.addEventListener('click', function() {
var modal = document.querySelector('.modal-body');
modal.innerHTML = `<label class="control-label" for="pixabayinput">Search images in Pixabay</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="pixabayinput">
</div>
<div class="col-sm-12" id="pixaresult"></div>`;
var closeButton = pixabayModal.querySelector('.close');
var bootstrapModal = bootstrap.Modal.getInstance(pixabayModal);
closeButton.addEventListener( 'click', function () {
bootstrapModal.hide();
});
$(pixabayModal).on('show.bs.modal', function() {
var pixabayinput = document.getElementById( 'pixabayinput' );
pixabayinput.oninput = function() {
// var textBox = this.getInputElement();
var value = pixabayinput.value;
if( value !== "") {
var URL = "https://pixabay.com/api/?key="+API_KEY+"&q="+encodeURIComponent(value);
var currentPage = 1;
var perPage = 20;
var totalPages = 0;
var totalHits = 0;
function showImages(data) {
if (parseInt(data.totalHits) > 0) {
totalHits = parseInt(data.totalHits);
totalPages = Math.ceil(totalHits / perPage);
var images = "";
$.each(data.hits, function (i, hit) {
images += "<img class='pix_image' src='" + hit.webformatURL + "' alt='" + hit.tags + "' width='50' height='60'>";
});
document.getElementById("pixaresult").innerHTML = "";
document.getElementById("pixaresult").innerHTML += "<div id='container'>"+ images +"</div>";
// attach click event listener to parent element
document.getElementById("container").addEventListener("click", function (event) {
// check if target element is an img with the upload_image class
if (event.target && event.target.matches("img.pix_image")) {
imageSelect_blog(event);
}
});
// show pagination buttons
var pagination = "<div id='pagination'>";
pagination += "<button id='prevBtn'>Prev</button>";
pagination += "<button id='nextBtn1'>Next</button>";
pagination += "</div>";
document.getElementById("container").innerHTML += pagination;
// add event listeners to pagination buttons
var prevBtn = document.getElementById('prevBtn');
var nextBtn1 = document.getElementById('nextBtn1');
prevBtn.addEventListener('click', function () {
currentPage--;
getImages(currentPage);
nextBtn1.disabled = false;
});
if (currentPage === 1) {
prevBtn.disabled = true;
}
nextBtn1.addEventListener('click', function () {
currentPage++;
getImages(currentPage);
prevBtn.disabled = false;
});
if (currentPage === totalPages) {
nextBtn1.disabled = true;
}
} else {
document.getElementById("pixaresult").innerHTML = "No hits";
}
}
function getImages(page) {
var pageURL = URL + "&page=" + page + "&per_page=" + perPage;
$.getJSON(pageURL, function (data) {
showImages(data);
});
}
// show loading icon
document.getElementById("pixaresult").innerHTML = '<img src="./assets/img/loading_icon.gif">';
// fetch first page of images
getImages(currentPage);
}
else {
document.getElementById("pixaresult").innerHTML = "";
document.getElementById("pixaresult").innerHTML += '<img src="./assets/img/loading_icon.gif">';
}
}
var URL = "https://pixabay.com/api/?key="+API_KEY+"&q="+encodeURIComponent('red roses');
document.getElementById("pixaresult").innerHTML = '<img src="./assets/img/loading_icon.gif">';
$.getJSON(URL, function(data){
if (parseInt(data.totalHits) > 0) {
$.each(data.hits, function (i, hit) {
if(i === 0) {
document.getElementById("pixaresult").innerHTML = "";
document.getElementById("pixaresult").innerHTML += "<div id='container'></div>";
}
document.getElementById("container").innerHTML += "<img class='pix_image' src='" + hit.webformatURL + "' alt='" + hit.tags + "' width='50' height='60'>";
});
} else {
console.log('No hits');
}
});
});
bootstrapModal.show();
});
function imageSelect(evt) {
var img = evt.target;
var editor = CKEDITOR.dialog.getCurrent().getParentEditor();
const imageURL = evt.target.getAttribute('src');
var xhttp = new XMLHttpRequest();
var url = "/admin/upload_pixabay_image.php";
var data = { url : imageURL };
var params = JSON.stringify(data);
xhttp.open("POST", url, true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.send(params);
xhttp.onreadystatechange = function() {
if (xhttp.readyState === 4 && xhttp.status === 200) {
var response = xhttp.responseText;
var imgHtml = '<img src="' + 'https://speak5.com/admin/'+ response + '" alt="' + img.alt + '">';
editor.insertHtml(imgHtml);
CKEDITOR.dialog.getCurrent().hide();
}
};
}
CKEDITOR.on( 'dialogDefinition', function( ev )
{
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the "Link" dialog).
if ( dialogName == 'image' )
{
dialogDefinition.dialog.resize( 700, 500 );
// Add a new tab to the "Link" dialog.
var API_KEY = 'api_key';
var URL = "https://pixabay.com/api/?key="+API_KEY+"&q="+encodeURIComponent('red roses');
$.getJSON(URL, function(data){
if (parseInt(data.totalHits) > 0) {
$.each(data.hits, function (i, hit) {
if(i === 0) {
document.getElementById("pixa_image_p").innerHTML = "";
document.getElementById("pixa_image_p").innerHTML += "<div id='container'></div>";
}
document.getElementById("container").innerHTML += "<img class='pix_image' src='" + hit.webformatURL + "' alt='" + hit.tags + "' width='50' height='60'>";
});
}
else {
console.log('No hits');
}});
dialogDefinition.addContents({
id : 'pixabayTab',
label : 'Pixabay',
elements : [
{
type: 'text',
id: 'pixabayField',
label: 'Search images in Pixabay',
onInput: function() {
var textBox = this.getInputElement();
var value = textBox.getValue();
if( value !== "") {
var URL = "https://pixabay.com/api/?key="+API_KEY+"&q="+encodeURIComponent(value);
var currentPage = 1;
var perPage = 20;
var totalPages = 0;
var totalHits = 0;
function showImages(data) {
if (parseInt(data.totalHits) > 0) {
totalHits = parseInt(data.totalHits);
totalPages = Math.ceil(totalHits / perPage);
var images = "";
$.each(data.hits, function (i, hit) {
images += "<img class='pix_image' src='" + hit.webformatURL + "' alt='" + hit.tags + "' width='50' height='60'>";
});
document.getElementById("pixa_image_p").innerHTML = "";
document.getElementById("pixa_image_p").innerHTML += "<div id='container'>"+ images +"</div>";
// attach click event listener to parent element
document.getElementById("container").addEventListener("click", function (event) {
// check if target element is an img with the upload_image class
if (event.target && event.target.matches("img.pix_image")) {
imageSelect(event);
}
});
// show pagination buttons
var pagination = "<div id='pagination'>";
pagination += "<button id='prevBtn'>Prev</button>";
pagination += "<button id='nextBtn1'>Next</button>";
pagination += "</div>";
document.getElementById("container").innerHTML += pagination;
// add event listeners to pagination buttons
var prevBtn = document.getElementById('prevBtn');
var nextBtn1 = document.getElementById('nextBtn1');
prevBtn.addEventListener('click', function () {
currentPage--;
getImages(currentPage);
nextBtn1.disabled = false;
});
if (currentPage === 1) {
prevBtn.disabled = true;
}
nextBtn1.addEventListener('click', function () {
currentPage++;
getImages(currentPage);
prevBtn.disabled = false;
});
if (currentPage === totalPages) {
nextBtn1.disabled = true;
}
} else {
document.getElementById("container").innerHTML = "No hits";
}
}
function getImages(page) {
var pageURL = URL + "&page=" + page + "&per_page=" + perPage;
$.getJSON(pageURL, function (data) {
showImages(data);
});
}
// show loading icon
document.getElementById("pixa_image_p").innerHTML = '<img src="./assets/img/loading_icon.gif">';
// fetch first page of images
getImages(currentPage);
}
else {
document.getElementById("pixa_image_p").innerHTML = "";
document.getElementById("pixa_image_p").innerHTML += '<img src="./assets/img/loading_icon.gif">';
}
}
},
{
type: 'html',
id: 'pixa_html',
html: '<div id="pixa_image_p"><img src="./assets/img/loading_icon.gif"></div>',
}
]
});
}
});Why images from pixabay are disappearing from my blog posts ?
Am I doing any wrong ?
How to fetch images from pixabay and show in blog posts ?