So I've written this script that checks whether the visitor is using a mobile device or a desktop in order to determine whether to display a background video or not (if it's a mobile device the output will be static image instead).
For some reason I end up seeing a play button centered overlaying the background image on the mobile layout. This is the code (note: site is based on WP and uses the wp_is_mobile() function to determine device) -
<section class="hero">
<?php
/*
Display background image
*/
if ( (get_field( 'hero_display' ) == 'image') || (wp_is_mobile()) ) :
$hero_image = get_field('hero_image');
?>
<div class="background-image" data-sm="<?php echo $hero_image['sizes']['sm']; ?>" data-md="<?php echo $hero_image['sizes']['md']; ?>" data-lg="<?php echo $hero_image['sizes']['lg']; ?>"></div>
<?php endif; ?>
<?php
/*
Display background video
*/
if ( (get_field( 'hero_display' ) == 'video') && (!wp_is_mobile()) ) :
?>
<div class="background-video">
<video autoplay="autoplay" preload="auto" poster="<?php the_field( 'hero_capture' ); ?>" loop="loop" muted="true" class="background-video">
<source src="<?php the_field( 'hero_source' ); ?>" type="video/mp4">
</video>
</div>
<?php endif; ?>
</section>
You may view the work in progress here - http://52.17.182.78
Any help or directions is much appreciated.
Edit: Solved! There are some tricks required for everything to display correctly on iOS7+ (and also possible on Android devices), see this article -
https://css-tricks.com/custom-controls-in-html5-video-full-screen/
Well, what about trying it the other way around? Make the image as default and if it is not on mobile, try to use video ;)
Try to add the attribute controls="false" to the video tag.
Related
I'm trying to get an image asset shown on the front-end using the wp_get_attachment_image WordPress function, but it doesn't seem to work with my options page on ACF.
Here is my code:
<?php
$image = get_field('logo', 'option');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
?>
Which looks like this on the back-end:
The picture you see above is an options page in ACF and when I try to query that image into the wp_get_attachment_image function, it doesn't work. However, when I run this code:
<img data-src="<?php the_field('logo', 'option'); ?>" alt="footer logo" class="lazyload" />
which is within an image tag, it works just fine.
I copied and pasted what was shows on the ACF docs located here (Basic Display ID), but it's not showing the image on the front-end.
Anything I'm missing guys?
Thanks a lot!
Return value in field should be Image ID. See Screenshot
What is the return value type you used? Image Array, Image URL, Image ID
And you need to get a field like this:
get_field('logo'); why do you add option?
More info here:
https://www.advancedcustomfields.com/resources/image/
wp_get_attachment_image requires the first parameter to be an image ID. In your case, if you are seeing the image using the code <img data-src="<?php the_field('logo', 'option'); ?>" alt="footer logo" class="lazyload" /> then get_field('logo', 'option') is returning the url of the image.. not the ID which is what you need if you are using wp_get_attachment_image.
What you need to do is change the Return Value of your logo field to Image ID.
Then you might have to re upload the image.
And also change this code <img data-src="<?php the_field('logo', 'option'); ?>" alt="footer logo" class="lazyload" /> to <img data-src="<?php echo wp_get_attachment_url(get_field('logo', 'option')); ?>" alt="footer logo" class="lazyload" />
ACf plugin returns value as you have set the return type.
If you have sent the return type as Image array then :
$image[0] -> full or $image[0][$full] or $image[$full] depending on the number of image uploaded.
If you have set return type as Image url:
<img src="<?php $image; ?>"> would do the work.
If you are setting return type as Image Id:
$img2 = wp_get_attachment_image_src(get_post_thumbnail_id($image),
$full); echo $img2[0];
I guess above methods will surely help you out.
Thanks
So I have a WP_Query looping through my custom post types and I'm looking to customize the src of my image tags based on which post in the loop it is. What is the cleanest way to achieve this.
consider this as what my loop is spitting out on each iteration:
<div class="partnerships p-section">
<div class="-display-inlineBlock partnerships icon">
<img style="min-width:71px;" src="<?php bloginfo('template_url')?>/images/icons/trainingAndDevelopment.svg">
</div>
<div class="-display-inlineBlock" style="width:70%">
<h1><?php the_title();?></h1>
<hr>
<p><?php the_content(); ?>
</p>
</div>
</div>
Why you don't use post thumbnail?
<div class="partnerships p-section">
<div class="-display-inlineBlock partnerships icon">
<img style="min-width:71px;" src="<?php the_post_thumbnail_url(); ?>">
</div>
<div class="-display-inlineBlock" style="width:70%">
<h1><?php the_title();?></h1>
<hr>
<p><?php the_content(); ?>
</p>
</div>
</div>
EDIT:
Then you need to allow upload SVG.
But BE WARNING: Allow upload SVG is not good for security
(take a look: https://secupress.me/blog/add-svg-support-in-wordpress-medias-yes-but-no/)
So DO NOT USE THE FOLLOWING CODE, which one can see everywhere.
function custom_mtypes( $m ){
$m['svg'] = 'image/svg+xml';
$m['svgz'] = 'image/svg+xml';
return $m;
}
add_filter( 'upload_mimes', 'custom_mtypes' )
FIRST SOLUTION
I don't know how to clean SVG on upload, luckily a plugin that does all that exists. This plugin also fixes some others issues with svg.
https://wordpress.org/plugins/scalable-vector-graphics-svg/
SECOND SOLUTION
If only admin need to upload svg
You can use following code:
function custom_mtypes( $m ){
if(get_current_user_id()==1){
$m['svg'] = 'image/svg+xml';
$m['svgz'] = 'image/svg+xml';
return $m;
}
}
add_filter( 'upload_mimes', 'custom_mtypes' );
If you speak French here is an interesting discussion on this subject
https://wpchannel.com/autoriser-envoi-fichiers-svg-wordpress/ (read comments, DON'T USE THE CODE on the top of this article)
I have just begun exploring CSS and am looking forward to gain an in-depth understanding of the language.
One of the issues I'm facing with a project is the alignment of the products in mobile view.
Website - http://klcl.com.my/product-listing/
In the mobile view, the products are touching the right side of the screen. I want them to be centered. I tried adding a 'margin-right: 15px' and it works; however, that new line of code affects the social media icon in the footer as well. I'm guessing because both the product list and the icon are using the '.col-md-4' class tag.
Here is the code:
<div class="col-md-9 product-listing-main">
<div class="row">
<?php
$args = array(
'posts_per_page' => -1,
'post_type' => 'product'
);
$query = new WP_Query($args);
while ($query->have_posts()) :
$query->the_post();
?>
<div class="col-md-4">
<figure>
<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID));?>" />
<figcation><?php the_title(); ?></figcation>
</figure>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
</div>
How can I align the products to the middle without affecting any other elements on the website? Any help will be greatly appreciated.
After a short look at your code i see that you are often manipulating the paddings of bootstrap elements (container, col-* …) and that leads to confusion. Try to avoid this and everything runs fine.
add this to your css to reset the previous settings:
.on-social{margin-right:initial !important;}
or
.on-social{margin-right:0px !important;}
please consider margin: 0 auto; for centering the elements.
I have a wordpress theme where the logo is defined in header.php but I would like to display a different logo if they go to a certain page.
The code I am using is below, but it just returns a blank white page when visit the site when using it.
Any ideas?
<?php
if(is_page('compliance')){
<img src="http://www.url.com/images/logo2.png" alt="url.com"/>
}
else { <img src="http://www.url.com/images/logo1.png" alt="url.com"/>
}
?>
<?php
if(is_page('compliance')){
?>
<img src="http://www.url.com/images/logo2.png" alt="url.com"/>
<?php } else { ?>
<img src="http://www.url.com/images/logo1.png" alt="url.com"/>
<?php } ?>
$pagename = get_query_var('pagename');
if($pagname == 'compliance'){ ...
You can read this : How to get the current page name in WordPress?
I'm trying to add next and previous buttons to the static pages on my wordpress site.
I've been able to find some content on how to add these buttons to your blog post but haven't been able to find anything like this regarding static pages.
I'd like to add next and previous buttons to appear on the child pages within all the parent pages on my site, so you'd be able to use a link to navigate to the next/previous page located within the same parent.
Does anyone know how I could go about doing this or of any plugin that might help me out?
--
Thanks to markratledge, I've almost got it, but I just having one problem.
It seems the next and previous links are working almost how I'd like but they are coming in in alphabetical order when I want to to match the order I've got my pages ordered in.
this is what I've tried but it doesn't seem to work
$pagelist = get_pages('child_of='.$post->post_parent.'sort_column=menu_order');
Seems I just figured it out was missing &... should look like this.
$pagelist = get_pages('child_of='.$post->post_parent.'&sort_column=menu_order');
This should work, from the Wordpress Codex (Next and Previous Links « WordPress Codex).
Exclude pages with parameters in get_pages: http://codex.wordpress.org/Function_Reference/get_pages
(Or this plugin http://wordpress.org/extend/plugins/next-page/):
<?php
$pagelist = get_pages('sort_column=menu_order&sort_order=asc');
$pages = array();
foreach ($pagelist as $page) {
$pages[] += $page->ID;
}
$current = array_search($post->ID, $pages);
$prevID = $pages[$current-1];
$nextID = $pages[$current+1];
?>
<div class="navigation">
<?php if (!empty($prevID)) { ?>
<div class="alignleft">
<a href="<?php echo get_permalink($prevID); ?>"
title="<?php echo get_the_title($prevID); ?>">Previous</a>
</div>
<?php }
if (!empty($nextID)) { ?>
<div class="alignright">
<a href="<?php echo get_permalink($nextID); ?>"
title="<?php echo get_the_title($nextID); ?>">Next</a>
</div>
<?php } ?>
</div>