I am not able to share image on twitter using react-share. My code is :
<TwitterShareButton
url={window.location.href}
title={props.data.breadcrumb}
imageURL={props.data.product_info.image_path}
children={<TwitterIcon size={32} round={true} />}
/>
image is being loaded from api.
i have changed imageURL to media and it is still not working.
Can i share image or not?
Seems like you could share this as a base64 url from this response https://github.com/react-native-community/react-native-share/issues/119 which is pretty cool and easy.
So basically set the url prop:
url: "data:image/png;base64,<base64_data>"
Related
I was trying to implement a Facebook share button using dynamic meta tags in react, to share articles from my website. Unfortunately, I'm having a hard time showing the image card of the article in the Facebook post - it only shares the URL. However, when I replace the URL meta tag with the URL of the image for example www.mywebsite/Images/myImage.jpg, Facebook shows the image as wanted. I was wondering if there is a way to still use the URL of the image, but redirect this URL to that of the article every time it's clicked.
If anyone knows the answer to this, I'd appreciate some help a lot!
This is how I'm declaring my URL for the url meta tag:
const currentURL = window.location.href;
const from = window.location.href.indexOf('image');
const fullurl = window.location.href.slice(from + 6);
...
<meta property="og:url" content={fullurl}/>
<meta property="og:image" content={fullurl}/>
...
<FacebookShareButton className="mt-5 mb-3" windowWidth="800"
url={`${fullurl}`}
>
<FacebookIcon size={32} round={true} />
</FacebookShareButton>
That is, I'm trying to find a way to redirect from fullurl to currenturl every time it's clicked, but still, use it for the meta tags.
I'm building a website where I get a blog post from an API call. The body of the post is just html code mixed with text, images and even objects like youtube videos (it is build with ckeditor in the back). Everything is working as expected but I would like to make images clickable. Clicking the image, would open a modal in lightbox style.
I was considering extracting all the images (if any) from the body and making a gallery at the bottom of the post. But I think that would be more elegant just making images clickable and opening the dialag without showing them twice along the post.
An example of the response:
body: "<p>this is a text with some images: <img src='path/to/image1' /> and <img src='path/to/image2' /> how to make them clickable in React?</p>"
That body is rendered this way:
<GridItem xs={12} sm={8} md={8}>
<div dangerouslySetInnerHTML={{ __html: text }} />
</GridItem>
You can use the onClick event in your image:
<img src='path/to/image2' onClick={() => {aFunction}} />
ps: if you want to, you can add a className to put a cursor:pointer too.
I think this might help you
first of all, you need to cover the content of blog post (returned HTML from API call) into one single wrapper div.
after that, you can need to get all the elements of blog post using javascript like the example below
const elements = document.getElementById("wrapper").elements
now you can iterate throw all elements in blog post including the images
elements.forEach(item => {
if (item.type == "img")
// do this
})
I will edit the second code example in a few minutes
I am using an image slider in my react native app, currently I am using web links of images to show the slider, but I want to use a custom image like my own images that I have in my assets folder. how can I use these images please help here is my code.
<ImageSlider
showsHorizontalScrollIndicator={false}
style={styles.imageOpacity}
images={[
"https://placeimg.com/640/640/nature",
"https://placeimg.com/640/640/people",
"https://placeimg.com/640/640/animals",
"https://placeimg.com/640/640/beer"
]}
/>
I want to use my custom images instead of this.
You need to import images from assets and then pass it to component.
import Img01 from 'path-to-img1.png'
import Img02 from 'path-to-img2.png'
[...]
const images = [Img01, Img02]
[...]
<ImageSlider
showsHorizontalScrollIndicator={false}
style={styles.imageOpacity}
images={images}
/>
React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:
<Image source={require('./my-icon.png')} />
A complete guide present here
Or you can do this:
<ImageSlider
showsHorizontalScrollIndicator={false}
style={styles.imageOpacity}
images={[
require('../assets/img/art_1.png'),
require('../assets/img/art_2.png'),
require('../assets/img/art_3.png'),
]}
/>
Let me know if it worked.
Source
share` libraryto use Facebook share button with react and this is the code
render(){
var url = `http://localhost:3000/${this.props.match.params.id}/${this.props.match.params.name}`
return (
{/*some other codes*/}
<FacebookShareButton url={url} quote={"გააზიარე"} className="share">
<FacebookIcon size={32} round={true}/>
</FacebookShareButton>
)
}
but it does not work, I mean it opens facebook window but showing some error
about domain name, i think this problem is common, because i did everything according to documentation. what is problem?
You cannot share a localhost link, that link is only available on your own computer. Shared URLs need to be accessible by Facebook in public.
I've been trying to view the imgur format gifv for a while but i just cant seem to get it working.
Been testing with img tags, video tags, iframes. So far only the iframe seems to work - but i cant resize the iframe due to browser limitations.
<img src="http://i.imgur.com/rCkPdZm.gifv" /> - nope
<video src="http://i.imgur.com/rCkPdZm.gifv"/> - nope
Any tips on how to display for example http://i.imgur.com/rCkPdZm.gifv
Thanks!
A gifv is not an image format, it's a made-up "extension" to make the landing page look like you have opened an image link directly, while being able to stream video instead of a much larger gif file. Use the "view source" option and go find out! :)
You can right-click on the gifv "image" and the browser should give you an option to "copy video url", which you can then use in a <video> element:
<video src="http://i.imgur.com/rCkPdZm.mp4" />
https://jsfiddle.net/xc4cqoh5/
In this context it doesn't matter if it's React or just plain HTML website, the solution is the same: you need to grab the URL of the actual video being played, not the gifv page that embeds it. It seems you can just replace the .gifv extension with .mp4. To make this answer relevant to the reactjs tag here's an example:
const Player = props => {
let videourl = props.videourl.replace('.gifv', '.mp4');
return <video src={ videourl } />;
};
ReactDOM.render( <Player videourl="http://i.imgur.com/rCkPdZm.gifv" />,
document.getElementById('container'));
http://jsfiddle.net/69z2wepo/47077/