how to generate thumbnail image given the url? - javascript

For the application I am currently building, there is a dataset of links associated with certain customer profiles and the user receives a list, which looks like the following:
function getList(customItems){
var messageData = {
recipient: {
id: recipientId
},
message: {
attachment: {
type: "template",
payload: {
template_type: "generic",
elements: []
}
}
}
};
customItems.forEach(function(item) {
var url = item._id;
var listItem = {
title: item.title,
subtitle: "",
item_url: url,
image_url: "http://random.image.com",
buttons: [{
type: "postback",
title: "Get other items",
payload: "TEST",
}]
};
messageData.message.attachment.payload.elements.push(listItem);
Anyway, I would like to generate some image from given url the same way it appears in messenger if the link is pasted directly into the text box and haven't figured out yet how to do it. Also, by the way, if I try to display some random image for testing purpposes (http://random.image.com replaced by some valid image url), the image doesn't appear.
Does anyone know how to generate images to be displayed for given urls dynamically?

You either have to implement your own (or open source) thumbnail image processor (with something like ImageMagick, GraphicsMagick, G'MIC, gd, PhantomJS + HTML5 Canvas), or use a SaaS solution like imgix.com

Related

Array with objects in Javascript. How do I list each key value pair and each object on different pages?

I have a school assignment. The assignment is I have to do a website built like an example page we got. Dynamically, javascript needs to be added to show information stored in an array of objects. What I need is to list the information on different pages, depending on the information I want to show. The same keys are used for each object. Can I use map() first maybe, and then select the key value pair I want to show?
I have tried something like this:
let listing = ""
let texts = ""
resources.map((e) => {
listing += `<a class="category">${e.category}</a>`
})
resources.map((i) => {
texts += `<p class="text">${i.text}</p>`
})
document.querySelector("#listing-categories").innerHTML = listing;
document.querySelector(".main-content").innerHTML = texts;
On objects looking like this:
{
category: "Sanity and headless CMS",
text: "Sanity er et headless CMS som står for innholdsadministrasjon. Innhold hentes inn i applikasjoner via GROQ-spørringer.",
sources: [
{
title: "Sanity documentation",
url: "https://www.sanity.io/docs"
},
{
title: "OnCrawl: a beginners guide to headless CMS",
url: "https://www.oncrawl.com/technical-seo/beginners-guide-headless-cms/"
},
{
title: "Section.io: Getting started with Sanity CMS",
url: "https://www.section.io/engineering-education/getting-started-with-sanity-cms/"
},
]
},
How do I display ex. they value of text on a page for Sanity and Headless CMS?

Make custom this.$myfunction in vueJS (V2)?

I'm making an admin dashboard and I need to ask for data (for example when creating or updating data) a lot. I am already using vue-sweetalert2 which made me aware of how easy it is to use this.$swal.fire().then()...
I was wondering, how would I go about making my own kind of thing like that (without using TypeScript)?
let reply = await this.$ask(fields)
alert("You entered: " + reply.yourname.answer)
Then in the component that I load in on every page, I would have a modal which takes the fields and allows for user input. When a user clicked submit or exited the modal, it needs to return a / the value(s).
I'm thinking of using it this way:
// Ask for new team name & description
let modalResult = await this.$ask({
fields: [
{
title: "Team name",
placeholder: "Give youre team a name!",
key: "teamName",
type: "text"
}, {
title: "Team description",
placeholder: "What's your team about?",
key: "teamDescription",
type: "text"
}
],
modal: {
variant: "primary",
icon: null,
title: "Make a new team",
confirmButtonText: "Create team",
cancelButtonText: "Cancel"
}
});
console.log("Team name: " + modalResult.data.teamName);
console.log("Team description: " + modalResult.data.teamDescription);
However, I honestly have no idea how I'd go about making this possible. What I've thought of:
Mixins: Of what I've learnt so far, I don't know how to put a template file in it. (so a .vue file, only a .js file).
Here's a screenshot of :
what I'm trying to say
Thanks in advance! :-)
When you're setting up your vue instance (usually in main.js), you can put your method on as a prototype
Vue.prototype.$ask= (your function or your object);
Here's some vuejs docs on the subject
https://v2.vuejs.org/v2/cookbook/adding-instance-properties.html

nodejs encoding to base64 string is not working

I am trying to send a calendar event as an attachment (.ics) file in nodejs.
I am using ical-generator library to create an event.
The code below is generating an .ics file and attaching it with the email but file always comes as empty.
I am not sure why the event content is not converting to base64. when I log the converted content it shows the same content (not converting to base64)
const cal = ical({ domain: "github.com", name: "my first iCal" });
// overwrite domain
cal.domain("example.net");
cal.createEvent({
start: moment(),
end: moment().add(1, "hour"),
summary: "Example Event",
description: "It works ;)",
location: "my room",
url: "http://example.net/",
});
console.log('result :', cal.toString("base64"));
// result :
BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//example.net//ical-generator//EN
NAME:my first iCal
X-WR-CALNAME:my first iCal
BEGIN:VEVENT
UID:000-tnmyae#example.net
SEQUENCE:0
DTSTAMP:20210403T212902Z
DTSTART:20210403T212902Z
DTEND:20210403T222902Z
SUMMARY:Example Event
LOCATION:my room
DESCRIPTION:It works \;)
URL;VALUE=URI:http://example.net/
END:VEVENT
END:VCALENDAR
var message = {
html: emailBody,
subject: "test",
from_email: "from email",
from_name: "sender name",
to: [
{
email: "receiver email",
},
],
tags: ["test"],
attachments: [
{
type: "text/calendar",
content: cal.toString("base64"),
name: "fileName.ics",
},
],
};
I found this encoded to base64 content from the other thread and it works just fine. "QkVHSU46VkNBTEVOREFSDQpWRVJTSU9OOjIuMA0KUFJPRElEOi0vL01lZXRlci9tZWV0ZXIvL05PTlNHTUwgdjEuMC8vRU4NCkNBTFNDQUxFOkdSRUdPUklBTg0KTUVUSE9EOlJFUVVFU1QNCkJFR0lOOlZFVkVOVA0KRFRTVEFSVDoyMDE0MTAxOFQyMDMwMDBaDQpEVEVORDoyMDE0MTAxOFQyMTAwMDBaDQpVSUQ6MjAxNDEwMTVUMDAyODEzLTIyMzc4ODg2OEBtZWV0ZXIuY29tDQpEVFNUQU1QOjIwMTQxMDE0VDIxMjgxM1oNCk9SR0FOSVpFUjtDTj0ic25hZ2dzQGdtYWlsLmNvbSI7U0VOVC1CWT0iTUFJTFRPOnNvbWVhcHBAZ21haWwuY29tIjtMQU5HVUFHRT1zZTpNQUlMVE86c25hZ2dzQGdtYWlsLmNvbQ0KQVRURU5ERUU7Q1VUWVBFPUlORElWSURVQUw7Uk9MRT1SRVEtUEFSVElDSVBBTlQ7UEFSVFNUQVQ9TkVFRFMtQUNUSU9OO1JTVlA9VFJVRTtDTj1GZXNzeSBNO1gtTlVNLUdVRVNUUz0wOk1BSUxUTzpzbmFnZ3MyQGdtYWlsLmNvbQ0KREVTQ1JJUFRJT046ZGRkZCBtYW5kcmlsbA0KTE9DQVRJT046ZGRkZGRkIG1hbmRyaWxsDQpTVU1NQVJZOkNhbiBJIGxheSBsb3c/IENvb2sgc29tZSB5YXkteW8gMg0KVFJBTlNQOk9QQVFVRQ0KU0VRVUVOQ0U6MA0KU1RBVFVTOkNPTkZJUk1FRA0KRU5EOlZFVkVOVA0KRU5EOlZDQUxFTkRBUg=="
If I try abover encoded string, my calendar event works fine. the file.ics also works fine.. so my guess is problem while converting that event content to base64.
The ical-generator package's calendar class doesn't provide a toString() which takes the format as the parameter, like Buffer. You'll just need to convert it to Base 64 like you'd convert any other string.
const calStr = cal.toString()
const calB64 = Buffer.from(calStr).toString('base64')
console.log('result :', calB64);

MS Teams adaptive card "herocard" not work on mobile

I`m creating bot for MS Teams and using JS Microsoft Bot Framework V4 SDK.
In my work, I use search message extension and to work with it, I implemented the onSelectItem method that returns a adaptive card. I will give an example of the code below.
return Promise.resolve({
type: "result",
attachmentLayout: "list",
attachments: [CardFactory.heroCard(
`${file.name}`,
`${text}`,
undefined,
CardFactory.actions([
{
type: "openUrl",
title: "Open",
value: `${openLink}`
},
{
type: "openUrl",
title: "Download",
value: `${downloadLink}`
},
]),
)]
});
Where I pass undefined, this should be the path to the picture, but in my implementation I don't need it. So and this code works great in the browser and on the desktop version here is a screenshot
however, on the mobile version, I get the following result
this is absolutely not the right card, it has no content or buttons
I think I found the answer myself. When the message extension search is triggered, the onQuery method is called and suppose you made a query and received an array of values ​​that you want to display. And here, in the same method, iterating over the array, you must draw two cards at once. For example
files.forEach((file: IDocumentInfo): void => {
const card: any = CardFactory.heroCard(
cutString(file.name, LIMIT),
text,
undefined,
[
{
type: "openUrl",
title: "Open",
value: "", // some value
},
{
type: "openUrl",
title: "Download",
value: "" //some value,
},
]
);
const preview: any = {
contentType: "application/vnd.microsoft.card.thumbnail",
content: {
title: `${cutString(file.name, LIMIT)}`,
text: "", // some text
}
};
And here the variable preview in my case will respond to a small view of information after the search and the variable card will be responsible for the view after selection. And after the card is selected, the onSelectItem method is triggered, which I need to get more information about the document
It turns out that the adaptive heroCard is not to blame here, the onSelectItem method is not called in the mobile application, or I am doing something wrong

JSON: How to handle attributes derived from the key?

I have a JSON object like this in my application:
var pages = {
home: {
title: "Home",
description: "The home page",
file: "home.html",
url: "/home"
},
blog: {
title: "Blog",
description: "Our blog",
file: "blog.html",
url: "/blog"
}
};
The properties file and url can always be derived from the respective key, so I currently define the above object like this in my code:
var pages = {
home: {
title: "Home",
description: "The home page"
},
blog: {
title: "Blog",
description: "Our blog"
}
};
$.each(pages, function(key, value) {
value.file = key + ".html";
value.url = "/" + key;
}
However, since file and url are derived attributes, adding them to the object seems redundant. But since I pass the value around for each page, not the key, I would have to add it to the object as well, which would also be redundant. Like this:
var pages = {
home: {
title: "Home",
description: "The home page"
},
blog: {
title: "Blog",
description: "Our blog"
}
};
$.each(pages, function(key, value) {
value.jsonKey = key;
}
Now I have three different approaches and don't really like any of those. I think this should be a fairly common problem, so how would you approach this? And what if the derived attribute is to be used more than once?
you should consider storing pages as a list of objects rather than as an object with properties. This seems more consistent logically and solves your redundancy concerns.
var pages = [
{
key: 'home'
title: "Home",
description: "The home page",
},
{
key: 'blog',
title: "Blog",
description: "Our blog",
}
];
additionally. you can create classes for page objects and use methods that compute the derived properties (optionally caching them, in case you think repeated access is costly. However, doing that for simple string concatenation seems like an overkill)
Why do you want to store the same data in a different form, when you already have it in one form(your key).
In my opinion, don't go for any of these, because whenever you wish to get the file and url for a particular page, you can easily get it from the page.key.

Categories