I am currently creating a website within Wordpress using the Salient theme. I have managed to include a video into the background using the pre-installed video background feature. This works fine, but is it possible to include multiple videos and show random videos on refresh? Or does anyone know of a plugin to allow this type of feature?
Many thanks in advance!
David.
If you can write some code, you can show random video as background. First you have to create a array of video links something like this:
<?php
$bg = array('https://www.youtube.com/watch?v=38OUdsf', 'https://www.youtube.com/watch?v=38OUdsf' ); // array of video links
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // get a random url
?>
And then set the video:
<iframe src="<?php echo $selectedBg; ?>?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
Here is an example of how to create full page video.
Related
I'm trying to accomplish the following task: I have a page that has several images, 1 is large and is the main image and then several images below which are sized smaller. What I want to do is that when a user clicks one of the smaller images, that image is loaded and replaces the main product image.
An example of one of my pages is: http://footybootsdb.com/adidas-x16-1/
I would like this to occur on multiple different pages so any code that can be implemented on several pages would be appreciated.
The page is configured using the 'Page Builder' plugin for Wordpress.
You can do it using js. Firstly place a big-sized image's url on the small-sized image via the data attribute like this:
<div id="divContainBigSizeImage">
<img class="small-size" src="http://main-image.jpg"
</div>
<img class="small-size" src="http://image-with-small-size.jpg" data-big-size="http://image-with-big-size.jpg">
<img class="small-size" src="http://another-image-with-small-size.jpg" data-big-size="http://another-image-with-big-size.jpg">
Then you can bind js click event to that image to gain the big-sized image's url. If using jquery, it looks like this:
$('.small-size').on('click', function() {
var bigSizeUrl = $(this).data('big-size'); // get the big-sized image's url
var newImgHTML = '<img src="' + bigSizeUrl + '">'; // create an html element
$('#divContainBigSizeImage').html(newImgHTML); // replace the current big-sized one
})
Install a light box plugin, when user clicks on the image, it will open the bigger version.
I'm building a website for a nutritionist in wordpress, where it has every patient area.
So I was thinking to make a section with a motivation youtube video and this code will be placed to every customer page.
Is there a way I can place for example [motivation_video] on the wordpress and that I could change the youtube link on my backend whenever I want? So I won't need to change all the pages.
Thank you so much!
Inside your wordpress functions.php file place the following code with your modifications:
function video_function($atts, $content = null){
$shortcode_return = '<iframe width="560" height="315" src="video_url_here" frameborder="0" allowfullscreen></iframe>';
return $shortcode_return;
}
add_shortcode('motivation_video','video_function');
Whenever you want a new video, just change the video_url_here
Wordpress 4.3.1
Hi,
this is my first post at stackoverflow and I hope I did everything right.
I need a function that allows to output the Featured Image, or not. Just not uploading an image is no option, because the thumbnail next the excerpts is needed in any case.
The following combinations are needed:
Thumbnail and Featured Image are identical
Thumbnail and first image in the article are different
Thumbnail and no Featured Image
I need the function for case 2 and 3. In case 2, the Featured Image will be integrated via the editor.
I have already found this plugin: https://wordpress.org/plugins/hide-featured-image/
However, that solves the task only with CSS:
.has-post-thumbnail img.wp-post-image{ display: none; }
But I would like that the picture is not even putted out and loaded in the Browser.
I have the following solution found on the net. It is working so far that the checkbox is shown inside the Featured Image box and it also saves the state if it is checked, or not, after updating the article. However, the Featured Image continues to be output and I don't understand what is going wrong.
Here is the code that I copied to the functions.php:
/**
* Adds a checkbox to the featured image metabox.
*
* #param string $content
*/
add_filter( 'admin_post_thumbnail_html', 'optional_featured_image', 10, 2 );
/**
* Add a 'hide the featured image' checkbox to the Featured Image area
*/
function optional_featured_image( $content, $post_ID ) {
$content .= '<div class="hide-feat-image">';
// add our nonce field
$content .= wp_nonce_field( 'display_featured_image_nonce', 'display_featured_image_nonce', true, false );
// create our checkbox
$content .= '
<input style="margin: 5px;" type="checkbox" id="display-featured-image" name="display_featured_image" '. checked( get_post_meta( $post_ID, 'display_featured_image', true ), true, false ) .' value="1"/>
<label for="display-featured-image">Hide on post page?</label>
';
$content .= '</div><!-- hide-feat-image -->';
// return our appended $content
return $content;
}
add_action( 'save_post', 'save_optional_featured_image' );
/**
* Save our 'hide the featured image' checkbox to the Featured Image area
*/
function save_optional_featured_image( $post_id ) {
if (
// check nonce
!isset( $_POST['display_featured_image_nonce'] )
|| !wp_verify_nonce( $_POST['display_featured_image_nonce'], 'display_featured_image_nonce')
// make sure user is allowed to edit posts
|| !current_user_can( 'edit_post', $post_id )
)
return;
// sanitize our input to yes or no
$display = isset( $_POST["display_featured_image"] ) && $_POST["display_featured_image"] ? true : false;
// update our post
update_post_meta( $post_id, 'display_featured_image', $display );
}
And here's the WP snippet, I use at the template for the output:
<?php the_post_thumbnail('header-image'); ?>
I'm grateful for any advice! Thank you in advance for your effort!
Firstly I'd check in the database that this 'optional_featured_image' parameter is actually being set by your code. Check the prefix_postmeta table and lookup for the post you're editing.
When the template is output you need to have a conditional to check for this 'display_featured_image' parameter you've setup. Otherwise the_post_thumbnail() will always display.
Try this code in your template:
<?php
$optional_featured_image = get_post_meta( get_the_ID(), 'display_featured_image', true);
if( !$optional_featured_image )
the_post_thumbnail('header-image');
?>
I have an installation of Magento that integrates with Wordpress using the Fishpig Wordpress module.
As most WP users will know, when uploading an image Wordpress will create resized versions referencing the dimensions set in Media Settings (e.g. Thumbnail Size, Medium Size and Large Size). It also creates images for each custom thumbnail size you specify (e.g. via functions.php).
It appears as though the Fishpig Magento module only uses the Thumbnail image size.
Unfortunately I need to be able to display different sizes of the same image (i.e. the resized versions that Wordpress creates) on different pages. For example, the category page will display a small version, the post view page will display a larger version.
I was wondering if anyone has had any experience retrieving the other resized images via this module as I can't find much documentation on it (or if it's even possible with this module as I also couldn't see any code that would suggest this functionality).
Greatly appreciate the help.
I had the same issue...I wanted to create a recent posts widget and Fishpig has that well documented, but they didn't show an example of how to pull the featured image for the post.
But I found the answer in: /app/design/frontend/base/default/template/wordpress/post/list/renderer/default.phtml:
<?php if ($featuredImage = $post->getFeaturedImage()): ?>
<div class="featured-image left">
<img src="<?php echo $featuredImage->getAvailableImage() ?>" alt="<?php echo $this->escapeHtml($post->getPostTitle()) ?>"/>
</div>
<?php endif; ?>
You can change "getAvailableImage" to anyone of these to pull the different images sizes that wordpress produces:
getThumbnailImage()
getMediumImage()
getLargeImage()
getFullSizeImage()
getPostThumbnailImage()
getAvailableImage()
getImageByType($type = 'thumbnail')
Hope this helps!
Have try to do using below code. and working fine for me..
echo $featuredImage->getData('guid');
I'm using the fantastic Pods plugin to extend Wordpress's basic content types with a few custom ones. I've build an advanced custom type which means I don't get the automatic oEmbed support built into the native page/post types. I've structured it so my custom content type has a pod page using a PHP page template and I have the oEmbed option enabled for my WYISWYG fields that can embed videos.
I found this post which seems to indicate that a basic apply_filter function should automatically handle any embeds but I can't seem to get it to work. I'm a bit new to filters. The code I tried is below:
<?php
// Fetch body field content from $pods object
$mycontent = $pods->field('field_body');
$output = apply_filters('oembed_dataparse', $mycontent);
echo $output;
?>
I tried a variety of different filters such as the_content and others but none seemed to work. I believe it may be a scoping/conflict issue with Pod pages since even writing out entire iFrame embed code into the template won't work but only displays an empty iFrame. The global oembed function does the same, i.e.
$videourl = 'http://www.youtube.com/watch?v=dQw4w9WgXcQ';
$htmlcode = wp_oembed_get($videourl);
echo $htmlcode;
In the context of the page template will output:
<iframe width="500" height="375" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/dQw4w9WgXcQ?feature=oembed">
<html>
<head>
</head>
<body>
</body>
</html>
</iframe>
field() gets the value of the field, display() gets the output of the field (ran through any related filters / functions the field is configured to run through).
$mycontent = $pods->field('field_body');
should be
$mycontent = $pods->display('field_body');
For more information, see http://pods.io/docs/field/ vs http://pods.io/docs/display/
Calling apply_filters('oembed_dataparse', $mycontent) is incorrect since this meant to add functionality for processing other data types (photo, video etc) not catered for by default. What you want to do is mimic how WordPress does the embedding. I haven't tested the code below, but it seems to me the way to go about triggering the embed functionality:
global $wp_embed;
$mycontent = $pods->field('field_body');
$output = $wp_embed->autoembed($mycontent);
echo $output;