I'm displaying an image like that:
<img :src="imageUrlAlt(this.form.logo_image)">
I tried many ways to display image, and only require() works with data bind.
My script:
data: () => ({
form: {
logo_image: null // data will be mounted when load page
}
}),
methods: {
imageUrlAlt(type) {
try {
return require('../../../../../storage/app/public/'+ type)
} catch (e) {
return require('../../../../../storage/app/public/images/organization/alt-image.png')
}
}
}
When I'm load the view and inspect, the image source is something like "/images/logo.jpeg?b0c864c0f180003c61d83266b55df0c6", and an image look exactly the same with my image will be created in public/images, so I understanding that this one has been displayed instead of the original.
However, when I'm create a function to upload image, after refresh page, the image displayed still the old, because image in public/images still not updated or delete. How to fix that? Thanks a lot. And sorry if my english is bad.
Related
I'm developing an extension using Crossrider and want to block certain images before they load. Currently, I'm trying in the extension.js file using the code below, but it only removes them after they have loaded and does't catch AJAX loaded images. How can I do this with Crossrider?
appAPI.ready(function($) {
$('img').remove();
});
This is best achieved in the background scope using the appAPI.webRequest.onRequest.addListener method to catch image requests and block them before they load. For example:
appAPI.ready(function() {
// The list of image file types you wish to block
var fileTypeBlockList = 'jpg|gif|svg';
appAPI.webRequest.onRequest.addListener(function(details) {
if (details.method == "GET" &&
details.requestUrl.match(new RegExp('.'+fileTypeBlockList+'$','i')) {
return { cancel: true };
}
});
});
[Disclosure: I am a Crossrider employee]
Morning,
We have literally searched all over Stackoverflow and Google to find this solutions but still don't have the right answer.
We're trying to auto-set the Base, Small and Thumbnail options on the first uploaded image, so when uploading multiple images the first image will always have all three options checked.
If anyone has tried and succeeded with find this answer and advice, Thank you.
It is very easy. Example's here. Replace in root/js/mage/adminhtml/product.js in the end of handleUploadComplete around 120 row code
this.container.setHasChanges();
this.updateImages();
},
updateImages : function() {
with
this.container.setHasChanges();
this.updateImages();
$$('tr#media_gallery_content-image-1 td.cell-image.a-center input')[0].setAttribute('checked','checked');
$$('tr#media_gallery_content-image-1 td.cell-small_image.a-center input')[0].setAttribute('checked','checked');
$$('tr#media_gallery_content-image-1 td.cell-thumbnail.a-center input')[0].setAttribute('checked','checked');
},
updateImages : function() {
And enjoy autoselect first image after upload
If you have already uploaded your images and need to set the first one as thumb/base/small try the sql command in this post:
Just follow the instructions given by stereo_world and nhahtdh and then refresh your cache.
Thanks to Fabian and Doug for the groundwork. I just published an extension, which does exactly what you are trying to achieve in a clean way: https://github.com/customgento/CustomGento_AutoSelectImages
It simply adds a JS file on the admin product edit page. In the JS file, the mentioned method Product.Gallery.createImageRow is wrapped, so that the radio buttons can be selected after the first image has been uploaded. Here is the JS "magic":
if (typeof Product.Gallery !== 'undefined') {
Product.Gallery.prototype.createImageRow = Product.Gallery.prototype.createImageRow.wrap(function (parentMethod, image) {
// first call the parent method
parentMethod(image);
// auto-select the radio buttons for the first uploaded image
$H(this.imageTypes).each(function (pair) {
if (this.images.length === 1) {
this.getFileElement(image.file, 'cell-' + pair.key + ' input').checked = true;
}
}.bind(this));
this.setProductImages(image.file);
});
}
I am trying to refresh the image part of the webpage after upload the image.
But not get success.
I need your help.
plz help me in reload the webpage using ajax.
Thanks in advance.
This code shows the ALERTS - before image loading and after image loaded.
You can process you data wherever you want using this.
$(document).ready(function(){
function imageLoaded() {
// function to invoke for loaded image
alert("image loaded......");
}
$('img').each(function() {
alert("image loading......");
if( this.complete ) {
imageLoaded.call( this );
} else {
$(this).one('load', imageLoaded);
}
});
});
I'm trying to change the default behavior of Drupal when adding an image through image field on a content type.
When you choose an image to assign to a node, it's not directly uploaded. You also need to click "upload" to display the preview of your image, and this is not really user friendly.
How can I change this (programmatically) to make Drupal start uploading directly the image after choosing the file.
Thank you for help
You can do it this way:
(function ($) {
Drupal.behaviors.autoUpload = {
attach: function(context, settings) {
$('.form-item input.form-submit[value=Upload]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Upload]', $parent).mousedown();
}
}, 100);
});
$('.form-item input.form-submit[value=Transférer]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Transférer]', $parent).mousedown();
}
}, 100);
});
}
};
})(jQuery);
This solution works with either english and french browsers. Unlike AutoUpload module, which only works on browsers configured in english. Note the [value=Upload] / [value=Upload] attribute
I found a similar post:
https://drupal.stackexchange.com/questions/31121/how-can-i-automatically-upload-images-on-file-selection-rather-than-pressing-the
It's exactly what I need..
You should be able to use http://drupal.org/project/imce for your needs.
I am not sure about the Image field but when I encountered this issue I decided letting users add images in body since it is a much easier option for durpal - When inserting images in text They will show immediately .
IMCE + filefield seems like a viable option for your direct needs,They do mention AJAX support.
Whenever I hover over the wbotelhos/raty.js plugin on a page it will repeatedly fetch star-on.png and star-off.png from server as the stars go on and off. Is there a way to use a local client cache of the images? I'm testing in Chrome. I use the following Backbone.View render code to insert the plugin into an Item element.
render: function(manage) {
this.collection.each(function(user) {
this.insertView("ul", new User.Views.Item({
model: user
}));
}, this);
return manage(this).render().then(function(el) {
// Only re-focus if invalid
this.$("input.invalid").focus();
this.$(".raty-test").raty();
});
}
to solve this i wrote github: charlesjshort / raty forked from wbotelhos/raty to replace the code for setting image source with a setSource function which sets images to object in localStorage array. I use github: doomhz/jQuery-Image-Cache to preload the images into the localStorage array.