I need an image slider for Wordpress in which the images com from PHP. Something behaving like:
[slider]
<?php
get_slider_images();
?>
[/slider]
with get_slider_images() echoing lines like:
<img src="xxxxx.jpg" title="dummy title">
Does any one know any suitable plugin (or any other solution)?
Note: I have done my search, but couldn't find anything.
Thanks!!
flexslider option:
$parts = enter in your image urls;
$description .= '<div class="flexslider"><ul class="slides">';
foreach ($parts as $part) {
$description .= '<li><img height="200" width="342" src=' . $part . "> </li>";
}
$description .= "</ul></div>";
jsfiles
http://www.woothemes.com/flexslider/
Related
Need help!
I am creating an online portal for which I am displaying images as categories using PHP in grid format. I am displaying images from a folder.
What I am trying to do is create modal for images so that when I click on a particular image, the image Modal opens and displays that particular image in large size with navigation buttons so that I can navigate forward and backward to another image.
Here's what I have till now to just display images using php:
<?php
$cols = 4;
$colCtr = 0;
if($colCtr %$cols == 0)
echo "<tr><td colspan='2'></td></tr><tr>";
$folder = "./upload";
$results = scandir('./upload/');
foreach ($results as $result) {
if ($result === '.' or $result === '..') continue;
if (is_file($folder . '/' . $result)) {
echo '<td>
<a href="'.$folder . '/' . $result.'" target="_blank""/><img src="'.$folder . '/' . $result.'" target="_blank" alt="..." style="margin-left:50px;margin-bottom:27px;width:289px;height:190px;border: 2px solid black;" class="w3-hover-opacity hover-shadow cursor">
</td></tr>';
}
}
$colCtr++;
echo "\r\n";
?>
Thanks for your help!
You can use a lightbox javascript plugin to do that. Like: http://dimsemenov.com/plugins/magnific-popup/
Try this js plugin. It is easy to use is simple. http://sachinchoolur.github.io/lightGallery/
How can I go about convering a public instagram URL into JSON using PHP? Ex: https://www.instagram.com/explore/tags/brindle/
I can't use the API as I need public hashtag content and my use case won't qualify for their app review process :-(.
Here is what I have so far but it does not pull all images. Also, I'd like to be able to load the "load more" images as well. Any help would be much appreciated!
$instagram_source = file_get_contents("https://www.instagram.com/explore/tags/brindle/");
$instagram_data = explode("window._sharedData = ", $instagram_source);
$instagram_json = explode(';</script>', $instagram_data[1]);
$instagram_array = json_decode($instagram_json[0], TRUE);
$instagram_media = $instagram_array['entry_data']['TagPage'][0]['tag']['media']['nodes'];
if(!empty($instagram_media)) {
echo '<ul>';
foreach($instagram_media as $im) {
echo '<li>';
echo '<a href="https://www.instagram.com/p/'.$im['code'].'/" target="_blank">';
echo '<img src="'.$im["display_src"].'" alt="" width="'.$im["dimensions"]["width"].'" height="'.$im["dimensions"]["height"].'" />';
echo '</a>';
echo '</li>';
}
echo '</ul>';
}
Take a look at this solution here: https://github.com/Bolandish/Instagram-Grabber
Thats the best one i know until now.
If you visit my website so far, http://trulydesigns.com/ you will notice that everything looks in order.
If you visit the web page via mobile such as an iPhone 5s the slider looks out of place. http://quirktools.com/screenfly/#u=http%3A//trulydesigns.com&w=320&h=568&a=37&s=1
function createSlider(){
global $cl_redata;
if(isset($cl_redata['codeless_slider_height']) && $cl_redata['codeless_slider_height'] != '100%')
$height = $cl_redata['codeless_slider_height'];
elseif(! isset($cl_redata['codeless_slider_height']))
$height = '450';
else
$height = 'fullscreen';
$this->height = $height;
$extra_class = '';
if($cl_redata['slider_parallax'])
$extra_class .= ' parallax_slider';
$output = '<div class="codeless_slider_swiper '.esc_attr($extra_class).'" style="'.(($height == 'fullscreen')?'':'height:'.$height.'px').'">';
$output .= '<div class="loading"><i class="moon-spinner icon-spin"></i></div>';
$output .= '<div class="codeless_slider_wrapper" data-start="transform: translateY(0px);" data-'.(($height == 'fullscreen')?'1440':$height).'="transform: translateY(-500px);">';
$output .= '<div class="codeless-slider-container swiper-parent swiper_slider codeless_slider" data-slidenumber="1" data-height="'.esc_attr($height).'">';
$output .= '<div class="pagination-parent nav-thumbflip nav-slider">
<a class="prev" href="">
<span class="icon-wrap"><i class="icon-angle-left"></i></span>
<div class="text">'.__('PREV','codeless').'</div>
</a>
<a class="next" href="">
<span class="icon-wrap"><i class="icon-angle-right"></i></span>
<div class="text">'.__('NEXT','codeless').'</div>
</a>
</div>';
$output .= '<div class="swiper-wrapper">';
$this->output[] = $output;
}
This is a snippet of the "codeless_slider.php", somewhere in my files it's pulling "min-height: 236.97522816166884px;height: 236.97522816166884px;" and I can't figure where from, so any help is greatly appreciated.
It can be tricky because you use a plugin to not have to build it yourself, but sometimes plugins inject code and you have to learn how it is built in order to make it work the way you want anyway.
While learning Wordpress development, I learned to be best friends with the DOM inspector in Chrome and to use the !important declaration to overwrite style rules. It looks like you could do that here with success.
Good luck!
This code is from a Premium WordPress theme, so in any case you can ask their support forum on
https://codeless.co/support/
I am passing an image link from PHP to be displayed on a HTML page. But, when the page is rendered, the image does not show, instead, a place holder is shown.
PHP
$details = getimagesize($config['thumb_dir'].$value['thumbName']);
if ($details !== false){
$content.= "<h2>".$value['title']. "</h2>"."<p><img src= ".$config['thumb_dir'].$value['thumbName']." width =".$details[0]." height = ".$details[0] ." alt= ".$value['filename'] ." /></p>";
HTML output
<h2>Welcome to the Home page</h2><h2>Title for image 1</h2>
<p>
<img src= /home/rraja01/public_www/w1fma/thumbs/thumb-landscape-large.jpg width = 150 height = 150 alt= landscape-large.jpg />
</p>
Your $config['thumb_dir'] variable is returning the full path on the server and including /home/rraja01/public_www/ at the front -- very few servers have the root mapped to the website. You may need to do something like this:
$website_path = substr($config['thumb_dir'], 24);
$content.= "<h2>".$value['title']. "</h2>".'<p><img src="'.$website_path.$value['thumbName'].'" width="'.$details[0].'" height="'.$details[0].'" alt="'.$value['filename'].'" /></p>';
You have to use the relative path of your image (relative to the document root):
$details = getimagesize($config['thumb_dir'].$value['thumbName']);
$relative_path = str_replace($_SERVER['DOCUMENT_ROOT'], '', $config['thumb_dir']);
if ($details !== false) {
$content .= '<h2>'.$value['title'].'</h2>'
. '<p><img src="'.$relative_path.$value['thumbName'].'" width="'.$details[0].'" height="'.$details[0].'" alt="'.$value['filename'].'" /></p>';
}
<?php
$i = 0;
$page = get_the_content();
$doc=new DOMDocument();
$doc->loadHTML($page);
$xml=simplexml_import_dom($doc);
$images=$xml->xpath('//img');
foreach ($images as $img) {
list($width, $height, $type, $attr) = getimagesize($img['src']);
if ($height > 149 ) {
echo '<img src="' . $img['src'] . '" alt=" ' . $img['alt'] . ' - funny and hot pictures" title=" ' . $img['title'] . ' - funny fail picture dump" onerror=\'this.style.display="none" \'><br>';
$i++;
if ($i == 3 ) { break;}
}
else
{
// don't display
}
}
?>
I replaced the "<?php the_content(); ?>" piece of code with the one above. It's supposed to strip out all of the text in my post and just leave the images which it does nicely. But when I embed a video the php breaks. How would I allow posts to show youtube videos?
You should look into using custom fields:
http://codex.wordpress.org/Custom_Fields
There is a great plugin that creates good admin control panels for them too:
http://wordpress.org/extend/plugins/advanced-custom-fields/
You could use a custom field to specifically put a video into the page.
Is there a particular reason you want to strip the text out of the post? - e.g. could you just not put text in the post at all? - or could the text be put into the excerpt instead, or into a custom field so that you don't have to over complicate the output code?