After going over ANY option possible, I can't find a solution to a simple problem :
Letting a user select a photo from a large gallery and save it to collection.
Like an image picker, you pick an image from a gallery and the window is closed.
No photo selection option on "user input" menu.
No way to connect any gallery including Wix Gallery to a data set as INPUT.
3rd apps let you do that but it's being saved in their own servers, and its limited to just a few photos, not to a large set
We basically have more than 100 photos in an album that a user should be able to somehow pick.
Another option is to open some kind of window with Pinterest stream and collect the URL of a selection, which also seems impossible.
There is no built-in image picker, but you can roll your own with a bit of code.
Here's a bit of code that should get you started in the right direction:
import wixData from 'wix-data';
import wixUsers from 'wix-users';
$w.onReady(function () {
$w('#gallery').clickAction = "none";
$w("#gallery").onItemClicked( (event) => {
let imageSrc = event.item.src;
let toInsert = {
"user": wixUsers.currentUser.id,
"image": imageSrc
}
wixData.insert("SelectedImages", toInsert)
.then( () => {
$w('#gallery').hide("fold");
} );
} );
} );
This code assumes you have a collection where you want to store "selected" images. That collection has at least two fields that have the following keys: user and image.
When an image in the gallery is clicked an event handler gets the src of the image and inserts it into the collection along with the current user's ID. Then the gallery is hidden.
All of the above can be customized to fit your specific situation, but this should give you an idea of what can be done.
Related
I'm developing a Add-in for PowerPoint that inserts images in the document.
I'm currently able to insert the image, but what I'm not able to do is to replace a current selected image.
So, for example, imagine that:
The user added an image available on the Add-in, inside an empty slide
He then selected this image and wants to replace it with another one also available on the Add-in.
He clicks/selects the slide image, and then clicks on the image inside the Add-in that he wants to replace.
The thing is that I'm not able to get his selection with the Office API.
Can someone help me?
My current code looks like this:
const insertFile = (binaryStr: string) => {
Office.context.document.setSelectedDataAsync(
binaryStr,
{
coercionType: Office.CoercionType.Image,
},
(result) => {
if (result.status === Office.AsyncResultStatus.Failed) {
console.error(result.error.message);
}
}
);
};
Try to use the getSelectedDataAsync method which reads the data contained in the current selection in the document.
Is it possible with Puppeteersharp to render text, and highlight words that match specific criteria, before saving the webpage as a picture?
In order to save the webpage as html and then do the work, adds others problems (links to picture etc..)
You can use page.evaluate like so:
await page.evaluate(() => {
const pTags = document.getElementsByTagName("p")
for (let i=0;i<pTags.length-1;i++){
pTags[i].style.background="red"
}
})
I have a kendo grid, in which I have selected filter on one column, I am reloading the grid, I want the same filter to be there when grid reloads.
I am using the below code to reload the grid. It works, but it doesn't show the selected filter item checked. I checked IDR in the filter then reloaded the page, it shows 1 item selected but doesn't show IDR as checked.
function ReloadGrid() {
var grid = $('#gridId').data('kendoGrid');
grid.dataSource.read();
grid.setDataSource(grid.dataSource);
}
Well there is two way to achieve this.
One way is to save filters in database and second one is to use local storage as mentioned in comment.
I prefer second one, using local storage to save filters and load it upon read.
#GaloisGirl is pointing you in right direction.
Check this example again: Persist state
Basic usage of locale storage is to save some data under some name (key,value):
let person = {
name: 'foo',
lastName: 'bar'
};
let save = function (person) {
let personString = JSON.stringify(person);
localStorage.setItem('person', personString);
console.log('Storing person: ', personString);
};
let load = function () {
let personString = localStorage.getItem('person'); // <----string
let person = JSON.parse(personString); // <----object
console.log('Stored person: ', person);
};
let remove = function (name) {
localStorage.removeItem(name);
console.log('Removed from local storage!');
};
save(person);
load();
remove(person.name);
In kendo world you need to save current options state of grid in local storage, you can achieve that by adding button like in example or on the fly with change or with window.onbeforeunload or like in your example beforen reload grid.
You can check saved data under application tab in browsers, eg. chrome:
Hope it helps, gl!
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.
I need to tell you that i'm very new to jquery and still learning, please don't laugh at this. I wanted to have an image gallery on my website and found this beautiful gallery that uses jquery. Here is the link for it:
http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/
So there is this snippet that helps the user to click on the album or rather the arrow next to it, to open and close the thumbnail wrapper for the album. All I want is for the first album to open automatically when the webpage is loaded completely. I guess we might have to use the .load() method but I'm not sure how to use it. The code that is inserted here has both the functions to open and close the album, I just wanted to automate the opening part.
//clicking on the menu items (up and down arrow)
//makes the thumbs div appear, and hides the current
//opened menu (if any)
$list.find('.st_arrow_down').live('click', function () {
var $this = $(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var $elem = $this.closest('li');
$elem.addClass('current').animate({
'height': '170px'
}, 200);
var $thumbs_wrapper = $this.parent().next();
$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click', function () {
var $this = $(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});
I tried getting help from the original author of this script but unfortunately she is not responding. Looking forward to your kind assistance. Thanks in advance!!
This 2 lines:
$list.find('.st_arrow_down').live
and
$list.find('.st_arrow_up').live
search for HTML elements with class="st_arrow_down" or class="st_arrow_down"
and bind event "click" on these
This code on
$(document).ready(function () {
var $elem = $('.album').first();
$elem.addClass('current').animate({'height':'170px'},200);
$elem.show(200);
var cnt = $elem.find('.st_wrapper').first().css('display','block');
});
When DOM is ready, you search first album then show animation and display the imgs
Bye