I have two PHP variables:
$video_mp4: Which is a video file.
$video_poster: Which is an image.
For desktop, I want $video_mp4 to load as an ambient video, which it does. But on max-width: 576px I want the $video_poster to show.
Unsure on how to approach this though. This is my current code and thought process:
<div class="hero__container--teaser">
<div class="hero__teaser">
<!-- By default, show video -->
<?php echo wp_video_shortcode( $video_mp4 ); ?>
<!-- If max-width 576px, show image -->
<?php echo "<img src='$video_poster'>;" ?>
</div>
</div>
Wondering what the best practise here?
Wrap video content with .video and image content with .image and using CSS Media queries in max-width: 576px show image and hide video
.hero__teaser .image {
display: none;
}
#media (max-width: 576px) {
.hero__teaser .image {
display: block !important;
}
.hero__teaser .video {
display: none;
}
}
<div class="hero__container--teaser">
<div class="hero__teaser">
<div class="video">
<?php echo wp_video_shortcode( $video_mp4 ); ?>
</div>
<div class="image">
<?php echo "<img src='$video_poster'>;" ?>
</div>
</div>
</div>
Related
.s-assets {
width: 100%;
height: 60vh;
&__block {
height: 10vh;
background-image: url("http://nas.gansa.pl/2019/puszczaknyszynska/wp-content/uploads/2019/10/Inteligentny_obiekt_wektorowy_kopia_12.png");
}
&__content {
width: 500px;
background-image: url('http://nas.gansa.pl/2019/puszczaknyszynska/wp-content/uploads/2019/10/Inteligentny_obiekt_wektorowy_kopia_12.png');
}
}
<div class="col col-12 col-sm-6 col-lg-3 s-assets__block s-assets__block--first">
<?php if (have_rows('sub_first_asset')) : ?>
<?php while (have_rows('sub_first_asset')) : the_row();
?>
<div class="s-assets__content">
<h3 class="s-assets__block-title">
<?php echo get_sub_field('sub_sub_first_asset_title'); ?>
</h3>
<div class="s-assets__block-img">
<img alt="" src="<?php echo get_sub_field('sub_sub_first_asset_img'); ?>" />
</div>
</div>
<?php endwhile;
endif; ?>
</div>
So I have to create this:
I have made acf's for h2 and img (image of bed, in this case). Then I had to export those two frames (vertical and horizontal) and place them as .png, but I can't put them ino html structure, I have to use css.
This doesn't work and I have no idea why... maybe there is something I do not understant about how css actually works?
Please be undarstaning, this is my first time I do such things.
note the difference in html, in your html there was only one class and not in your css you were using two
example .assets_title and not css with sass you were getting this: .assets.title{}
so in html must contain two classes in the
Modify the code below test please:
.s-assets {
width: 100%;
height: 60vh;
&.__block {
height: 10vh;
background-image: url("https://i.stack.imgur.com/xoRYM.png");
}
&.__content {
width: 500px;
background-image: url('https://i.stack.imgur.com/xoRYM.png');
}
}
.__block {
height: 10vh;
background-image: url("https://i.stack.imgur.com/xoRYM.png");
}
.__content {
width: 500px;
background-image: url('https://i.stack.imgur.com/xoRYM.png');
}
<div class="col col-12 col-sm-6 col-lg-3 s-assets__block s-assets__block--first">
<?php if (have_rows('sub_first_asset')) : ?>
<?php while (have_rows('sub_first_asset')) : the_row();
?>
<div class="s-assets __content">
<h3 class="s-assets __block-title">
<?php echo get_sub_field('sub_sub_first_asset_title'); ?>
</h3>
<div class="s-assets __block-img">
<img alt="" src="<?php echo get_sub_field('sub_sub_first_asset_img'); ?>" />
</div>
</div>
<?php endwhile;
endif; ?>
</div>
<div class=" testingclass wpd-page-title wpd-page-title_horiz_align_left wpd-page-title_vert_align_middle" style="background-color:#ffffff;height:80px;color:#222328;margin-bottom:15px;">
<div class="wpd-page-title__inner">
<div class="container">
<div class="wpd-page-title__content">
<div class="page_title">
<h1>Multilingual Digital Marketing</h1>
</div>
</div>
</div>
</div>
</div>
CSS for these are
body.term-107 .wpd-page-title {
background: url(https://khaleejdev.com/kds/newtornetto/wp-
content/uploads/2018/05/107.jpg)no-repeat;
background-size: 100%;
}
I want to make the below Header background image blur as below of this page.
https://khaleejdev.com/kds/newtornetto/product-category/multilingual-digital-marketing/
Please help me achieve it without affecting title. I tried all the previous answers of Stackoverflow but it didn't worked.
Actually i have a bunch of php code for wordpress product archive template, if html can adjusted to attain the feature i want without affecting current layout as shown in url https://khaleejdev.com/kds/newtornetto/product-category/multilingual-digital-marketing/ .
Please check the image , i want blur affect on image only, not on title.
It would be great.
Here is the php code
<div class=" testingclass wpd-page-title<?php echo !empty($page_title_classes) ? esc_attr($page_title_classes) : ''; ?>"<?php echo !empty($page_title_styles) ? ' style="'.esc_attr($page_title_styles).'"' : '' ?>>
<div class='wpd-page-title__inner'>
<div class='container'>
<div class='wpd-page-title__content'>
<div class='page_title content'>
<h1><?php echo esc_html($wpd_page_title); ?></h1>
<?php if(!empty($page_sub_title) && $page_title_horiz_align != 'center'): ?>
<div class='page_sub_title'><div><?php echo esc_attr( $page_sub_title ); ?></div></div>
<?php endif; ?>
</div>
<?php if (!empty($page_sub_title) && $page_title_horiz_align == 'center'): ?>
<div class='page_sub_title'><div><?php echo esc_attr( $page_sub_title ); ?></div></div>
<?php endif; ?>
<?php if ($page_title_breadcrumbs_conditional == 'yes'): ?>
<div class='wpd_breadcrumb'><?php
/** Breadcrumb Template */
get_template_part( 'template-parts/header/partials/breadcrumb' );
?></div>
<?php endif; ?>
</div>
</div>
</div>
</div>
You can use the following CSS declaration to blur a background image:
filter: blur(value);
N.B. If you want the <div> to contain other content but you wish to blur only the background image, then apply the background image and the blur to a ::before pseudo-element.
Working Example:
.wpd-page-title {
position: relative;
width: 100%;
height: 180px;
}
.wpd-page-title::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://picsum.photos/300/300) no-repeat;
}
.blur-3px::before {
filter: blur(3px);
}
.blur-6px::before {
filter: blur(6px);
}
.blur-9px::before {
filter: blur(9px);
}
<div class="wpd-page-title"></div>
<div class="wpd-page-title blur-3px"></div>
<div class="wpd-page-title blur-6px"></div>
<div class="wpd-page-title blur-9px"></div>
Read More on CSS Filters:
https://css-tricks.com/almanac/properties/f/filter/
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
https://www.sitepoint.com/css-filter-effects-blur-grayscale-brightness-and-more-in-css/
You have two options,
You can take out the "title" from the background parent div and use position absolute property to align it on the background image and apply blur code for the parent div
.testingclass{
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
like following
<div class=" testingclass wpd-page-title wpd-page-title_horiz_align_left wpd-page-title_vert_align_middle" style="background-color:#ffffff;height:80px;color:#222328;margin-bottom:15px;">
</div>
<div class="wpd-page-title__inner">
<div class="container">
<div class="wpd-page-title__content">
<div class="page_title">
<h1>Multilingual Digital Marketing</h1>
</div>
</div>
</div>
</div>
Use PSD to make the image Blur, because you cant control the blurred effect to inside elements if you apply blur or opacity to parent
You can notice that, the blur affect is working for the 3 image grid section, because the image and text are separated, and you are using position: absolute for the text div.
I have this CSS for FULL Background image. Now i want to pass PHP variable to this URL to change the background image dynamically. Plz let me know . my codes are..
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/6.jpg");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
You can use Inline or internal css as follow:
Internal
<style>
div { background-image: url(<?php echo $imageURL;?>); }
</style>
Inline
<div style="background-image:url(<?php echo $imageUrl?>) no-repeat center center fixed">
</div>
Reference from Change css background-image with php
you can use php variable in your style code but must need to write css code after php variable . something like this
<?php
$bg_image = '../img/picmax/6.jpg'; // this is static value for test
?>
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
and add style after define php value then you can use this code
<style>
.imgback {
padding-top: 140px;
height: 100vh;
min-height: 400px;
background-size: cover;
background-image: url("<?=$bg_image?>");
}
</style>
of you can use this php value in your html code
<?php
$bg_image = '../img/picmax/6.jpg';
?>
<section class="imgback" style="background-image: url('<?php echo $bg_image ?>')">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
hope it will help you.
You can simply load a data from database and place it inside everywhere you like.
`<?php
$a = "6.jpg";
?>`
then insert it into your css
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
But that won't be good enough because php only runs once on every refresh or load. (you can use jQuery) or you better use JavaScript for these type of works as because they are triggered by events so you can change images without refreshing the page
I built a blog under wordpress. I am searching for a way to display article like this :
the php / html
<div id="uno">
<?php the_title(); ?>
<?php the_excerpt();?>
Read more...
</div>
and the css
#uno{width: 25%; height:100%; float:left; text-align:center; padding-top: 20px;}
Have a look to isotope/masonry => http://isotope.metafizzy.co/layout.html
What's happening is your images are of different sizes so the gaps look different and because one image was larger then the others that's the primary gap for the following images.
One way I found that fixed this in my case was to navigate to your functions.php file and add this line of code in
add_theme_support( 'post-thumbnails' );
add_image_size( 'myimage', 100, 100 );
change the myimage portion to what ever you like and the sizes that you would like your image to be fixed as.
After that you can then pull your image using <?php the_post_thumbnail('myimage', array( 'class' => "our-size")); ?>
also just to be safe you could add some css.
.our-size {
height: 100px;
width: 100px;
max-width: 100px;
max-height: 100px;
margin-bottom: 2px;
}
Here is the solution: using isotope.
css :
.grid-image-item,
.grid--images .grid-sizer { width: 25%;}
.grid-image-item {
float: left;
}
.grid-image-item img {
display: block;
max-width: 100%;
}
home.php :
load "isotope-docs.min.js" on the top of your page, juste bellow "get_header" using this
<script src="where-you-placed-it/isotope-docs.min.js">
</script>
<div class="duo__cell example__demo">
<div class="grid grid--images" data-js-module="imagesloaded-progress">
<div class="grid-sizer"></div>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="grid-image-item">
<?php the_title(); ?>
<?php the_author() ?>
<?php the_time('j M Y') ?>
<?php the_category(', ') ?>
<?php the_excerpt();?>
<?php echo get_permalink(); ?>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
Could some body help with this?
I have this code which prints 4 picture articles on a row.
<article>
<div class="post-thumbnail img">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>
</div>
<!--/.post-thumbnail-->
</article>
Any time i try to add a subtitle, it does not stay on a row any more. like this
<article>
<div class="post-thumbnail img">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>
</div>
<div class="post-thumbnail img">
<?php the_title();?>
</div>
<!--/.post-thumbnail-->
</article>
What happens is, the fist image text will be below the image, the rest will be on top..But all needs to be below those images.
Any solution?
CSS`
.post-thumbnail img {
height: auto;
margin-bottom: -16px;
float: left;
width: 23.0%;
margin-right: 2%}
`
You should give us the HTML code generated by the PHP function.
So far, I don't know if you haven't made a mistake in your CSS code :
/* .post-thumbnail img = get the <img> inside a <div class="post-thumbnail"> */
/* .post-thumbnail.img = get the <div class="post-thumbnail img"> */
.post-thumbnail.img {
height: auto;
margin-bottom: -16px;
float: left;
width: 23.0%;
margin-right: 2%;
}
Hope that help.