I'm using Contentful for storing content for articles and React markdown for parsing and it works very well. But i don't know what what exat to do when it comes to alignment of images like two images side by side.
Is there there a way to see in the markdown how many images are renderad? Then i could do alignment based on how many images there is in the markdown
You could style images using the next-sibling selector.
Perhaps something like this:
img + img { /* styles for any image directly after another image */ }
You can insert some HTML (which is not the ideal solution) in the markdown like <img='img' class='align-left' /> you can also have a separate field of type asset list and you get these image separately and add them to your HTML
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?
As the title says I have multiple images and I want to keep them in a json where it stores the url and from there I want to get image data accordingly.
Here is my codesandbox, I am not sure why it is not showing any images after going through a bunch of answers here.
https://codesandbox.io/s/confident-galois-2pn52
Seems like you forget one level
images
in JSON. Code of IMG in component should looks like this:
<img src={data.images.url} alt={data.images.name} />
You should use the JSON like
<img src={`${data.images.url}`} alt={data.images.name} />
Please update your code. It will start showing the images.
Your JSON structure has images object in it which you are not consuming.
I need to remove the part of image, css and js urls so that I would keep everything that goes after "."
For example,
https://test.com/en/images/footer-inst-icon.svg
I would like to have only "svg" in another column
Here is the link to the file https://docs.google.com/spreadsheets/d/1VJPQzkgZCTaKCgRbstVFDCwycZFfCbSL1ENXPYcioNo/edit#gid=0
Try below formula (see your sheet)-
=ArrayFormula(TRIM(RIGHT(SUBSTITUTE(A2:A,".",REPT(" ",100)),100)))
You can also use REGEXEXTRACT() like
=ArrayFormula(REGEXEXTRACT(A2:A,"\w+$"))
I grab content from a CMS via Gatsby. Inside the markup there are placeholders which should be replaced with React elements.
So I get sth like this:
let content = '<span>Hello World [placeholder]!</span>';
and in React I want to change it to sth like this (where the markup for the tooltip comes from a React element):
let content = '<span>Hello World <div class="tooltip">Important warning</div>!</span>';
The final html with the replaced elements should be dumped into the DOM using dangerouslySetInnerHTML.
I tried using react-string-replace:
reactStringReplace(content, '[placeholder]', () => (<Tooltip />));
but it gives me an array containing a mix of strings and React elements that can't be concacenated without breaking the HTML structure.
What would be a good approach to tackle this issue? Or am I wrong using placeholders in the CMS altogether?
i found a really good npm package that provides this functionality and much more: https://interweave.dev/
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/