I have set up a Gatsby blog that uses md files to create pages for each blog post. I want to use Narrative.so (photo layouts) for the content of each blog. Using their software, it generates HTML for you to paste into your site's page.
Would this be possible in Gatsby?
Here is the HTML it gave me as an example:
<div class='nar-root' data-post-id='9ab2885d-f0e8-4d00-9c59-135ab04fc384' style='p {text-align:center;opacity: 0.0;animation: nara 0s ease-in 2s forwards;}#keyframes nara {to {opacity: 1.0;}}' >
<img style="width:100%;" src="https://content1.getnarrativeapp.com/static/9ab2885d-f0e8-4d00-9c59-135ab04fc384/featured.jpg">
<noscript><p>Your Narrative blog will appear here, click preview to see it live.<br>For any issues click here</p></noscript>
<script type="text/javascript" src="https://service.getnarrativeapp.com/core/embed/r/9ab2885d-f0e8-4d00-9c59-135ab04fc384.js"></script>
</div>
Yes, it is possible. Here is one possiblity:
Add MDX support to your blog
With MDX you can embed React components into your markdown file.
// markdown file
import { NarrativePhotoLayout } from '../components/NarrativePhotoLayout'
# Here’s a NarrativePhotoLayout
The NarrativePhotoLayout is rendered inside our MDX document.
<NarrativePhotoLayout/>
Build a React component that contains your HTML. This answer tells you how.
Embed your React component in your blog post.
Related
I have a couple objects created using the React-Quill editor and some contain images while others contain videos. The ones containing images are rendered back in my app without issue but the ones with videos end up rendering while ignoring all video tags.
For example this is one set of data:
<p>Some text</p><video class="quill-upload-video" src="https://res.cloudinary.com/hidden-bucket/video/upload/v1670504722/InspirationMedia/hvnctjls3jpglucerfso.mov" controls="true" controlslist="nodownload" width="100%"></video><p>Some more text</p>
Quill renders both paragraph tags and absolutely ignores the video tag as though it isn't there. This is not an issue for images.
Is there an explanation for this? How can I troubleshoot the problem?
In my React app I have a component which embeds an Instagram post.
It renders the following HTML structure:
<div data-testid="instagram"><iframe class="instagram-media instagram-media-rendered" id="instagram-embed-3" //etc....
I am using React testing library.
How do I write a test that checks if the iframe element exists and e.g with the CSS class instagram-media?
For accessibility purposes, it is recommended to always use the title attribute on an <iframe> to label/describe its content.
<div data-testid="instagram">
<iframe title="Instagram embed" className="instagram-media ..." id="instagram-
embed-3"></iframe>
</div>
You can then test if the <iframe> element exists with the getByTitle query.
expect(screen.getByTitle('Instagram embed')).toBeInTheDocument();
I am building blogging application. and i use summernote for write a blog content.
Blog content are stored in database like this :
<b>hi</b>.....<b>share if you like</b>
But when i fetch and try to disply blog content it will display same html code
ex:
<b>hi</b>.....<b>share if you like</b> insted of hi ..... share if you like.
Now how to display blog content with all styles?
Snap of table:
Snap of html output:
You can use dangerouslySetInnerHTML to render html content.
<div dangerouslySetInnerHTML={{__html: "<p>your html content</p>"}}></div>
Here's the background:
I want to be able to save rich text blog posts to Firebase to then display them, including code snippets, on a Posts page.
Right now, I'm simply saving a single string of html to Firebase, retrieving that per post, and setting it with dangerouslySetInnerHtml. I'm the only one adding posts.
However, this means that I lose tabbing information when displaying code snippets in blocks. I don't think I can use solution since I'm using dangerouslySetInnerHtml: Formatting code with <pre> tag in React and JSX
Any tips on how to store, retrieve, and display rich text using React and Firebase? Thank you for your help.
I was able to use the following to convert rich text to html, and then minify it:
https://4html.net/Online-HTML-Editor-Text-to-HTML-Converter-870.html
http://minifycode.com/html-minifier/
Implementing EasyCaptions on my WordPress blog and I’ve hit a brick wall. Any help would be appreciated. I’m using SWFobject to embed videos. I’ve pasted this code: http://pastebin.com/0ZMSr0Bz into my header.php and this embed code in my posts:
<video id="video-html5" width="480" height="320" controls="controls"
source src="[url to video]" />
</video>
The problem is the implementation only works for the video defined here:
var flashvars = { file:'[video url]', ...
All other videos embeds do not work. I've tried using a playlist but that did not solve the problem. How do I solve this? Do I need additional JS or PHP code to add to the file parameter?
[edited post]
I just re-read your question and looked at the pastebin. The video URL you're using is an HTML file: http://vidbull.com/embed-iqkhawkkx1rn-640x318.html. You can't load an HTML file as a video.
Try it again using a proper video URL (MP4, F4V, OGG, etc).
-- UPDATED based on comment from OP --
The issue is that you're hard-coding the video URL in your WordPress header. What you'll need to do is use a variable instead. I suggest using WordPress' "shortcode" API, which will enable you to pass variables via a custom shortcode.
Define your shortcode in WordPress, something like:
//[easycaptions]
function embed_easycaptions( $atts ){
//your custom PHP code here, using the passed $atts
}
add_shortcode( 'easycaptions', 'embed_easycaptions' );
Then when authoring your WordPress blog post, you add the custom shortcode where desired, such as
[easycaptions url='http://localhost/wordpress1/wp-content/uploads/2012/10/Sheldon-in-a-Dress.mp4']
Check out the Shortcode API page for instructions and examples. It's a pretty powerful system.
The solution lies in NOT hard-cording the video url in the header.php. Here is what worked to solve this. I first created a custom field in wordpress, named it thinema, and then set the value of the custom field to be the embedded video url in the post. Then edited this code into my header.php
flashvars = { file: '<?php echo get_post_meta(get_the_ID(), thinema, true); ?>'...
I've updated the code in pastebin. Hope this is of use to someone! You can view the implementation here.