Replace iframe video player with link to target page - html

I would like to modify my current code so that instead of the whole player, display only link to it. Does anyone have an idea how to do it? I have something like this:
<iframe src="http://www.youtube.com/embed/<?php echo $_GET['id']; ?>" style="border: 0; width: 100%; height: 360px;" frameborder="0" scrolling="no"></iframe>
And I want something like this:
"U can watch this here: http://www.youtube.com/watch?v=<?php echo $_GET['id']; ?>"

You can make a "link" with an "anchor" (<a>) tag. Something like this:
U can watch this here: http://www.youtube.com/watch?v=<?php echo $_GET['id']; ?>
Or simply:
U can watch this here: Click here!

Use an a tag:
"U can watch this here: <a href='http://www.youtube.com/watch?v=<?php echo $_GET['id']; ?>'>Video</a>"

Related

PHP adding a class to an image url

This is the first time I am doing something using PHP. It might be a very stupid question but I want to add a class to this line:
<?php
$image_url='http://test.haardenenkachels.com/wp-content/uploads/s2dlogo.jpg';
?>
<img src="<?php echo $image_url;?>">
How do I add a class to this line?
Thank you so much!
Regards,
Jelle
<?php
$image_url='http://test.haardenenkachels.com/wp-content/uploads/s2dlogo.jpg';
$image_class='yourclass';
?>
<img class="<?php echo $image_class;?>" src="<?php echo $image_url;?>">
would give you
<img class="yourclass" src="http://test.haardenenkachels.com/wp-content/uploads/s2dlogo.jpg">
Remember, that you must add the class to your style sheet ... and of course you can find listed in the file where the tag is present img

HTML5 using <video> tag to insert every .mp4 from a directory

I'm trying to make a very basic image/video sharing website. To make things easier on myself, I was wondering if it was possible to mass-include ALL .mp4's from a directory instead of individually adding them. Here is my current doc:
<html>
<body>Under construction.<br>
<video autoplay>
<source src="away.mp4" type="video/mp4">
</video>
</body>
</html>
I don't want to have to manually add a <video> tag for every file, is there a way to add them all at once? Or something like YouTube does, where it shows a thumbnail but opens another page to play it. If there is a way to add the video sources en masse, does it include newly added files?
Maybe something like that
<?php
$dir = './videos';
$video_files = [];
foreach(glob($dir.'/*.*') as $file) {
$file_parts = pathinfo($file);
if ($file_parts['extension'] == "mp4"){
$video_files[] = $file;
}
}
foreach($video_files as $video_file) {
echo "<video autoplay>";
echo "<source src=". $video_file ." type='video/mp4'>";
echo "</video><br/>";
}
?>
or in one loop
<?php
$dir = './videos';
$video_files = [];
foreach(glob($dir.'/*.*') as $file) {
$file_parts = pathinfo($file);
if ($file_parts['extension'] == "mp4"){
echo "<video autoplay>";
echo "<source src=". $file ." type='video/mp4'>";
echo "</video><br/>";
}
}
?>

What´s the error in this syntax?

I'm trying to do something with my Bootstrap .post-title class.
I want to put an element.style background on my post titles, which calls as a background, to the post featured image, for each post. I've already achieve this, but something went wrong and now isnt working. the only thing i know is must look something like this.
<div class="post-featured" style="background-image:url('upload/<?php the_post_thumbnail( 'wpbs-featured' ); ?>')">
but something in the syntax there is wrong, because it render this characters on HTML. whats going on?
')">
live example: WP Featured post image, as a div background
the_post_thumbnail returns an IMG html tag. So the generated code is
<div class="post-featured" style="background-image:url('upload/<img src="path/to/file.png">')">
Definitely not something that could work... You want the url only, so you should do this:
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'wpbs-featured', true);
<div class="post-featured" style="background-image:url('<?= $thumb_url[0] ?>')">
this is the actual html snippet working.
<?php
$img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "full");
$img = $img[0];
?>
<div class="postfeatured" style="<?php if($img){echo 'background:url('.$img.');';} ?>">
<div class="page-header"><h1 class="single-title" itemprop="headline"><?php the_title(); ?></h1>
<h4>
<?php $mykey_values = get_post_custom_values('_aioseop_description');
foreach ( $mykey_values as $key => $value ) {
echo substr("$value",0 ,300); //This will display the first 150 symbols
}?>
</h4>
<hr>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_native_toolbox"></div>
<hr>
</div>
</div>
live example: Design Thinking. Blog de Diseño Gráfico. Picoboero

switching between regular html and jQuery mobile site acting strange [duplicate]

I have a wordpress site, that need to show pages using swipe, I choose to use Jquery Mobile, and I get it working fine. Now, we have 2 languages on site, using wpml plugin. And my Swipe Code works well, except when we use Change language button swipe fails.
Details on issue.
We have only 3 Text Only page in our website, in 2 language. And in Footer we have link to change language. Also client hate to have Ajax page loading, so what I did is I create three Div with data-role=page and put data-next, data-prev as #div-$postid. So the navigation works absolute fine. I put footer outside from data-role=page.
Now, when I click change button in footer, it load the english page [I saw it using Fiddler] and then take first data-role=page from server and replace /slide its content. However since it only pick the first data role, all other english page doesn't get in HTML [it just update DOM and doesn't navigate to english version]. so swipe fails as other english pages are not in dom.
Also, footer is not changing, so what I want is: can we simple force a Link to navigate instead of going swipe way? Jquery Mobile is enforcing swipe on all A tags, I do not want swipe to works anything outside data-role=page.
Hope I make sense.
Edit here is code: [not sure if this code will help at all]
<?php
get_header();
global $post;
$args = array('post_type' => 'mobile_slide','showposts' => '-1', "order" => "DESC");
$the_query = new WP_Query($args);
if($the_query->have_posts()){
while($the_query->have_posts()) { $the_query->the_post();
$prev =get_previous_post();
$next =get_next_post();
if($prev) {
$prev = "#page-" . $prev->ID; //get_permalink($prev->ID);
} else {
$prev='';
}
if($next) {
$next = "#page-".$next->ID; //get_permalink($next->ID);
} else {
$next='';
}
if (has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'slider_image' ); ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>" style="background-image:url('<?php echo $image[0]; ?>'); background-position:center center; background-color:#000; background-repeat:no-repeat; ">
<?php } else { ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>">
<?php } ?>
<div class="post_box">
<h2><blockquote><?php the_title(); ?></blockquote></h2>
<div class="post_entry">
<?php the_content(); ?>
</div>
</div><!-- post_box -->
</div>
<?php }
} ?>
<?php get_footer(); ?>
This is all I have, except that get_footer use Ul li based list where on LI change based on language variable, to show different images for either language.
To stop Ajax from loading pages/links, add to link anchor data-rel="external" or data-ajax="false". This will load page normally without any transition.
Reference: jQuery Mobile - Links
For those who have similar problem, I fix it by using following:
1) I add a "noswipe" class to A Tag so I can refer it in Jquery
2) I add following code
$(function(){
$(".noswipe").click(function(){
window.location.href= $(this).attr("href");
return false;
});
});
The above code simply enforce to skip the Mobile's parsing and calling and works for my case.

How can I append a <span> tag to a <h1> heading in Wordpress

I need to add a spantag to an h1 heading in wordpress. I tried writing in through the CMS but it renders the spantag as text.
The site's title is a name and I want to give different styles to the words.
Suggestions?
Following David Thomas's advice I've written this: but it appends the span last and empty.
<h1>
<a href="<?php bloginfo('url'); ?>/">
<?php
$completeName = bloginfo('name');
$split = explode(" ",$completeName);
echo $split[0]."<span>".$split[1]."</span>"
?>
</a>
</h1>
You should be using get_bloginfo as Felipe suggested, but still pass in the 'name' parameter.
I was just working on the same code for the same reason and thought I should post for future visitors:
<?php
$completeName = get_bloginfo('name');
$nameParts = explode(" ", $completeName);
echo '<span>'.$nameParts[0].'</span> '.$nameParts[1];
?>
Apply the style to the h1 instead.
By the way, you probably want to edit the theme.
What about:
<? echo get_bloginfo('name', 'raw'); ?>
Can't test it for now, but here's the documentation about it:
bloginfo()
==> it just echoes the result of get_bloginfo() and there's a second parameter to this function
==> wptexturize(), a function that WON'T be called so beware!