I have a an issue when sharing an article to Facebook. Facebook pick a random thumbnail from my images. The issue is Facebook wants a 200px X 200px thumbnail and my feature image size happens to be 150x150. The layout of the site is designed to fit 150x150 so I do not want to make the image any bigger. As a test I have tried 200x200 and fb pulls the correct image.
However when I add a 200x200 image in the post facebook grabs the correct image. I don't mind adding the image to the post as I can do text wrap around and everything looks ok on the desktop site. However on the 'WPTouch pro' mobile theme I am stuck with a big image on the post.
Can I hide the image from the mobile page or both ??
Any work around solution are welcomed...
you can add below code
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|tre
//hide image
Go ahead and give the image a class then hide it set the display to none through css.
For example: <img src="http://img.jpg" class="hide"/>
Then in your css
.hide{
display: none;
}
If you want to only hide it when your in wp-touch then you have to see if wp-touch attaches a specific class to the body which I quite sure it does. If you find that out you can attach the class to .hide and then it will only hide the image on wp-touch.
Related
I'm using Ckeditor and Responsive filemanager. I want that uploaded images were responsive. But when I upload an image, and see it on the article page, it isn't responsive. Even the image goes beyond div. How can I make it responsive?
I find the solution. When adding image to ckeditor just need in ckeditor property window. Instead of pixels use percent.
Screenshot
I have a question about wordpress slider plugin Cyclone2.
Problem is that when I upload and add an image to slider, it outputs incorrect src url for img tag on site page, like adding slider width and height to image url..
Ex. I upload image Champagne-All-Bottles.jpg.
In admin panel image loads successfuly: /wp-content/uploads/2015/12/Champagne-All-Bottles.jpg
but on site page it adds a width and height to img url like: /wp-content/uploads/2015/12/Champagne-All-Bottles-1200x400.jpg
HTML admin panel(correct):
HTML output on site page(incorrect url):
This plugin probaly makes an 1200*400 picture copy of the one you are giving because somewhere in the settings you say that the slider should be 1200*400 pixels. So the plugin is transforming your picture to the dimensions of the slider. Is there somewhere in the settings of the plugin something where you can adjust the dimensions?
A lot of WordPress plugins do this, and even WordPress itself is doing this. Making different dimension copies of images you upload.
EDIT: I searched the plugin you are talking about and in I think in basic settings the "width" and "height" are there so you can change the dimensions. But one thing, all images uploaded will get the same dimensions, thats how this (and a lot of other) WordPress plugin works.
Note: if you set "Width Management" to fixed, the plugin probably stops resizing your image, can you give it a try?
-Resize Images?
-No, shut up!
#TotalCare, thank you for your help :)
I can easily get a Youtube image thumbnail with the links described here: How do I get a YouTube video thumbnail from the YouTube API?
But all these thumbnails are in 3:4 format (or something close) even though the video itself is in some other format. Then some black horizontal bars are just visible at the top and bottom of the picture.
I need an image in 9:16 format (which is my video format) without black bars. Is that possible to retreive?
Update
It appears that also the Youtube video itself has black bars in top and bottom even though there are no black bars on the video on the Youtube page.
Any ways to simply show both thumbnail as well as video in correct format?
Update
I found this: Removing black borders 4:3 on youtube thumbnails
The asker wants to remove the black top and bottom bars. The best answers here are to adjust the height and "hide" the black bars by manual correction. Some of the comments here below also suggest that.
Does this mean that it's not possible to avoid?
YouTube offers images that don't have the 4:3 ratio black strips. To get a 16:9 video thumbnail with no black strips, try one of these:
http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg
The first one mqdefault comes as a 320x180 pixel image.
The second one maxresdefault comes as a 1500x900 pixel image, so it would need resizing to use as a thumbnail. This is a nice image but it isn't always available. If the video is of a low quality (less than 720p I'd imagine, not exactly sure) then this 'maxresdefault' becomes unavailable. So never rely on it.
Per the API documentation:
The tag that has a yt:name attribute value of mqdefault identifies a 320x180 (16:9) thumbnail image. This image does also does not have a timestamp and could be from any point in the video.
So there's an image that's available for every video resolution (that I've tested, at least) that is in 16:9 format. Of course, it isn't the biggest image on the planet...
If the size is an issue, and you require something bigger, than the best option really is to choose one of the available options that is always in 4:3 ratio, and hide the excess using CSS. YouTube itself has done this for a long time. They utilize multiple thumbnail sizes across their site now, including mqdefault.jpg.
It's really easy to hide excess width and/or height from an image when all the dimensions are known. Here is an example using a 4:3 image from YouTube with the black bars hidden, leaving a 16:9 result. The CSS is commented for your enjoyment.
After searching the net a while for fix of this issue I came up with nothing, I think I have tried everything and nothing solved my problem. Then driven by my logic I just wrapped the iframe of the embedded youtube video in one div set overflow: hidden; to this div and made it's height 2px smaller then the iframe height (on my video there was black border in the bottom).
So the wrapper div is smaller then the iframe and with positioning it over the video you can hide the black borders you don't want.
I think that this is the best solution from everything I have tried so far.
From this example below try embedding just the iframe and you will see small black border at the bottom, and when you wrap the iframe in the div the border is gone, because the div is overlapping the iframe and it's smaller then the video, and it has overflow: hidden so everything that goes out of the div dimensions is hidden.
<div id="video_cont" style="width: 560px;
height: 313px;
overflow: hidden;">
<iframe id="the-video" class="extplayer" width="560" height="315" src="https://www.youtube.com/embed/EErx017kDHQ?&autoplay=0&rel=0&fs=0&showinfo=0&controls=0&hd=1&wmode=transparent&version=2;yt:quality=high;" frameborder="0" allowfullscreen></iframe>
</div>
In my case the border was with about 2px height so I made the wrapper div 2px smaller in height to hide the border, in your scenario if the border is on the top of the video or on the sides and/or with different dimensions, you have to make different dimensions for the wrapper div and position it good so it overlaps the video where the borders are and with overflow:hidden; the borders are hidden.
Hope this will help.
Officially YouTube embed code dimensions for proper usage in websites is 560px wide and 315px high.
while, youtube thumbnail size you have to use should be 1280x720 pixels in dimension, It is the HD size of thumbnail officially used by YouTube, this size of thumbnail will help you to embed videos in 9:16 format and users will see your thumbnail properly and text will remain clear to viewers.
Bonus: you can also download youtube video thumbnails using the website below.
https://www.youtubethumbnaildownloaderonline.com/?id=5NevuA7AaVE
only replace the youtube video ID (5NevuA7AaVE) with the code after (=) sign and you can check out different youtube thumbnail sizes available of videos. it will help you better understand 9:16 and 3:4 thumbnail sizes. it will help users to read content of image and eventually conversion in video views.
I've searched for ages for a solution, but I can't really find the solution to fit my needs.
So here's the story. Im creating a website and I really want to add watermarks to the downloaded images.
Yesterday I was browsing in a website called 9gag. If you haven't heard this website before, its a comic based website, and I found out that when you download an image, or access an image from anywhere else except their website, there's a 'watermark/banner' at the bottom of the image.
For example take this image:
link , notice no banner at the bottom of the image.
If you right-click, 'Copy image URL' , you get this link: image . See the banner now?
Im very confused on how they do it, and it would be great if we could use this on our websites.
Anyone with any ideas? Is it using any type of CGI?
P.S: I Wasn't sure what tags to add, So if anyone knows a better tag combination, please do edit it.
This effect is just a css trick. The image itself actually contains the watermark at the bottom, but the image tag is wrapped in a block that hides (overflow:hidden) the bottom 42 pixels of the image when it's being displayed in the page.
There are other things you can do that are more sophisticated (for instance, have the image served via a php script and comparing the http referer
header("content-type: image/jpeg");
if (!isset($_SERVER['HTTP_REFERER'])){die("alert('Restricted Access!');");};
$_u=parse_url($_SERVER['HTTP_REFERER']);
$_u=preg_replace("/(www.)/i","",strtolower($_u['host']));
$_i=$_SERVER['HTTP_HOST'];
$_i=preg_replace("/(www.)/i","",strtolower($_i));
if ($_u != $_i){
//handle this with gd or redirect
}
) but this will only work if someone tries to load the image from a different website or if they go to the image url... generally save-as will save the image from the browser's cache, so the css trick might be the best option you have (or a combination of these options). Fundamentally keep in mind that anything you show on the web can be captured (the code above isn't foolproof, and you can always prtsc).
GD library of php will help you doing that.
You'll need to create a new image using imagecreate function but adding some more "space" to the original size. Example: if I have an image of 200x200 (which you can retrieve using gd functions too) you'll need to create a 200x220px image using that function
Fill the new image with that gray color using imagefilledrectangle function
Copy the original image into the new one using imagecopy
Set the header's content type to image/type png gif etc..
Output to the image using imagepng or any other function that has the format you want.
I've had success with JQuery Watermark:
Jquery Watermark
I have managed to pull out these images using PHP and JSON with Facebook's graph API. This is the URL I used.
I only want 3 pictures from the album but I want all the pictures to be displayed in a standard size of 200x175px without distorting the pictures. How can I achieve this? (like displaying pictures in thumbnails in a Facebook album). This is my testing page:
What if you display the image inside a div with fixed height and width with overflow: hidden. The image won't be resized but at least all will be showed in the same size
I am just thinking about this on the fly here, but try styling the "fbimg" class.
Like so:
.fbimg {
height: 200px;
}
If the images are going to be different (different heights and widths)...then I don't believe that you can keep them the same height and width without distortion. But if someone learns a trick how to do that...I want to learn it too. ;)
My solution was to add a:
style="max-width: 100px; max-height: 100px;"
to the "img" output of my parser. You can see all the thing in my github: https://github.com/kyuumeitai/Social-buzz/commit/0baf3c5a86e52e64e04796bdcf22a951eeaff291