I am using a bespoke Jquery/PHP gallery script which pulls images from a Flickr feed.
I have tried to implement the JQuery pagination plugin, to no avail.
Here is the code...
<?php
require_once('php/simplepie.inc');
$feed = new Simplepie('http://api.flickr.com/services/feeds /photos_public.gne?id=44262300#N06&lang=en-us&format=rss_200');
$feed->handle_content_type();
function image_from_description($data) {
preg_match_all('/<img src="([^"]*)"([^>]*)>/i', $data, $matches);
return $matches[1][0];
}
function select_image($img, $size) {
$img = explode('/', $img);
$filename = array_pop($img);
$s = array(
'_s.', // square
'_t.', // thumb
'_m.', // small
'.', // medium
'_b.' // large
);
$img[] = preg_replace('/(_(s|t|m|b))?\./i', $s[$size], $filename);
return implode('/', $img);
}
?>
<script type="text/javascript">
$(function(){
$("#images div").quickpaginate({ perpage: 4, showcounter: false, pager : $("#image_counter") });
});
</script>
<div class="album-wrapper" id="images">
<?php foreach ($feed->get_items() as $item): ?>
<div class="photo">
<?php
if ($enclosure = $item->get_enclosure()) {
$img = image_from_description($item->get_description());
$full_url = select_image($img, 4);
$thumb_url = select_image($img, 0);
echo '<img id="photo_' . $i . '" src="' . $thumb_url . '" />'."\n";
}
?>
</div>
<?php endforeach; ?>
</div>
<div id="image_counter"></div>
Can anyone see what I have missed or I am doing wrong?
Thanks,
Dan
Have you tried trying to isolate the area where the error might be located? Can you figure it out if it is in the PHP-side of your code or on the JavaScript side?
In any case, I've had success using the jQuery pager companion plugin for the Tablesorter plugin. It doesn't work very well for very long lists of data, however.
Related
I'm using the information here http://ieg.wnet.org/2016/02/replacing-default-wordpress-gallery-shortcode/ as the basis for a custom gallery shortcode, and trying to create this carousel slider https://www.jssor.com/demos/image-gallery.slider. Problem is I don't know how exactly to implement it.
The images and everything up until then shows in the source code, but then nothing after it.
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:800px;height:356px;overflow:hidden;">
<?php
foreach ( $images as $image ) {
$thumbnail = wp_get_attachment_image_src($image->ID, 'homepage-thumb');
$thumbnail = $thumbnail[0];
$fullsize = wp_get_attachment_image_src($image->ID, 'service-page');
$fullsize = $fullsize[0];
$gallery .= "<div><img data-u='image' src='".$thumbnail."'><img data-u='thumb' src='".$fullsize."'></div>";
}
return $gallery;
?>
</div>
It's probably something simple, this is just far past my base of knowledge when it comes to this.
You are returning the value instead of printing it to the web page. Use echo instead of return. Also make sure you echo it in each iteration of the loop so you don't just print one image, but all of them.
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:800px;height:356px;overflow:hidden;">
<?php
foreach ( $images as $image ) {
$thumbnail = wp_get_attachment_image_src($image->ID, 'homepage-thumb');
$thumbnail = $thumbnail[0];
$fullsize = wp_get_attachment_image_src($image->ID, 'service-page');
$fullsize = $fullsize[0];
$gallery .= "<div><img data-u='image' src='".$thumbnail."'><img data-u='thumb' src='".$fullsize."'></div>";
echo $gallery;
}
?>
</div>
I'm just a persistent beginner and I've met another obstacle in my way, so I hope that you'll help me one more time... :) I've got that HTML:
<div class='hold'><?php include 'image.php'; ?></div>
<div class='refresh'>Get new image</div>
And that PHP code:
<?php
$dir = 'images/';
$img = array();
if(is_dir($dir)) {
if($od = opendir($dir)) {
while(($file = readdir($od)) !== false) {
if(strtolower(strstr($file, '.'))==='.jpg') {
array_push($img, $file);
}
}
closedir($od);
}
}
$id = uniqid();
$smth = array_rand($img, 1);
echo '<img src=' . $dir.$img[$smth] . '?' . $id . ' width="200px" height="50px" />';
echo '<input type="hidden" value=' . $id . ' />';
?>
So now when I'm looking at my page I see in the <div class='hold'></div> my img from the folder images, and it's allright. BUT when I click on the <div class='refresh'></div> I obviously want to get another img from my folder, but I dunno how to accomplish that trick correctly.
I know that first answer will be USE AJAX, and I know that I can do something like
function loadGraphic() {
$('.hold').load('image.php');
};
loadGraphic();
and then $('.refresh').click(loadGraphic); but when I'm trying to do that in response from server I get TWO THINGS: image.php and, of course, something like car.jpg?573c4e010c7f6... But I very-very wanna get just ONE looking like
car.jpg?573c4e010c7f6
or
image.php?573c4e010c7f6 - I don't care...
So... I hope you've got my concept... maybe I'm asking for miracle - I dunno! Any, absolutely any help will be appreciated :)
Try it the following way:
JS function:
function loadGraphic() {
$.get("image.php", function(data) {
$(".hold").html(data);
});
};
Html:
<div class='refresh' onclick='loadGraphic()'>Get new image</div>
This is my first post here. I'm not sure if the title of my post is the most descriptive way of showing my problem, sorry in advance!
Anyway, I've got a Facebook RSS feed on my site using simplepie - I'm displaying posts with a brief summary of its content and an accompanying image, both coming from the feed itself.
I've got a single div that displays this information and is repeated according to the number of stories I've set to display, in my case 3, so the HTML page outputs three div's each with a different story/accompanying image.
<div class="block">
<a href="<?php echo $image_url ?>" target="_blank">
<img src="<?php echo $image ?>" alt="" />
</a>
</div>
The problem is Facebook RSS feeds only show tiny thumbnails generated from the original image (either external or from Facebook's server), but I want them in their original resolution.
I've succesfully replaced the thumbnails coming from Facebook's server by changing the name of the image (from "something_s.jpg" to "something_n.jpg"):
$image = str_replace("_s.jpg", "_n.jpg", $image);
I tried with ltrim to remove the Facebook URL appended before the external image's URL (e.g. https://fbexternal-a.akamaihd.net/safe_image.php?d=AQDZORAaPpbr5COr&w=154&h=154&url=http://example.com/image.jpg). So, I thought this would do it:
$image = ltrim(stristr(str_replace("_s.jpg", "_n.jpg", $image), '&url='), '&url=');
Oddly enough, external images showed up in their original resolution (e.g. example.com/image.jpg inside <img src="">) but those coming from Facebook (e.g. 10153970_10153145169383306_1966565627_n.jpg) did not anymore. The img src attribute is just empty!
What am I doing wrong here? Any help is appreciated.
(BTW, this is simplepie code in my page):
<?php
require_once('../php/autoloader.php');
$feed = new SimplePie();
$feed->set_feed_url(array('https://www.facebook.com/feeds/page.php?format=rss20&id=40796308305'));
$feed->set_item_limit(3);
$feed->init();
function returnImage ($text) {
$text = html_entity_decode($text, ENT_QUOTES, 'UTF-8');
$pattern = "/<img[^>]+\>/i";
preg_match($pattern, $text, $matches);
$text = $matches[0];
return $text;
}
function scrapeImage($text) {
$pattern = '/src=[\'"]?([^\'" >]+)[\'" >]/';
preg_match($pattern, $text, $link);
$link = $link[1];
$link = urldecode($link);
return $link;
}
$feed->strip_htmltags(array('embed','center','strong'));
$feed->handle_content_type();
foreach ($feed->get_items() as $item):
$feedDescription = $item->get_content();
$image = returnImage($feedDescription);
$image = scrapeImage($image);
$image = ltrim(stristr(str_replace("_s.jpg", "_n.jpg", $image), '&url='), '&url=');
$image_url= $item->get_permalink();
$description = $item->get_description();
$description = preg_replace('/\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|$!:,.;]*[A-Z0-9+&##\/%=~_|$]/i', '', $description);
endforeach;
?>
Mr.Rod
use this custom function to change Image src Attribue..
<?php
function ChangeImageSrc($image , $Newsrc){
$regex = '#src="(([^"/]*/?[^".]*\.[^"]*)"([^>]*)>)#';
$Content = preg_replace($regex, $image, 'src="'.$Newsrc.'"');
return $Content;
}
// Useage
$markup = "<img src='fb.com/blahblah.jpg'>";
// Change Src
$toNewSrc = ChangeImageSrc($markup , 'http://example.com/newsrc.png');
print $toNewSrc;
?>
after adding this function to your script
change this line
$image = ltrim(stristr(str_replace("_s.jpg", "_n.jpg", $image), '&url='), '&url=');
to
$image = ChangeImageSrc('src="_n.jpg"', '_s.jpg');
you have to more customize this function to match your needs .
A friend of mine wrote this script, displaying the 20 most recent instagram images, and I was wondering, how can I change the amount of images it grabs to maybe, 6?
<?PHP
$token = 'token';
$username = 'username';
$userInfo = json_decode(file_get_contents('https://api.instagram.com/v1/users/search?q='.$username.'&access_token='.$token));
if($userInfo->meta->code==200){
$photoData = json_decode(file_get_contents('https://api.instagram.com/v1/users/'.$userInfo->data[0]->id.'/media/recent/?access_token='.$token));
if($photoData->meta->code==200){ ?>
<?PHP foreach($photoData->data as $img){
echo '<img src="'.$img->images->thumbnail->url.'">';
} ?>
<?PHP } // If
} // If
?>
Now, the script is functional now because I've been working on it all day, but I'm not sure how to change how many it sends out.
Also, would any of you know how to style this? I already have the CSS done for it, but whenever I try it, it doesn't work correctly.
And, would you know how to get the description of the photo using the API?
Thank you in advance :-)
You need to use Instagram's count= url parameter when requesting data from their endpoints.
For example: https://api.instagram.com/v1/users/search?count=6
Or in your code:
<?PHP
$token = 'token';
$username = 'username';
$userInfo = json_decode(file_get_contents('https://api.instagram.com/v1/users/search?count=6&q='.$username.'&access_token='.$token));
if($userInfo->meta->code==200){
$photoData = json_decode(file_get_contents('https://api.instagram.com/v1/users/'.$userInfo->data[0]->id.'/media/recent/?count=6&access_token='.$token));
if($photoData->meta->code==200){ ?>
<?PHP foreach($photoData->data as $img){
echo '<img src="'.$img->images->thumbnail->url.'">';
} ?>
<?PHP } // If
} // If
?>
Pseudo example for styling. You'll need to figure out the css styles for that, but shouldn't be to difficult.
<div class='myBorder'>
<img url=$img->link />
<div class='myCaption'>$img->caption->text</div>
</div>
To get the description
if (isset($img->caption)) {
if (get_magic_quotes_gpc()) {
$title = stripslashes($img->caption->text);
} else {
$title = $img->caption->text;
}
}
I have a Wordpress blog and am trying to implement the foresight.js image script. In short, I need to target all post images, swap out the src, width, & height attributes with data-src, data-width, & data-height attributes. I then need to duplicate the image line and wrap it in <noscript> tags. This is the structure I'm trying to have Wordpress generate/create:
<img data-src="wordpress/image/url/pic.jpg" data-width="{get width of image with PHP & pass-in that value here} data-height="{get height of image with PHP and pass-in that value here}" class="fs-img">
<noscript>
<img src="wordpress/image/url/pic.jpg">
</noscript>
More info can be found at foresight.js' website.
I have searched the Wordpress codex and the best possible route I can find are to use filters (ie. 'get_image_tag' & 'image_tag') for modifying the html that Wordpress outputs for each image. I'm thinking that one of these options should work, or that I can do some pattern matching with regex (I know, not ideal), throw in a preg_replace and then inject this back into the_content filter.
I have tried some of these options but cannot get any to work. Could someone please offer some help?
'get_image_tag' attempt:
Found this particular one on the web, but it would need modified to fit my logic (see above structure)...can't make sense of what the preg_replace array is doing on my own.
<?php function image_tag($html, $id, $alt, $title) {
return preg_replace(array(
'/'.str_replace('//','\/\/',get_bloginfo('url')).'/i',
'/\s+width="\d+"/i',
'/\s+height="\d+"/i',
'/alt=""/i'
),
array(
'',
'',
'',
alt='"' . $title . '"'
),
$html);
}
add_filter('get_image_tag', 'image_tag', 0, 4);
?>
Another 'get_image_tag' attempt:
<?php function get_image_tag($id, $alt, $title, $align, $size='full') {
list($width, $height, $type, $attr) = getimagesize($img_src);
$hwstring = image_hwstring($width, $height);
$class = 'align' . esc_attr($align) . ' size-' . esc_attr($size) . ' wp-image-' . $id;
$class = apply_filters('get_image_tag_class', $class, $id, $align, $size);
$html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" title="' . esc_attr($title).'" data-width="' . $width . '" data-height="' . $height . '" class="' . $class . ' fs-img" />';
$html = apply_filters( 'get_image_tag', $html, $id, $alt, $title, $align, $size);
return $html;
}
?>
Pattern-matching attempt:
Tried creating my own regex on this one, but not sure if it's correct.
<?php function restructure_imgs($content) {
global $post;
$pattern = "/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)(|\")(.*?)>/i";
list($width, $height, $type, $attr) = getimagesize($2$3.$4$5);
$hwstring = image_hwstring($width, $height);
$replacement = '<img$1data-src=$2$3.$4$5 title="'.$post->post_title.'" data-width="'.$width.'" data-height="'.$height.'" class="fs-img"$6>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'restructure_imgs');
?>
Unfortunately can't get any of these examples to work. Any help or sharing your pre-written scripts/functions would be much appreciated! Thanks for helping a student learn!!
Your approach is before the page rendering and i think is not impossible in wordpress, however you can do the same after the page was rendered with javascript.
I tried to do that with jQuery and ti seems to work:
<!-- Example image -->
<img src="http://fotografia.deagostinipassion.com/resources/photos/2/2n/ilCielo.JPG" width="200px" height="300px">
<!-- Import jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("img").wrap(function() {
$(this).wrap(function() {
var newimg = '<img data-src="' + $(this).attr('src') + '" data-width="' + $(this).attr('width') + '" data-height="' + $(this).attr('height') + '" class="fs-img">';
return newimg;
});
return '<noscript>';
});
});
</script>
If you need more help, ask me.