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
Related
I've recently started a new job at an Audio Visual company and they've asked me to develop an application that allows users (without authentication) to upload images to a display page and have it automatically scroll through.
I chose the only carousel I've ever found helpful but my issue is that the landscape images are not vertically aligned with the portrait images.
My code is set up so that the uploaded image is sent through to a database and then retrieved to display automatically in the carousel so each image has it's own individual div tag.
The page itself won't load without database connection and doesn't work in JSFiddle because of the PHP elements within.
Also here are screenshots of my issue:
Image 1 displaying portrait image at full height
Image 2 displaying landscape image at top of the page
I want image 2 to display in the center of the page and everywhere I look for the correct information I don't seem to find what I'm looking for.
Please help me, I would very much appreciate it!
AlexJamesDean.
You can add position to image div
.autoplay{position: relative;}
#img_div {
width: auto;
height: auto;
postion: absolute;
top: 50%;
transfrom: translateY(-50%);
}
I am working on a database project and have hit a cosmetic snag.
I have a database that loads profiles into arrays for displaying using a php while loop, so it is set to display the content of a database and allow for adding with no additional coding.
Four of the fields are picture upload locations, as part of the upload process is the ability to upload up to 4 different images, which are then saved in a directory and their path saved to the profile database.
Here is my problem however, not all the images are the same size (as in width and height). I have my code set up designating a specific area to an image to stop it filling up the screen, but rather then scale it, the code simply squishes or stretches the dimensions. So a 80*120 image being resized is just being distorted.
This is the section of code responsible for calling the image into the field.
<div id="wb_Text2" style="position:absolute;left:10px;top:<?php echo $imagepix ? >;width:100px;height:120px;z-index:5;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:15px;"><img src="uploads/<?php echo $productpicture ?>" alt="" style="width:70px;height:120px;" ></span></div>
The first section is a cosmetic alignment of the container, the second imports the image and formats it accordingly.
I am using the style= section for sizing but its obviously the wrong approach and I cant find any useful info on what exactly I'm looking for as half the battle is knowing what to ask!
The end result is to be able to scale an image so various requirements by simply changing a ratio on the output field such as altering style to style="width:140px;height:240px
I hope this makes sense and someone has some insight.
Thanks
You could use max-height and max-width instead of height and width, and apply a black background to the image container. You would also have to center the image in the container both horizontally and vertically. Do this by setting the line-height of the container equal to the height and using text-align.
<div id="image-container" style="width: 70px; height: 120px; text-align: center; line-height: 120px; background: black;">
<img src="image.jpeg" style="max-height:120px; max-width: 70px; display: inline-block;" />
</div>
Of course you should put the style tags into a stylesheet instead.
If you would rather crop the image instead of having it fit in with a black background, let me know because this can also be done with CSS and maybe a bit of JavaScript.
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.
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 am trying to compile a pinterest style layout for my site. And have accomplished it, other then the load times. I have set about to get the load of my site as fast as possible.
To do so, I have come across the lazy load script (as can be found here: http://www.appelsiini.net/projects/lazyload) which essentially loads the site first, and then the images, thus speeding up the usability of the site on load, similar to what pinterest does..
The issue I have been having is, while the script works, because we have a box around each image to style and present it, and undefined sizes on the images, the layout comes out all messed up every time. Essentially, the image sizes are always surprising the layout once they load.
What is the best way about going about fixing this problem? What does pinterest do? Similar to them, we have images of all shapes and sizes, that will be added dynamically to our site by users via both php and javascript, so simply figuring out all the sizes of each image ourselves is not something we can do.
Thanks for your help!
Pinterest most likely has measured the images and stored the image dimensions in there database. Then simply output the height within the img tag, width is not dynamic as its set by CSS
First a set rule in css controls the width of the image (this wont change):
.pin .ImgLink img
{
max-width: 192px;
opacity: 1;
}
.PinImageImg
{
min-height:75px;
background-color:#f2f0f0
}
and then the HTML markup of each img tag controls the height (this changes for each image):
<img src="http://media-cache-ec5.pinterest.com/upload/177118197817236677_8RujApQy_b.jpg" alt="Moon Goddess Gown by Halston Heritage" data-componentType="MODAL_PIN" class="PinImageImg" style="height: 288px;" />
This way there is no popping of layout as each image is loaded by javascript.