We Keep Coding

Adding an external URL when clicking an image with the rich text editor of Sanity

I'm trying to make possible for the people using the rich text editor in sanity.studio (with no coding knowledge) to add an external link in the image they are uploading. So, then it is clickable in the post they are adding and take the user to another page. Right now they are only able to add some ALT text and edit the picture. This is the code about the images in the blockContent.js:
{
type: 'image',
fields: [
{
type: 'text',
name: 'alt',
title: 'Alternative text',
description: `Some of your visitors cannot see images,
be they blind, color-blind, low-sighted;
alternative text is of great help for those
people that can rely on it to have a good idea of
what\'s on your page.`,
options: {
isHighlighted: true,
hotspot: true,
},
}
],
}

Meta data image for Facebook

I want to use images if I shere some links of my site. Well I am using following for it:
import { Meta, Title } from "#angular/platform-browser";
this.title.setTitle(this.data[0].title + ' - ' + this.data[0].city
);
this.meta.addTags([
{ name: 'keywords', content: 'Globetrotter, Backpacking, Hiking, Travel' + this.data[0].city + ',' + this.data[0].country},
{ name: 'description', content: this.data[0].description},
{ name: 'og:image', content: this.data[0].images[0]}
]);
Everything works fine but with image not and I am not sure if is correct. Within my index.html file I have an another image and this is occuring. Should I delete it? How can I set also the url for displaying the entire site automatically?
index.html
Facebook always shows this images even if I enter different url path.
<meta property="og:image" content="https://cdn.pixabay.com/photo/2017/09/01/21/53/blue-2705642_960_720.jpg"
/>
I want that Facebook or other sites recognise the image from here:
{ name: 'og:image', content: this.data[0].images[0]}

The problem is probably, that facebook's crawler/bot does not execute JavaScript and thus will only ever see the <meta> tag you deliver statically in your index.html.
You will either have to use a prerendering service (like prerender.io) or write the correct meta tag on the server side.

How to display plain text in ExtJs

I have a extJS window. I want to display some text or message which may be response of some server data. Can any body help me how to display ytext on ext JS window. What I need to edit in my code below.
var MyWin = Ext.create('Ext.window.Window', {
title: "My Window",
height: 200,
width: 400,
layout: 'fit',
});
MyWin.show();
Thanks for help.

Personally I preferred show server errors whit a simple window and html in it, like And-y shows you can set html of a window, you can do simply that using a function everywere like this:
var errorShow = function (text) {
Ext.create({
xtype: 'window',
title: 'Response error',
modal:true,
width: 200,
height: 200,
html:text,
scrollable: 'y'
}).show();
};
errorShow('<div style="text-align:center;"><h1>Server error</h1>'+
'<text style="color:red; font-size:1.4em;">404 not found</text><br/>'+
'<text style="color:blue;">www.error.com/img.jpg</text><br/>'+
'<text style="color:blue;">Error requiring image</text></div>');
here is a fiddle to show you.
Remember that you should use the same function during every error, setting dimentions on your need.
A modal window should be used, to ensure that it will be closed.

You can just use the html config to display plain text or html formated text in the Ext.window.Window and any other Ext.Component.
From the ExtJs 5.1.3 documentation html config:
An HTML fragment, or a Ext.dom.Helper specification to use as the
layout element content. The HTML content is added after the component
is rendered, so the document will not contain this HTML at the time
the render event is fired. This content is inserted into the body
before any configured contentEl is appended. Defaults to: ''
The working code looks like:
var MyWin = Ext.create('Ext.window.Window', {
title: "My Window",
height: 200,
width: 400,
layout: 'fit',
html: "with some plain text or <p> some html</p>"
});
MyWin.show();
Here is a working fiddle with the code above.

Open fancybox Gallery after click event on a text

I found plenty of stuff on StackOverflow and tried different things to achieve what i want, but i'm stuck on this here.
I have a Text in my HTML, if i click this text a fancybox should open with an Image Gallery, the images should come from the images Array.
What happens now is that it's opening a broken fancybox, without any styling, opacity, closebutton whatsoever. Here's a example of what it looks like!
My Javascript is the following
$(function(){
$("#turn_all_pictures").click(function(){
if(images.length == 0){
loadImages();
}
$(this).fancybox();
$.fancybox.open(
images,
{
'autoScale': true,
'autoDimensions': true,
'centerOnScroll': true,
helpers:{
overlay:{
css:{
'background' : 'rgba(58, 42, 45, 0.95)'
}
},
buttons:{}
}
});
});
})
An entry in the Array looks like this, which should be right according to this Stack Overflow Q/A
Object { href="<img class="hidden_img fancybox" rel="turn_gallery" src="../../../images/1085/5263-3-medium.jpg"/>"}
The needed HTML is this:
<p><span class="turn_left" id="turn_all_pictures">Alle Bilder anzeigen</span></p><br>
What am i doing wrong, what do i miss so that the fancybox will open correctly formatted and with the image Gallery instead of the Text from the HTML?
EDIT
I tried out to append the images in my loadImages() function to a div and then ref to this div with my fancybox.
$.fancybox.open(
images,
{
// 'autoScale': true,
// 'autoDimensions': true,
// 'centerOnScroll': true,
// helpers:{
// overlay:{
// css:{
// 'background' : 'rgba(58, 42, 45, 0.95)'
// }
// },
// buttons:{}
href: '#hidden_pictures'
}
)
That will show all pictures, the whole div, in a fancybox, so i'm guessing that it has something to do with the images array

Check the location of your resources such as your CSS and images for fancybox. You can also inspect your DOM using firebug or some DOM inspection tool to see if your resources are ring found.
I used firebug and looked at the NET tab which showed the http request to the resource. You may see a 404 error if it's not found.

Check you have passed images array in a format like this:
[
{
href: 'image1.jpg',
title: 'title 1'
},
{
href: 'image2.jpg',
title: 'title 2'
}
]
make sure you have included the css properly (check the path)
Also see this

how we make ckeditor dialog non resizable ,non draggable?

I am creating a new plugin named small image repository system for CKEditor. and i m quite successful to make it. but i got an issue that dialog height increase automatically when i load set of images automatically.so please suggest me how i make CKEditor non draggable and non resizable?
I already tried the code to make non resize dialog for CKEditor which is given below:
resizable : CKEDITOR.DIALOG_RESIZE_NONE
But still i didn't solve my problem please help me

CKEDITOR.dialog.add('plugin_name', function (editor){
var id = editor.id;
return {
minWidth: 820,
minHeight: 400,
resizable : CKEDITOR.DIALOG_RESIZE_NONE,////resize disble
contents:
[
{
id: 'iframe',
expand: true,
elements:
[
{
type: 'html',
html: '<div style="width:820px;height:400px"><iframe src="' + CKEDITOR.plugins.getPath('foot_notes') + 'dialogs/test.html" frameborder="0" name="iframeinsert' + id + '" id="iframeinsert' + id + '" allowtransparency="1" style="width:820px;height:400px;margin:0;padding:0; resize: none;" scrolling="no"></iframe></div>'
}
]
}
],
};
});

Setting the dialog's resizable property to CKEDITOR.DIALOG_RESIZE_NONE is only going to prevent users from changing the size of the dialog window. Btw, CKEDITOR.DIALOG_RESIZE_NONE is the default so there's no need to set it explicitly in your dialog definition. You can find CKEditor's documentation page on the subject here.
It sounds like what you need to do is set the height property. This will set the height of the dialog to the value you assign to it, in pixels.
Cheers!