Given an IMDB movie id, how do I programmatically get its poster image? - imdb

movie id tt0438097 can be found at http://www.imdb.com/title/tt0438097/
What's the url for its poster image?

Check out http://www.imdbapi.com/, It returns Poster url in string.
For example, check http://www.imdbapi.com/?i=&t=inception and you'll get the poster address: Poster":"http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw##._V1._SX320.jpg"
Update: Seems like the site owner had some arguments with IMDB legal staff. As mentioned in the original site, new site's address is http://www.omdbapi.com/

The best solution is to use tmdb.org :
use your imdbid in this api url after find/:
https://api.themoviedb.org/3/find/tt0111161?api_key=__YOURAPIKEY__&external_source=imdb_id
Retrieve the json response and select the poster_path attribute:
e.g. "poster_path":"/9O7gLzmreU0nGkIB6K3BsJbzvNv.jpg"
Prepend this path with "http://image.tmdb.org/t/p/w150", and you will have the poster URL that you can use in an img tag :-)
omdbapi works, but I found out you cannot really use these images (because of screen scraping and they are blocked anyway if you use them in an img tag)

As I'm sure you know, the actual url for that image is
http://ia.media-imdb.com/images/M/MV5BMTI0MDcxMzE3OF5BMl5BanBnXkFtZTcwODc3OTYzMQ##._V1._SX100_SY133_.jpg
You're going to be hard pressed to figure out how it's generated though and they don't seem to have a publicly available API.
Screenscraping is probably your best bet.
The picture seems to generally be inside a div with class=photo and the name of the a tag is poster.
The image itself is just inside the a tag.

The URL is a random string as far as I can tell.
It can still be easily retrieved. It is the only img inside the anchor named poster.
So, if you are reading the source, simply search for <a name="poster" and it will be the text following the first src=" from there.
However, you will need to keep the screen scraping code updated because that will probably change.
You should also be aware that the images are copyrighted, so be careful to only use the image under a good "fair use" rationale.

If a thumb is enough, you can use the Facebook Graph API:
http://graph.facebook.com/?ids=http://www.imdb.com/title/tt0438097/
Gets you a thumbnail:
http://profile.ak.fbcdn.net/hprofile-ak-ash2/50289_117058658320339_650214_s.jpg

I know that it is way too late, but in my project I used this:-
Use omdbapi, Lets take example of Inception, use www.omdbapi.com/?t=inception it will return a json object.
In that json object get the "Poster" object, it contains the poster for the image.

You can use imdb-cli tool to download movie's poster, e.g.
omdbtool -t "Ice Age: The Meltdown" | wget `sed -n '/^poster/{n;p;}'`

Be aware tough, that the terms of service explicitly forbid screenscraping. You can download the IMDB database as a set of text files, but as I understand it, the IMDB movie ID is nowhere to be found in these text files.

You can use Trakt API, you have to make a search request with the imdb ID, and the Json result given by Trakt API contains links for two images of that movie (poster and fan art)
http://trakt.tv/api-docs/search-movies

I've done something similar using phantomjs and wget. This bit of phantomjs accepts a search query and returns the first result's movie poster url. You could easily change it to your needs.
var system = require('system');
if (system.args.length === 1) {
console.log('Usage: moviePoster.js <movie name>');
phantom.exit();
}
var formattedTitle = encodeURIComponent(system.args[1]).replace(/%20/g, "+");
var page = require('webpage').create();
page.open('http://m.imdb.com/find?q=' + formattedTitle, function() {
var url = page.evaluate(function() {
return 'http://www.imdb.com' + $(".title").first().find('a').attr('href');
});
page.close();
page = require('webpage').create();
page.open(url, function() {
var url = page.evaluate(function() {
return 'http://www.imdb.com' + $("#img_primary").find('a').attr('href');
});
page.close();
page = require('webpage').create();
page.open(url, function() {
var url = page.evaluate(function() {
return $(".photo").first().find('img').attr('src');
});
console.log(url);
page.close();
phantom.exit();
});
});
});
I download the image using wget for many movies in a directory using this bash script. The mp4 files have names that the IMDB likes, and that's why the first search result is nearly guaranteed to be correct. Names like "Love Exposure (2008).mp4".
for file in *.mp4; do
title="${file%.mp4}"
if [ ! -f "${title}.jpg" ]
then
wget `phantomjs moviePoster.js "$title"` -O "${title}.jpg"
fi
done
Then minidlna uses the movie poster when it builds the thumbnail database, because it has the same name as the video file.

$Movies = Get-ChildItem -path "Z:\MOVIES\COMEDY" | Where-Object {$_.Extension -eq ".avi" -or $_.Extension -eq ".mp4" -or $_.Extension -eq ".mkv" -or $_.Extension -eq<br> <br>".flv" -or $_.Extension -eq ".xvid" -or $_.Extension -eq ".divx"} | Select-Object Name, FullName | Sort Name <br>
#Grab all the extension types and filter the ones I ONLY want <br>
<br>
$COMEDY = ForEach($Movie in $Movies) <br>
{<br>
$Title = $($Movie.Name)<br>
#Remove the file extension<br>
$Title = $Title.split('.')[0] <br>
<br>
#Changing the case to all lower <br>
$Title = $Title.ToLower()<br>
<br>
#Replace a space w/ %20 for the search structure<br>
$searchTitle = $Title.Replace(' ','%20') <br>
<br>
#Fetching search results<br>
$moviesearch = Invoke-WebRequest "http://www.imdb.com/search/title?title=$searchTitle&title_type=feature"<br>
<br>
#Moving html elements into variable<br>
$titleclassarray = $moviesearch.AllElements | where Class -eq 'title' | select -First 1<br>
<br>
#Checking if result contains movies<br>
try<br><br>
{
$titleclass = $titleclassarray[0]<br>
}<br>
catch<br>
{<br>
Write-Warning "No movie found matching that title http://www.imdb.com/search/title?title=$searchTitle&title_type=feature"<br>
} <br>
<br>
#Parcing HTML for movie link<br>
$regex = "<\s*a\s*[^>]*?href\s*=\s*[`"']*([^`"'>]+)[^>]*?>"<br>
$linksFound = [Regex]::Matches($titleclass.innerHTML, $regex, "IgnoreCase")<br>
<br><br>
#Fetching the first result from <br>
$titlelink = New-Object System.Collections.ArrayList<br>
foreach($link in $linksFound)<br>
{<br>
$trimmedlink = $link.Groups[1].Value.Trim()<br>
if ($trimmedlink.Contains('/title/'))<br>
{<br>
[void] $titlelink.Add($trimmedlink)<br>
}<br>
}<br>
#Fetching movie page<br>
$movieURL = "http://www.imdb.com$($titlelink[0])"<br>
<br>
#Grabbing the URL for the Movie Poster<br>
$MoviePoster = ((Invoke-WebRequest –Uri $movieURL).Images | Where-Object {$_.title -like "$Title Poster"} | Where src -like "http:*").src <br>
<br>
$MyVariable = "<a href=" + '"' + $($Movie.FullName) + '"' + " " + "title='$Title'" + ">"<br>
$ImgLocation = "<img src=" + '"' + "$MoviePoster" + '"' + "width=" + '"' + "225" + '"' + "height=" + '"' + "275" + '"' + "border=" + '"' + "0" + '"' + "alt=" +<br> '"' + $Title + '"' + "></a>" + " " + " " + " "+ " " + " " + " "+ " " + " " + " "<br>
<br>
Write-Output $MyVariable, $ImgLocation<br>
<br>
}$COMEDY | Out-File z:\db\COMEDY.htm <br>
<br>
$after = Get-Content z:\db\COMEDY.htm <br>
<br>
#adding a back button to the Index <br>
$before = Get-Content z:\db\before.txt<br>
<br>
#adding the back button prior to the poster images content<br>
Set-Content z:\db\COMEDY.htm –value $before, $after<br>

After playing around with #Hawk's BASE64 discovery above, I found that everything after the BASE64 code is display info. If you remove everything between the last # and .jpg it will load the image in the highest res it has.
https://m.media-amazon.com/images/M/MV5BMjAwODg3OTAxMl5BMl5BanBnXkFtZTcwMjg2NjYyMw##._V1_UX182_CR0,0,182,268_AL_.jpg
becomes
https://m.media-amazon.com/images/M/MV5BMjAwODg3OTAxMl5BMl5BanBnXkFtZTcwMjg2NjYyMw##.jpg

There is one API service provider which will provide you poster image URL and many other details based on the movie name you have provided in their query string.
Over here is the link to the above service provider's website.
You can sign up and use the API service within your code.

Those poster images don't appear to have any correlation to the title page, so you'll have to retrieve the title page first, and then retrieve the img element for the page. The good news is that the img tag is wrapped in an a tag with name="poster". You didn't say what kind of tools you are using, but this basically a screen scraping operation.

Here is my program to generate human readable html summary page for movie companies found on imdb page. Change the initial url to your liking and it generates a html file where you can see title, summary, score and thumbnail.
npm install -g phantomjs
Here is the script, save it to imdb.js
var system = require('system');
var page = require('webpage').create();
page.open('http://www.imdb.com/company/co0026841/?ref_=fn_al_co_1', function() {
console.log('Fetching movies list');
var movies = page.evaluate(function() {
var list = $('ol li');
var json = []
$.each(list, function(index, listItem) {
var link = $(listItem).find('a');
json.push({link: 'http://www.imdb.com' + link.attr('href')});
});
return json;
});
page.close();
console.log('Found ' + movies.length + ' movies');
fetchMovies(movies, 0);
});
function fetchMovies(movies, index) {
if (index == movies.length) {
console.log('Done');
console.log('Generating HTML');
genHtml(movies);
phantom.exit();
return;
}
var movie = movies[index];
console.log('Requesting data for '+ movie.link);
var page = require('webpage').create();
page.open(movie.link, function() {
console.log('Fetching data');
var data = page.evaluate(function() {
var title = $('.title_wrapper h1').text().trim();
var summary = $('.summary_text').text().trim();
var rating = $('.ratingValue strong').attr('title');
var thumb = $('.poster img').attr('src');
if (title == undefined || thumb == undefined) {
return null;
}
return { title: title, summary: summary, rating: rating, thumb: thumb };
});
if (data != null) {
movie.title = data.title;
movie.summary = data.summary;
movie.rating = data.rating;
movie.thumb = data.thumb;
console.log(movie.title)
console.log('Request complete');
} else {
movies.slice(index, 1);
index -= 1;
console.log('No data found');
}
page.close();
fetchMovies(movies, index + 1);
});
}
function genHtml(movies) {
var fs = require('fs');
var path = 'movies.html';
var content = Array();
movies.forEach(function(movie) {
var section = '';
section += '<div>';
section += '<h3>'+movie.title+'</h3>';
section += '<p>'+movie.summary+'</p>';
section += '<p>'+movie.rating+'</p>';
section += '<img src="'+movie.thumb+'">';
section += '</div>';
content.push(section);
});
var html = '<html>'+content.join('\n')+'</html>';
fs.write(path, html, 'w');
}
And run it like so
phantomjs imdb.js

$Title = $($Movie.Name)
$searchTitle = $Title.Replace(' ','%20')
$moviesearch = Invoke-WebRequest "http://www.imdb.com/search/title?title=$searchTitle&title_type=feature"
$titleclassarray = $moviesearch.AllElements | where Class -eq 'loadlate' | select -First 1
$MoviePoster = $titleclassarray.loadlate

Now a days, all modern browser have "Inspect" section:
100% Correct for Google Chrome only:
Take your cursor on image.
Right click on it, select "Inspect Element".
In the window appear, under Elements tab you will find the highlighted text as
Just click on it.
In the Resource tab, right click on image.
Select "Copy image URL" option.
Try to paste it any where as URL in any browser, you will only get the image.

Related

Google script automatically close UI after clicking link button

I have a script that opens a UI which is used to open another spreadsheet
When I click to open the link I would like the UI to close automatically if possible.
function ServiceSetServiceSheets(){
var html = "<a href='https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxxxx'; target='_blank'>Open The Service Sheet</a>";
var anchor = HtmlService.createHtmlOutput(html).setSandboxMode(HtmlService.SandboxMode.IFRAME).setHeight(60).setWidth(150);
SpreadsheetApp.getUi().showModalDialog(anchor,"Click the link to")
}
Can anyone help please?
In your situation, how about using google.script.host.close() as follows? Please modify your script as follows.
From:
var html = "<a href='https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxxxx'; target='_blank'>サービス シートを開く";
To:
var html = "<a href='https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxxxx'; target='_blank' onclick='google.script.host.close()'>サービス シートを開く";
By this modification, when you click the link, the dialog is closed by google.script.host.close().
Example:
Execute launchClickAndClose();
function launchClickAndClose() {
let html = '<!DOCTYPE html><html><head><base target="_top"></head><body>';
html += '<input type="button" value="Doit" onClick="doSomething();" />';
html += '<script>function doSomething(){google.script.run.withSuccessHandler(() => {google.script.host.close()}).doitontheserver();}</script>'
html += '</body></html>';
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html), "Close Automatically")
}
function doitontheserver() {
const ss = SpreadsheetApp.getActive();
ss.toast("Doing it");
return;
}

Removing the placeholder images for Product Tags using WooCommerce Predictive Search

I am using the predictive search to look for products and using PRO it searches for product tags as well, which is great. However, it still shows the placeholder (like a broken image link box) for the tags. I am simply wanting to remove the placeholder for tags only.
Anyone have an idea of the 'IF' statement I would use and where I would apply it? Again, it would only be for the product tags, I still would like the product itself to show the thumbnail images.
In the Wordpress plugins directory open the predictive search folder then open the classes folder. In the file class-wc-predictive-search-filter.php on line 331 you will see a foreach loop
foreach ( $search_tags as $item ) {
$link_detail = get_term_link($item->slug, 'product_tag');
$avatar = WC_Predictive_Search::woops_get_product_cat_thumbnail($item->term_id,64,64);
$item_html = '<div class="ajax_search_content"><div class="result_row"><span class="rs_avatar">'.$avatar.'</span><div class="rs_content_popup"><span class="rs_name">'.stripslashes( $item->name).'</span><span class="rs_description">'.WC_Predictive_Search::woops_limit_words(strip_tags( str_replace("\n", "", $item->description) ),$text_lenght,'...').'</span></div></div></div>';
$rs_items['p_tag'] .= $item_html.'[|]'.$link_detail.'[|]'.stripslashes( $item->name)."\n";
$end_row--;
if ($end_row < 1) break;
}
}
}
you will need to remove
<span class="rs_avatar">'.$avatar.'</span>
so the foreach loop reads
foreach ( $search_tags as $item ) {
$link_detail = get_term_link($item->slug, 'product_tag');
$avatar = WC_Predictive_Search::woops_get_product_cat_thumbnail($item->term_id,64,64);
$item_html = '<div class="ajax_search_content"><div class="result_row"><div class="rs_content_popup"><span class="rs_name">'.stripslashes( $item->name).'</span><span class="rs_description">'.WC_Predictive_Search::woops_limit_words(strip_tags( str_replace("\n", "", $item->description) ),$text_lenght,'...').'</span></div></div></div>';
$rs_items['p_tag'] .= $item_html.'[|]'.$link_detail.'[|]'.stripslashes( $item->name)."\n";
$end_row--;
if ($end_row < 1) break;
}
}
}

jQuery cleditor plugin: creating a new button

Using cleditor, I'm trying to set up a custom button with the following code:
(function($) {
$.cleditor.buttons.link_species = {
name: "link_species",
image: "fish.gif",
title: "Species Link",
command: "inserthtml",
popupName: "link_species",
popupClass: "cleditorPrompt",
popupContent: "Genus: <input type='text' size='15'> Species: <input type='text' size='15'><br />Remove italics? <input type='checkbox' value='remove'> <input type='button' value='Ok' />",
buttonClick: link_speciesClick
};
// Handle the hello button click event
function link_speciesClick(e, data) {
// Wire up the submit button click event
$(data.popup).children(":button")
.unbind("click")
.bind("click", function(e) {
// Get the editor
var editor = data.editor;
var $text = $(data.popup).find(":text"),
genus = $text[0].value,
species = $text[1].value;
var slug = genus + '-' + species;
slug = htmlEntities(slug);
var link = '/dev/species/' + slug + '/';
var rel = link + '?preview=true';
var display = firstUpper(genus) + ' ' + species;
// Get the entered name
var html = '' + display + '';
if ( !$(data.popup).find(":checkbox").is(':checked') ) {
html = '<em>' + html + '</em>';
}
// Insert some html into the document
editor.execCommand(data.command, html, null, data.button);
// Hide the popup and set focus back to the editor
editor.hidePopups();
editor.focus();
});
}
})(jQuery);
It's a WordPress website, and the directory structure is something like this:
/wp-content/plugins/sf-species-profile/cleditor
Within there I have all the cleditor files and config.js.This file is where the above code is stored.
I also have an images folder containing a 24*24 fish.gif file.
For some reason, when I run this code, I get the following error:
[firefox]
a is undefined
<<myurl>>/wp-content/plugins/sf-species-profiles/cleditor/jquery.cleditor.min.js?ver=3.3.1
Line 17
[chrome]
Uncaught TypeError: Cannot read property 'length' of undefined
If I change the "image" argument to image:"" the same image for "B" appears, but the plugin works without error.
Does anyone have any ideas what may be wrong?
It would be easier to debug with the non minimized version. You can get it from here: http://premiumsoftware.net/cleditor/ (zip)
There are 2 functions that include a length call in the code that ends up in line 17 of the minimized code. One in the function hex(s) that processes color. The other is the the imagePath function.
function imagesPath() {
var cssFile = "jquery.cleditor.css",
href = $("link[href$='" + cssFile +"']").attr("href");
return href.substr(0, href.length - cssFile.length) + "images/";
}
It could throw an error of the type you have if your rendered html doesn't include a line like "<link rel="stylesheet" type="text/css" href="path/to/jquery.cleditor.css" />". (Href would then be undefined.)
For wordpress integration, you may find it easier to setup when using the wordpress plugin version of cleditor.

edit-in-place, how to make more db fields editable

Good evening guys!
I just managed to implant a really sweet working edit-in-place function with jQuery and AJAX. I'm able to edit 1 db field. I would like to be able to edit multiple db fields.
These are all the scripts:
Update query (handler.php)
<?php
include('../../core/additional/connect-db.php');
if (isset($_POST['id']) && isset($_POST['firstname'])) {
$firstname = mysql_real_escape_string($_POST['firstname']);
$id = mysql_real_escape_string($_POST['id']);
$query = "UPDATE players SET firstname ='$firstname' WHERE id='$id'";
$result = mysql_query($query) or die ('Query couldn\'t be executed');
if ($result) {echo 1;}
}
?>
And the ajax in the head
<script type="text/javascript">
$(document).ready(function()
{
$(".editable").hover(
function()
{
$(this).addClass("editHover");
},
function()
{
$(this).removeClass("editHover");
}
);
$(".editable").bind("dblclick", replaceHTML);
$(".btnSave, .btnDiscard").live("click", handler);
UI("Ready");
function UI(state)
{
var status = {};
status.Ready = "Ready";
status.Post = "Saving your data. Please wait...";
status.Success = "Success! Your edits have been saved.";
status.Failure = "Attempts to save data failed. Please retry.";
var background = {};
background.Ready = "#E8F3FF";
background.Post = "#FAD054";
background.Success = "#B6FF6C";
background.Failure = "#FF5353";
$("#status").animate({opacity: 0}, 200, function (){$("#status").html(status[state]).css({background: background[state]}).animate({opacity: 1}, 200)});
}
function handler()
{
var selector="";
var code="21";
if ($(this).hasClass("btnSave"))
{
UI("Post");
var str = $(this).siblings("form").serialize();
$.ajax({
type: "POST",
async: false,
timeout: 100,
url: "core/actions/handler.php",
data: str,
success: function(msg){code = msg; $(".message_edit").show(); $(".message_edit").fadeOut(2500);},
});
if(code == 1)
{
UI("Success");
selector = "editBox";
}
else
{
UI("Failure");
selector = "buffer";
}
}
else {selector = "buffer"}
$(this).parent()
.html($(this).siblings("form")
.children("."+selector)
.val())
.removeClass("noPad editHover")
.bind("dblclick", replaceHTML);
return false;
}
function replaceHTML()
{
var buffer = $(this).html()
.replace(/"/g, """);
$(this).addClass("noPad")
.html("")
.html("<form class=\"editor\"><input type=\"text\" name=\"firstname\" class=\"editBox\" value=\"" + buffer + "\" /> <input type=\"hidden\" name=\"buffer\" class=\"buffer\" value=\"" + buffer + "\" /><input type=\"hidden\" name=\"id\" class=\"record\" value=\"" + $(this).attr("id") + "\" /></form>Save Cancel")
.unbind('dblclick', replaceHTML);
}
}
);
</script>
Then the field is displayed and editable by using this:
<td class="editable" id="' .($id). '" width="180">' .($task). ' </td>
I might be able to copy and rename all scripts, but I'm positive that's not the ideal way to do it. I tried to copy the script in the handler.php file and renamed the db fields, and did the same for the ajax script. But it didn't work. I hope my 'problem' is clear to you, any suggestions?
Note: I think the solution lies somewhere in this line (bottom of the ajax script):
.html("<form class=\"editor\"><input type=\"text\" name=\"firstname\" class=\"editBox\" value=\"" + buffer + "\" /> <input type=\"hidden\" name=\"buffer\" class=\"buffer\" value=\"" + buffer + "\" /><input type=\"hidden\" name=\"id\" class=\"record\" value=\"" + $(this).attr("id") + "\" /></form>Save Cancel")
Thanks in advance for helping out! :)
You may want to look at using the Jeditable jQuery plugin (http://www.appelsiini.net/projects/jeditable) and for a good example of various uses you can look at the demo page:
http://www.appelsiini.net/projects/jeditable/default.html
Also, I hope you are not actually going to use that php script to update the database, as that is vulnerable to SQL injection attacks, so it is bad practice.
And I don't see any element with the class editable in the html, just editBox.
And finally, you are submitting all the elements each time there is to be a change? That is quite inefficient, as one advantage of editing in-place is to just send small changes each time.

How to use jQuery's formatItem, formatMatch, and formatResult options for .autocomplete?

I am making use of jQuery's .autocomplete plugin, and I would appreciate some assistance formating the results that show up in the dropdown menu that populates when text is written into the input field.
In order to get the data to populate the autocomplete, I pull from mySQL using this PHP:
$sql = ( 'SELECT tag, title, author, content, id FROM labels' );
$result = mysql_query( $sql );
$Response = array();
while( $row = mysql_fetch_object( $result ) ){
$Response[] = array(
"id" => $row->id,
"name" => $row->tag . ": " . $row->title . ": " . $row->content .""
);
}
When a user selects the option from the autocomplete that is best for them, I convert the "name" above into the "id" using this method:
var AllTagData = ;
var Tags = [];
for(var i in AllTagData){
Tags.push(AllTagData[i].name);
}
function getIdFromTag(_name){
for(var i in AllTagData){
if(_name == AllTagData[i].name){
return AllTagData[i].id;
}
}
}
So far, so good. Finally, I use the jQuery autocomplete plugin to output the data for the user:
$(document).ready(function(){
$("#Responses").autocomplete({
source: Tags,
matchContains: true,
autoFill: true,
select: function(e, ui){
$("#hidden_tags").val( getIdFromTags($("#Responses").val()) );
}});
});
This final portion of the code is where I need help implementing the formatItem, formatMatch, and formatResult options.
From the PHP given above, I output Tags, Title, and Content all in the "name". The way that I would like to format my autocomplete options for the user is
Show Tags & Title
Hide Content
Search through Tags, Title, and Content for possible matches
Therefore, even though I want the autocomplete to search through Content, I don't want Content showing up in the populated autocomplete list. I only want the Tags and Title to show.
I've been having a lot of trouble with this and have searched quite extensively to find an answer and would really appreciate any help you can give on how to accomplish this. Please ask any follow up questions if you need further clarification.
Thanks!
I think you are using a different version of the plugin, but if you look at this one:
http://code.google.com/p/jquery-autocomplete/
You will find a file index.html with the examples you ask for, for example:
showResult: function(value, data) {
return '<span style="color:red">' + value + '</span>';
},
Good luck!

Resources