I have a collection for image uploading represented in following code:
Images = new FS.Collection('images', {
stores:[new FS.Store.FileSystem('images', {path:"~/projectUploads"})]
});
I would like to have a custom 'like' button to make images I upload likeable. So how do I do that? I tried to make it with socialize:likeable package, but it doesn't seem to work for FS.collection, or may be I'm doing it wrong, I just put LikeableModel right before FS.Collection like this:
Images = new LikeableModel.FS.Collection('images', {
stores:[new FS.Store.Filesystem('images', {path:"~/projectUploads"})]
});
Related
I am trying to implement a simple ckeditor conversion to wrap my image into an tag.
editor.conversion.for('downcast').add(dispatcher => {
dispatcher.on('insert:imageBlock', (evt, data, conversionApi) => {
const viewImage = viewWriter.createAttributeElement('img');
const insertPosition = conversionApi.mapper.toViewPosition(data.range.start);
conversionApi.mapper.bindElements(data.item, viewImage);
viewWriter.insert(insertPosition, viewImage);
evt.stop();
});
});
The base "insert:imageBlock" creates a element with an inside, the code above removes the figure and only binds the imageBlock model to my newly created tag and it works fine.
But I cannot find a solution to wrap that newly created tag into an tag with my desirable href.
Does anyone know a simple solution to this?
Thanks!
I was trying Azure maps Symbol feature. I wanted to add a custom image as symbol.
When i used path of local image, it was not working.
"All resources, such as icon images, must be loaded into the WebGL context."
Please help me how to make local image to be loaded as webGL context.
You must add your image to the maps image sprite before you the symbol layer can use it. You would pass the URL and a unique name for the image into the map.imageSprite.add function. This is a Promise that you have to wait for as the image is loaded asynchronously. Once loaded, you can then set the image option of the symbol layers iconOptions to the unique name of the image.
Some additional code samples can be found here: https://samples.azuremaps.com/?sample=custom-symbol-image-icon
Update:
Here is a code block show how to add an image to the maps image sprite (WebGL context).
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Load the custom image icon into the map resources.
map.imageSprite.add('my-custom-icon', '/images/icons/showers.png').then(function () {
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//Pass in the id of the custom icon that was loaded into the map resources.
image: 'my-custom-icon'
}
}));
});
});
If you have multiple images you want to use, you can create an array of the imade add promises, then use Promise.all. Here is a good code sample: https://samples.azuremaps.com/?sample=data-driven-symbol-icons And here is a simply code block example:
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create an array of custom icon promises to load into the map.
var iconPromises = [
map.imageSprite.add('gas_station_icon', '/images/icons/gas_station_pin.png'),
map.imageSprite.add('grocery_store_icon', '/images/icons/grocery_cart_pin.png'),
map.imageSprite.add('restaurant_icon', '/images/icons/restaurant_pin.png'),
map.imageSprite.add('school_icon', '/images/icons/school_pin.png'),
];
//Load all the custom image icons into the map resources.
Promise.all(iconPromises).then(function () {
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//Use a data driven expression based on properties in the features to determine which image to use for each feature.
image: [
'match',
//In this example each feature has a "EntityType" property that we use to select the appropriate icon.
['get', 'EntityType'],
//For each entity type, specify the icon name to use.
'Gas Station', 'gas_station_icon',
'Grocery Store', 'grocery_store_icon',
'Restaurant', 'restaurant_icon',
'School', 'school_icon',
//Default fallback icon.
'marker-blue'
]
}
}));
});
Can you provide us your code?
I've tried to add local file as image to Azure Maps symbol layer. See examples here: click.
Local file file:///D:/showers.png failed with error: URL scheme must be "http" or "https" for CORS request., but same file on localhost server worked well:
P.S. Maybe I do not clearly understand the problem?
Thanks in advance. I'm trying to figure out how to add client faces (images) to certain locations on a map using the Nokia Here Map Image API.
I am able to do this via the Javascript API, but unfortunately I also need to be able to download an image for use in a generated PDF file, and I can't figure out how to add external images to the map.
Any help would be much appreciated. :)
I didn't exactly understand your requirement but if you want to convert the canvas which shows the map to an Image, you can do that with the map caprutre event, something like following should work
map.capture(function(canvas) {
if (canvas) {
var img = new Image();
img.src = canvas.toDataURL("img/jpeg");
window.open(img.src);
} else {
// For example when map is in Panorama mode
alert('Capturing is not supported');
}
}, [ui], 0, 0, document.getElementById("mapContainer").offsetWidth, document.getElementById("mapContainer").offsetHeight);
I am developing a relatively simple Wordpress plugin for a client. It is used to upload/select images which are then saved (as image path) in the option variables and used as full-background images for the website's different categories/pages/etc..
Since images are of "wallpapery nature" (i.e. big) I added a custom image size with a maximum width of 1920 pixels (height is set to "auto", i.e. no image cropping). And that part also works, upon upload, images are being resized to my custom 1920 px width.
Now, the thing is, for uploading/choosing the background image I'm using the new media uploader and it works except that the chosen image (path) is always for the original uploaded image, for example "my-background-image.jpg".
My question is: is there a way to enable users (or make the uploader do it automatically) to select the 1920 px sized version of the original image, for example "my-background-image-1920x1080.jpg"?
Thanks!
I managed to sort out my problem, a bit differently than I first approached it - but it is a solution I'm even more pleased.
So, when you use the new media uploader, you have a jquery code that looks something like this:
jQuery(document).ready(function($){
var custom_uploader;
$('.upload_image_button').unbind('click').click(function(e) {
e.preventDefault();
formfieldID=jQuery(this).prev().attr("id");
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
},
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function() {
attachment = custom_uploader.state().get('selection').first().toJSON();
$('.' + formfieldID).val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
});
Now, note the part of the code that gets the selected file's url:
$('.' + formfieldID).val(attachment.url);
This gets the ORIGINAL attachment's (image) url. So, to get some other image size, like thumbnail, large, etc. you use this:
$('.' + formfieldID).val(attachment.sizes.thumbnail.url);
AND in the end, you can even use your own custom image size like this:
$('.' + formfieldID).val(attachment.sizes.mysize.url);
BUT... I ran into one stupid but very time-consuming problem: DO NOT give your custom image size a name that is separated by a minus sign, like "background-image"; because while Wordpress part of it will work (the new image size will be visible and usable) the jquery for media uploader won't work with it.
If you need a separator, use underscore instead, e.g. "background_image" and it will work normally! This could be a beginner's error on my part, but I thought it could save someone some time! :)
I might be missing something, but it seems that Meteor's "magic" revolves around binding data to DOM elements, and updating text and HTML fragments via handlebars: http://docs.meteor.com/#reactivity
This is great, however, when trying to write a meteor app that displays live data in a <canvas> element, I cannot figure out the "meteor way" to update my canvas when the live data changes, since the canvas is populated via JS code like:
var g = canvas.getContext('2d')
g.fillRect(x, y, w, h)
and not data-backed text in the HTML template.
I am trying to draw on the canvas using data from a Meteor.Collection.
My only thought was to embed canvas-drawing JS code in the HTML template in a script tag populated by handlebar vars, but this seems wrong since meteor's events and data-binding code is already client-side JS.
Is there some way listen for live data changes, which triggers drawing on the canvas via JS instead of HTML elements/text?
Please let me know if I can clarify the question in some way
Update:
Tom's answer below made me notice Meteor.deps, which look to allow executing arbitrary code in a reactive context:
http://docs.meteor.com/#on_invalidate
I will try this out and update here if it works.
Perhaps the answer to your question is to use Collection.observe (http://docs.meteor.com/#observe) and trigger the relevant redrawing code in the various callbacks.
For instance, something like:
Rectangles.observe({
added: function(rect) {
var g = canvas.getContext('2d');
g.fillRect(rect.x, rect.y, rect.w, rect.h);
},
// etc
})
This works:
var Shapes = new Meteor.Collection('shapes')
if (Meteor.is_client) {
// Function that redraws the entire canvas from shapes in Meteor.Collection
function drawShapes() {
var shapes = Shapes.find({})
shapes.forEach(function(shape) {
// draw each on canvas
})
}
var startUpdateListener = function() {
// Function called each time 'Shapes' is updated.
var redrawCanvas = function() {
var context = new Meteor.deps.Context()
context.on_invalidate(redrawCanvas) // Ensures this is recalled for each update
context.run(function() {
drawShapes()
})
}
redrawCanvas()
}
Meteor.startup(function() {
startUpdateListener()
})
}
I had some trouble with updating the canvas so I created this simple game demo:
https://github.com/randompast/Meteor-SimpleGame