Below is the PHP code for the images section in my website using the Cute slider plugin. I am trying to add alt text by adding text to the line $data .= '<img '.$src.''.$datasrc.''.$thumb.'>'; but the alt text ends up duplicated. Where should I add the alt text?
if($layerkey == 0) {
$src = ' src="'.$layer['properties']['image'].'"';
$datasrc = '';
}
else {
$src = ' src="'.$GLOBALS['csPluginPath'].'/img/blank.png" width="1" height="1" alt="Blank"';
$datasrc = ' data-src="'.$layer['properties']['image'].'"';
}
$data .= '<li data-delay="'.$layer['properties']['slidedelay'].'" data-src="'.$layer['properties']['slidedelay'].'" data-trans3d="'.$layer['properties']['3d_transitions'].'" data-trans2d="'.$layer['properties']['2d_transitions'].'">';
$data .= '<img '.$src.''.$datasrc.''.$thumb.'>';
The full php file is here : http://pastie.org/9167151
On this line: $src = ' src="'.$GLOBALS['csPluginPath'].'/img/blank.png" width="1" height="1" alt="Blank"'; alt is already defined, that is why you get two definitions when you try to add it in the second place. You should change the definition on that line instead of on the $data .= '<img '.$src.''.$datasrc.''.$thumb.'>'; line.
Related
When I take out the HTML code below the <?php ?> the webpage does not load anymore. Why is there a dependency on that code below? I am sorry for the specificity of this question, but it is really frustrating me and I cannot seem to independently find an answer.
<?php
/*Write a function to return an HTML <img /> tag. The function should accept a
mandatory argument of the image URL and optional arguments for alt text,
height , and width
*/
function html_img ($img_url = "\"https://img.purch.com/h/1400/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA5OS8zMjkvb3JpZ2luYWwvY2hpbXBzLWVhdC1tb25rZXktYnJhaW5zLTAx\"", $alt_text = "\"ronald\"", $height = 400, $width = 1200){
$the_format = "<img src=" . $img_url . "alt=" . $alt_text . " height" . $height . " width=" . $width;
return $the_format;
}
print html_img();
?>
<!--When the code below is removed, the image is not displayed.-->
<!-- <img src="https://img.purch.com/h/1400/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA5OS8zMjkvb3JpZ2luYWwvY2hpbXBzLWVhdC1tb25rZXktYnJhaW5zLTAx" -->
The image tag in $the_format is unclosed, so it is probably appearing in the markup (view the page source) but it will not be rendered in HTML without the closing > or />
As most people know, wordpress uses oembed to fetch the embed code for videos when adding a youtube video to a post. For example, pasting:
https://www.youtube.com/watch?v=pATcvr3zAhg
Would output this in the html:
<iframe width="420" height="315" src="https://www.youtube.com/embed/pATcvr3zAhg" frameborder="0" allowfullscreen></iframe>
I want to change this markup so it uses fancybox and an image, so my markup should look like this:
<a class="fancybox.iframe various" href="VIDEO SOURCE"><img src="IMAGE HERE"></a>
I was using this code which originally replaced the video with an image and when clicked, changed to the video - however, I want to modify this code now so that it outputs the markup above.
add_filter( 'oembed_dataparse', function($str, $data, $url) {
if ( ($yt = $data->provider_name == 'YouTube') || ($vm = $data->provider_name == 'Vimeo') )
{
if($yt) $html = str_replace('feature=oembed', 'feature=oembed&autoplay=1', $str);
else $html = str_replace('" width=', '?autoplay=1" width=', $str);
$html = htmlentities($html, ENT_QUOTES);
$img = $data->thumbnail_url;
$title = esc_attr($data->title);
return '<img src="'. $img . '" onclick="this.outerHTML=\'' . $html . '\'" title="' . $title . '">';
}
return $str;
}, 10, 3);
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/
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?