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.
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>
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>
<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 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>
I'm creating a WordPress theme and can't get two posts to nest next to each other correctly, the guys on the WP forums haven't been any help (one response). Without any of the WP hookups (the PHP stuff) the divs nest correctly, I styled and structured them like this:
CSS:
.singlecolumnpost .post {
float: left;
display: block;
}
.twocolumnpost .post {
float: left;
display: block;
width: 50%;
}
.singlecolumnpost img {
display: block;
max-width: 940px;
max-height: 529px;
width: 100%;
padding: 5px 0;
}
.twocolumnpost img {
max-width: 460px;
max-height: 259px;
width: 100%;
padding: 5px 0 5px 0;
z-index: 4;
}
.post-thumb {
width: 100%;
margin: 0 auto;
}
HTML:
<div id = "main">
<div class = "singlecolumnpost">
<div class = "post">
<div class = "post-thumb">
<img src = "img/db.jpeg"
</div>
</div>
</div>
<div class = "twocolumnpost">
<div class = "post">
<div class = "post-thumb">
<img src = "img/db.jpeg"
</div>
</div>
<div class = "post 2">
<div class = "post-thumb 2">
<img src = "img/db.jpeg"
</div>
</div>
</div>
<div class = "singlecolumnpost">
<div class = "post">
<div class = "post-thumb">
<img src = "img/db.jpeg"
</div>
</div>
</div>
</div>
This works because I declared a post class twice inside the twocolumnpost. Now for the wordpress structure (same styling):
<div class = "twocolumnpost">
<div <?php post_class() ?>>
<?php if (has_post_thumbnail()) : ?>
<div class = "post-thumb">
<?php the_post_thumbnail(); ?>
<div class = "caption">
<p class = "caption-text">Caption</p>
</div>
</div>
<?php endif; ?>
</div>
</div>
This makes them nest weirdly as you can see here: http://suburbia.comoj.com/wordpress/
I'm struggling to get them to play ball and just sit next to each other with the correct padding and I'm not sure if this is because I've only declared one post in the twocolumnpost. If I do declare two posts, it doubles the image which isn't right.
So what I'm asking, is either to have the posts aligning nicely with current structure, or a method of checking the previous post for the first post id, and displaying the next one on the second post.
First, get rid of the empty pagination div ntgCleaner is right that is messing it up.
The other thing is that your CSS applies a 5px padding to .twocolumnpost img but the post on the left isn't an image, it's a video in an iframe tag so that isn't being applied. Either change the CSS selector to be .twocolumnpost img, .twocolumnpost iframe or remove the padding.
This is what it looked like when I did that: