I am working on a personal project in which I am using Magic the Gathering's API to search through their card databases and display them on my website. One of the problems I have encountered is that an argument of the card object that is stored in the database is displayed as {G},{R},{B},{U},{W} etc. but I want it to be displayed as one of the many images found here:
https://media-dominaria.cursecdn.com/attachments/132/91/635465459096129102.png
Considering that the argument is a string, I don't know how to replace the content of the string that is inside the curly brackets with a html image element and have it display properly in the browser.
For example:
mana_cost= "{G}{W}"
I would like to be able to show "{G}" as:
http://img2.wikia.nocookie.net/__cb20130604114032/mtg/images/f/f7/Mana_G.png
and "{W}" as:
https://static.giantbomb.com/uploads/original/8/88760/2277116-white_mana.png
Any help is welcome
You can use a RegEx on the client side and replace with the image before showing in the browser.
let strToReplace = '{G}';
strToReplace = strToReplace.replace(/{G}/, '<img src="http://img2.wikia.nocookie.net/__cb20130604114032/mtg/images/f/f7/Mana_G.png">');
I would download the image and put it on a local folder so you can replace for something like:
strToReplace = strToReplace.replace(/{G}/, '<img src="/images/Mana_G.png">');
fiddle: https://jsfiddle.net/649y20s3/
Related
I am working with Jodit editor on a react project. When I create a note and send to database, and displays the note, it displays fine, but when I try to edit the content and save, the rendered text/content now contains some html tags and this "<p><". I have tried using renderHTML to convert it to only plain text, but that doesn't seem to work. I really need help on converting to plain text alone. The render renderHTML works fine when creating a new note, but doesn't convert to plain text when I try to edit the content.
Before you use the Jodit contents in a non-Jodit environment, you'll need to use a utility that converts the HTML tags.
One library that does this already is html-to-text.
On the backend, the actual code is as simple as
const { conversion } = require('html-to-text');
let adjustedText = conversion('<p>Your string of HTML code here</p>');
... unless you want to feed optional parameters to the conversion() function, like wordwrap. See html-to-text documentation for that.
I am fetching data from an api and it contains image urls. When i try to display the images it is not showing any picture. when i logged using console.log(service.coverImage), i was able to display the image urls. for example
https://s3.eu-west-2.amazonaws.com/ererf3wery/Hillside Plaza Hotel 5cdebeaf34157a0026526f0d/providerImage/hph.jpeg
You notice the link breaks and it doesn't go to the image directly, now i cannot change this in the database. How can i solve this in Nodejs to replace the places so that it becomes complete.
I have used methods like replace and encodeURIComponent but not helping
thank you in advance
The image url looks fine, if you are not able to see the image in web page, try to remove protocol from it.
url = url.replace("https:", "");
If that doesn't work, then try removing spaces as you wanted:
let url = "https://s3.eu-west-2.amazonaws.com/ererf3wery/Hillside Plaza Hotel-5cdebeaf34157a0026526f0d/providerImage/hph.jpeg";
url = url.replace(/\ /g, "%20");
console.log(url)
I am trying to make a image editor like yourquote.
I am using fabric js for editor.
I am doing it on website not app.
I have used 2 different url. On first url I want user to enter text and on second url I am letting the user decorate the text and make it image.
My regular text is working as I am posting the text to url, but when I am maintaining line break it is not working.
How can it be possible ?
Its solved
I added '\n' after each line break and sent the final string to next URL and the fabric js canvas loaded exact what I wanted.
I want to display an image on a webpage on the basis of what the user enters in a form. I have the form defined in abc.jade, and in abc.js I store everything from the form, and generate the image's url and store it in a variable map_img on the basis of the form. How do I set an image's source in jade to point to map_img URL?
abc.js:
sales.save();
markers = [{ 'location': sales.location }]
var gm = require('googlemaps');
var map_img = gm.staticMap(sales.location, 16, '500x400', false, false, markers);
In general, what is the best way to manipulate fields in an HTML/Jade document from node/express?
Im not sure if i get your question right...
There are severals ways to send data.
Mostly described here: http://jade-lang.com/reference/
I usually use #{img_map} or in the case you have to get pure html its better to use !{img_map_html_desc}.
Also, the alternative variant, create #temp div, send data there. Than on the front end js(on window.onload) you can get that data and store to the variable. Don't forget to clear the #temp div after you dont need that anymore.
Once i've used side front-end js module and couldnt find better sollution, than this. Cause that module waited for window.onload, and than started to load itself...
I'm fairly new to Orchard and I'm wondering about the "best" way of building a basic list of documents with a download link?
Say the scenario is this, I want to make a list of newsletters, the news letter are in PDF format and the users should be able to download then straight from the list view.
An admin, should easily be able to add a new newsletter and it should turn up in the list.
My current train of thought is to, all through the dashboard,
create a content type "Newsletter" with a title field and a Media picker field, using the media picker field to upload the PDF file.
Then create a query, with the filter on Content type "Newsletter"
Create a projection pointing to the query
However, this only gives me a list of content items, showing their title as links back to the actual content item.
I've tried adding a layout to the query and set it to display properties instead of content. By doing that I can get a list where I can control the "output" a bit more. And I've gotten it to list the title and by doing a Rewrite and putting in the MediaPicker.Url, it also displays the URL in the list. This is all good but here I get stuck..
As the MediaPicker.URL outputs the url in the format like ~/media/default/xyz/filename.pdf, I cant just put it into a a href, it doesn't give a correct download link to the file.
Soo, question is, am I thinking and doing this totally the wrong way or am I missing something obvious? All ideas and suggestions and more then welcome.
Use or adapt the following template override in your theme:
#{
var url = Model.ContentField.Url;
}
#if(Model.ContentField.Url != null) {
if (url.StartsWith("~/")) {
url = Href(url);
}
<div class="media-picker-field attachment-pdf">
<span>download</span>
</div>
}
Modify the text as needed. This template was a Fields.MediaPicker-PDF.cshtml that was used for a media picker field named PDF.