Need to create dynamic thumbnail grid. - php

I am new in web development, i need to create a website for portfolio purposes in which i need to show thumbnail and a little description of my project underneath it and all content should be dynamically displayed. I have basic knowledege of PHP, wordpress, javascript, jquery, python, and HTML/CSS so this i am doing for learning purpose.
I want you guys to please tell me the way how can i do it, just guide me rest of it i will handle.
Some similar examples are
http://themes.themepunch.com/?theme=megafoliopro_jq
http://codecanyon.net/item/dzs-scroller-gallery-cool-jquery-media-gallery/full_screen_preview/457913?ref=ibrandstudio
I am new to this forum and expect someone will answer my question
Thanks a lot mates.

Download CMS Made Simple and get either the album or gallery module. This is one out of many ways to get the job done.

You could glob() a directory to generate your thumbnails using PHP. I use this method on my photography site:
<?php
$counter = 0; // Set counter to 0
foreach (glob("images/photo-strip/thumb/*.jpg") as $pathToThumb) { // Grab files from the thumbnail path and save them to variable
$th_filename = basename($pathToThumb); // Strip the thumbnail filename from the path
$filename = str_replace('th_', '', $th_filename); // Strip th_ from the filename and save it to a different variable
$pathToFull = 'images/photo-strip/' . $filename; // Rebuild the path to the full-size image
echo ("<section class=\"photo-box\"><img src=\"$pathToThumb\" /></section>"); // Echo the photobox
$counter++; // Increment counter by 1 until no file exists
}
?>
You could expand on this code some in order to generate your "captions" perhaps even style your captions off a title="" property inside the <img> tag. How you match those captions up to the file is up to you.

Related

cycle2 fails with images inside php script

I can't get the cycle2 pager to work and I've checked the various questions and answers on this topic. I'm beginning to think it may have to do with my setup: the user clicks one of several buttons and that brings up one or more thumbnail images from a mysql database. Each thumbnail is related via the database to one or more larger images that I'd like to play in a slideshow. An ajax call sends the info about which thumb was clicked and a server page retrieves the larger images from a directory and displays them all in a div on the calling page as follows:
<?php
$thumb_path = $_POST['thumb_path'];
ob_start();
echo basename($thumb_path, ".png");
$thumb_name = ob_get_contents();
ob_end_clean();
$dir = "pathTo/$thumb_name/*.png";
$images = glob( $dir );
foreach( $images as $image ):
echo "<img src='" . $image . "' />";
endforeach;
?>
So far, so good as all the larger images are displayed (statically, all at once) in the div. The problem comes when I try to wrap the php script above in any of the cycle2 pagers (I'd like to use the one that automatically creates thumbnails for navigating the larger images, but none work). What happens is that all the larger images are loaded on top of each other without any navigation controls (thumbnails, dots, numbers etc. as the case may be). The larger images do play if I set the
data-cycle-timeout
parameter to something other than zero, but I'd like to set it to zero and let the users navigate the larger images themselves.
I'm a total noob at web programming and it's taken a while to get this stuff to work, chiefly by studying code snippets I've found on the web. I hope any solution doesn't involve a major redesign.
Thanks in advance for any help.

How to treat a PHP image generation script as an image

This is an odd question but I'm stuck on how I would achieve this and I am unable to find any methods of doing so.
I have a simple php script that takes variables (containing file names) from the URL, cleans then and then uses them to generate a single image from the inputted values. This works fine and outputs a new png to the webpage using:
imagepng($img);
I also have a facebook sharing script in PHP that takes a filepath as an input and then shares the image on the users feed where this statement is used to define the image variable:
$photo = './mypic.png'; // Path to the photo on the local filesystem
I don't know how I can link these two together though. I would like to use my generation script as the image to share.
Can anyone point me in the right direction of how to do this? I am not the master of PHP so go easy please.
-Tim
UPDATE
If it helps, here are the links to the two pages on my website containing the outputs. They are very ruff mind you:
The php script generating the image:
http://the8bitman.herobo.com/Download/download.php?face=a.png&color=b.png&hat=c.png
The html page with the img tag:
http://the8bitman.herobo.com/Share.html
Treat it as a simple image:
<img src="http://yourserve/yourscript.php?onlyImage=1" />
yourscript.php
if($_GET['onlyimage']) {
header('Content-type:image/png'); //or your image content type
//print only image
} else {
//print image and text too
}

PHP, getting Thumbnail for an image in Elfinder

I use Elfinder 2.1 and i'm looking for a possibility to get the right thumbnail path of an image with PHP.
By default a .tmb folder exist in every folder and contains the resized thumbnails with an (i think) md5 hashed filename.
How can i retrieve the correct thumbnail for a specific image in PHP?
The goal is to show only the thumbnails in another PHP Script and with a click the original imgage shows up.
Thanks, was useful. I added one thing.
protected function tmbname($stat) {
$ext = 'png';
if($stat['mime'] == 'image/jpeg'){$ext = 'jpg';}
if($stat['mime'] == 'image/gif'){$ext = 'gif';}
return current(explode('.', $stat['name'])).'.'.$ext;
//$stat['hash'].$stat['ts'].'.png';
}
Works well and deletes too.
Take a look at this issue, it may point you in the right direction:
https://github.com/Studio-42/elFinder/issues/671
I answered that question just a few minutes ago on the above link. In short:
search for the function tmbname($stat) in the class elFinderVolumeDriver.class.php
replace the return value with this: current(explode('.', $stat['name'])).'.png';
This way the created thumbnails will have the same name as the original image (of course with .png extension). If that will arise security questions/problems, I don't know. Hope it does help.

How to render a Youtube thumbnail in a template in Drupal 7

I am using the following modules:
media
media_youtube
Styles
and would like to render a thumbnail of a Youtube video in a template (.tpl). Which theme function should I use and with what params?
My best quess would be something like:
$my_media['style_name'] = 'unlinked_thumbnail';
print theme('file_styles',$my_media);
where $my_media is an array containing fid,uri,filename,filemime etc.
Since i'm very new to Drupal, all my attempts to make sense of the modules source code have failed. I feel like I have tried all possible combinations of style names defined in the youtube and styles module without getting any output.
Rendering the video itself however works just fine using
print theme('media_youtube_video',$my_media);
How do you guys do it?
Digging around in the media_youtube module code there's a function that will build this up for you in includes/media_youtube.formatters.inc called media_youtube_file_formatter_image_view(). You can use code like the following to render the thumbnail image:
// Make sure the correct include file is loaded
module_load_include('inc', 'media_youtube', '/includes/media_youtube.formatters.inc');
// Load the file
$file = file_load($my_media['fid']);
// Set up the settings array with your image style
$display['settings'] = array('image_style' => 'unlinked_thumbnail');
// Get the render array for the thumbnail image
$image_render_array = media_youtube_file_formatter_image_view($file, $display, LANGUAGE_NONE);
// Render it
print render($image_render_array);
One more example, which makes possible to render video thumbnail (vimeo, youtube, qbrick, etc.) with your custom image style.
$file - File object that you can easily get from media field.
$wrapper = file_stream_wrapper_get_instance_by_uri($file->uri);
$image_uri = $wrapper->getLocalThumbnailPath();
$image_rendered = theme('image_style', array(
'style_name' => 'YOUR_IMAGE_STYLE_HERE',
'path' => $image_uri
));
Please note, that if you want to render also image, than you need to check $file->type if it's video or image, because it will use different wrapper objects with different methods.
And if you want to print both thumb+video you could do this :
<?php print render($content['field_your_field']); ?>
If you in a tpl and want to use $variables - it will be something like:
<?php print render($variables['content']['field_url']['#object']->content['field_video']);?>
Hopu u can use it...

Scraping relative path image

I need some help with screen scraping a site (http://website.com).
Lets say I'm trying to get an image inside <div id="imageHolder">
But when I pull it down, it's path is relative ie "image_large/imageName.jpg" (I'm going to pull down this image daily as it changes daily. It always begins with "images_large/.
How can I go in and prepend the url website.com to that image inside <div id="imageHolder">?
$url = 'http://www.website.com/';
// screen scraping here
// say you have your image you scraped stored in the variable below
$img = 'images_large/imageName.jpg';
// your new full path to the image
$fullpath = $url . $img;
// test it (just to see for yourself)
echo $fullpath;
This is just making basic usage of PHP's concatenation operator, ., to append the relative image path onto your scraped URL.
after scrapping the data , u can use str_replace to replace "image_large/" with "http://website.com/image_large/" ... thats the simplest i think
this will replace all similar image paths in the html.. or if u just want one image out of it , i think another user has given u a solution for that. doesnt get any simpler that that i think.

Categories