I have the underneath code, the editor loads and does not give errors.
It does however not enforce the cropping/resizing of the image.
I copied the config straight out of the examples,.. (except for the theme that is)
But it somehow does not work.
Can anyone help out?
aviaryObject = new Aviary.Feather({
apiKey: 'xxxx',
apiVersion: 3,
tools: 'all',
theme: 'light',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
},
onError: function(errorObj) {
alert(errorObj.message);
}
});
aviaryObject.launch({
image: 'imgId',
url: [server-url],
forceCropPreset: ['Logo','150x150'],
forceCropMessage: 'Please crop your photo to this size',
});
Found the solution, as I'm using https I had to load a different script file.
So if you want to use aviary over a https connection, use:
https://dme0ih8comzn4.cloudfront.net/js/feather.js
Related
I want to create a media library window. attachment should filter with mime types and metadata.
the mime-type filter is done. How can I build a metadata filter just for this?
function upload_image_tinymce(e) {
e.preventDefault();
var $input_field = $('.mce-my_input_image');
var custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Add Video',
button: {
text: 'Add Video'
},
library: {
type: [
'video/MP4',
'video/quicktime',
'video/x-m4v',
],
},
multiple: false
});
custom_uploader.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
$input_field.val(attachment.id);
});
custom_uploader.open();
}
I cant help you with the whole filter code (not enoth knowlage ...)
But you can use the hook wp_get_attachment_metadata('attachment id') to get an array with the whole metadata of the attachment.
$meta = wp_get_attachment_metadata(126);
Will produce an array with the metadata from the attachment 126.
$cam = $meta[camera]
$cam will then hold the camera string from the metadata ...
Not much but maybe it will lead you a little bit in the right direction.
I tried some plugins but wasn't able to follow along.
Basically I want an iframe to add and preview podcasts and other things.
Is there any iframe block like youtube block which comes with grapesjs ?
To my knowledge, there is not a good grapesjs iframe plugin that already exists.
If your use-case is simple, you can just create your own iframe block that has the information you need:
var editor = grapesjs.init({...});
var blockManager = editor.BlockManager;
blockManager.add('iframe', {
label: 'iframe',
content: '<iframe src="<your iframe src here>"></iframe>',
});
If you'd like an iframe component with a customisable src trait, for example, you'd do it like this:
var editor = grapesjs.init({...});
editor.DomComponents.addType("iframe", {
isComponent: el => el.tagName === "IFRAME",
model: {
defaults: {
type: "iframe",
traits: [
{
type: "text",
label: "src",
name: "src"
}
]
}
}
});
editor.BlockManager.add("iframe", {
label: "iframe",
type: "iframe",
content: "<iframe> </iframe>",
selectable: true
});
Here's a working codesandbox: https://codesandbox.io/s/grapesjs-o9hxu
If you need more customization options, you can learn how to create custom blocks and components using the docs:
https://grapesjs.com/docs/modules/Blocks
https://grapesjs.com/docs/modules/Components
https://grapesjs.com/docs/modules/Traits
I have tried sharethis-reactjs https://libraries.io/npm/sharethis-reactjs
and also react share https://www.npmjs.com/package/react-share.
All I am able to do is send the url or some text across , I want to send an Image with some text (only image is also fine).
The answers on the internet is only to react-native , I am looking for a solution in reactjs.
I am creating a PWA so it will be working in mobiles.
<InlineShareButtons
config={{
alignment: 'center', // alignment of buttons (left, center, right)
color: 'social', // set the color of buttons (social, white)
enabled: true, // show/hide buttons (true, false)
font_size: 16, // font size for the buttons
labels: 'cta', // button labels (cta, counts, null)
language: 'en', // which language to use (see LANGUAGES)
networks: [ // which networks to include (see SHARING NETWORKS)
'whatsapp',
'linkedin',
'messenger',
'facebook',
'twitter'
],
padding: 12, // padding within buttons (INTEGER)
radius: 4, // the corner radius on each button (INTEGER)
show_total: true,
size: 40, // the size of each button (INTEGER)
// OPTIONAL PARAMETERS
url: '', // (defaults to current url)
image: '', // (defaults to og:image or twitter:image)
description: 'custom text', // (defaults to og:description or twitter:description)
title: 'custom title', // (defaults to og:title or twitter:title)
message: 'custom email text', // (only for email sharing)
subject: 'custom email subject', // (only for email sharing)
username: 'custom twitter handle' // (only for twitter sharing)
}}
/>
Can someone please tell me what I can enter in the image=" " to share an image or any other way to share an image in react js
You can use Web Share API in your React.js web application to share text, URLs, and files.
With the Web Share API, web apps are able to share text, URLs, and files to other apps installed on the device in the same way as native apps.
Web Share API has some limitations:
It can only be used on a site that supports HTTPS.
It must be invoked in response to a user action such as a click.
Invoking it through the onload handler is impossible.
As of mid-2020, it is only available on Safari and on Android in
Chromium forks.
https://web.dev/web-share/
Following code can be used to share text and URL along with an image:
const handleOnSubmit= async()=> {
const response = await fetch(image);
// here image is url/location of image
const blob = await response.blob();
const file = new File([blob], 'share.jpg', {type: blob.type});
console.log(file);
if(navigator.share) {
await navigator.share({
title: "title",
text: "your text",
url: "url to share",
files: [file]
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error in sharing', error));
}else {
console.log(`system does not support sharing files.`);
}
}
useEffect(()=> {
if (navigator.share === undefined) {
if (window.location.protocol === 'http:') {
window.location.replace(window.location.href.replace(/^http:/, 'https:'));
}
}
}, []);
I'm using ExtJs 4.2.3.
In my web application I need to download files.
In order to do that I'm using a 'FileDownloader' component defined as in post
fileDownloader
The code is:
Ext.define('myApp.FileDownload', {
extend: 'Ext.Component',
alias: 'widget.FileDownloader',
autoEl: {
tag: 'iframe',
cls: 'x-hidden',
src: Ext.SSL_SECURE_URL
},
load: function(config) {
var e = this.getEl();
e.dom.src = config.url +
(config.params ? '?' + Ext.Object.toQueryString(config.params) : '');
console.log('in FileDownloader - src: ' + e.dom.src);
e.dom.onLoad = function() {
if(e.dom.contentDocument.body.childNodes[0].wholeText == '404') {
Ext.Msg.show({
title: 'Attachment missing',
msg: 'File cannot be found on the server !',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
};
};
}
});
I call it by code:
downloader.load({
url: src
});
where src is complete path to file.
If I download Word, Excel, PDF files it's working well, file reference is visualized in download bar of browser, but with other data types (ex. .txt, .jpg) it doesn't do nothing.
I think it's no a question about Extjs or js, it's the server's reponse. See this download the text file instead of opening in the browser
I have a problem with a js script running in Internet Explorer.
Basically the script runs fine in Firefox, but I need to embed it into the webbrowser control in a silverlight application, for which it has to run error free in the Internet Explorer engine.
Running it in the IE produces an "Expected object" error in the following line:
$f("player", "player.swf", {
How could this be rewritten to also work in IE?
Here is the complete script:
$f("player", "player.swf", {
key: '##18a1aaa6552d45a2cfe',
log: { level: 'debug', filter: 'org.flowplayer.cluster.*' },
clip: {
url: 'live3',
live: true,
provider: 'rtmp',
autoBuffer:true,
bufferLength:10,
scale:'fit',
connectionProvider: 'cluster',
onStart: function(clip){ }
},
canvas: {backgroundImage: 'url(staytuned.jpg)'},
onError:function(err){canvas: {backgroundImage: 'url(taytuned.jpg)'}},
contextMenu: [
'player 1.1',
{'About ...' : function() {
location.href = "url/?page=aboutus";}},
{'Contact ...' : function() {
location.href = "url/?page=contactus";}},
{'More Casts ...' : function() {
location.href = "url/?page=casts";}},
],
plugins: {
overlay: {
url: 'overlay.swf',
top: 0,
right: 0,
width: 854,
height:450,
zIndex:3
},
rtmp: {
url: 'rtmp.swf'
},
cluster: {
url: 'cluster.swf',
netConnectionUrl: 'url',
hosts: [
{host:'url'},
{host:'url'}
]
},
controls: {
autoHide: false,
url:'url',
zIndex:5
},
gatracker: {
url: "analytics.swf",
trackingMode: "Bridge",
bridgeObject: "pageTracker"
}
}
});
Thanks,
Andrej
First answer was incorrect. See comments for details.
Edit
The problem is likely that $f is not defined at the time you're trying to call it. Place alert(typeof $f); on the line immediately before the line causing the error. If it doesn't alert function, them I'm right.
Make sure you're including the script that contains the definition for $f before you try to call it.
Goto www.jslint.com. Paste this entire script into the top window and click the "jslint" button below it.
You'll find that onError is malformed:
onError:function(err){canvas: {backgroundImage: 'url(taytuned.jpg)'}},
it should read more like:
onError:function(err) {
var canvas = {backgroundImage: 'url(taytuned.jpg)'};
return canvas;
},
There's a similar issue a few lines below.
And I suspect that "taytuned.jpg" needs to be enclosed within quotes, but it's not my script.