So I want to position my a meta-data div in the corner of every post image, but all the images are different sizes. How do I do this?
Heres an example of what I need:
This is the loop:
<div id="images">
<?php wp_get_attachment_image(); ?>
</div>
<div id="date">
<?php get_the_date(); ?>
</div>
I posted this # wordpress.stackexchange but they said to post it here
It doesn't matter what size the image is. You have to give the container div a position:relative and the corner div a position:absolute with top:0 and left:0
HTML:
<div id="images"><?php wp_get_attachment_image(); ?>
<div id="date"><?php get_the_date(); ?></div>
</div>
*note date is inside the image tag!
CSS:
#images{
position:relative;
}
#date{
position:absolute;
top:0;
left:0;
}
Related
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 am using this simple code in my view.php. The div is aligned horizontally correctly, but it aligns vertically in print.
<div class="row">
<div class="col-lg-6">
<div class="col-lg-7" style="padding:5px;box-sizing: border-box;border: 1px solid #ddd;background-color:#f9f9f9">
<b>Patient Name:</b> <?= $model->patient_name ?>
</div>
<div class="col-lg-5" style="padding:5px;box-sizing: border-box;border: 1px solid #ddd;background-color:#f9f9f9">
<b> Auth. No.:</b> <?= $model->authorisation_number ?>
</div></div> </div>
I want these div to align horizontally in print as well. I am not using any custom print.css for this page.
Ok I found the answer-
I need to use <div class=col-xs-*> in place of <div class = col-lg-*> that mostly achieves what I am looking for.
I welcome if there is any better workaround.
Thanks.
I want to display 30 same div. So I am taking for loop with showing 30 div. Now I want div in only one line. If the div is out of screen then it will show horizontal scroll bar.
The code is:
<div id="sort-able" >
<?php for($j=0;$j<30;$j++){?>
<div class = "dragg-able" >Home - <?php echo $j;?></div>
<?php } ?>
</div>
<div id="sort-able" style="width: 100%; overflow-x: scroll; white-space:nowrap;" >
<?php for($j=0;$j<30;$j++){?>
<div class = "dragg-able" style="display:inline; ">Home - <?php echo $j;?></div>
<?php } ?>
</div>
Example: http://kelostrada.pl/test.php
How do i remove the inline-block space between two divs that are a part of the wordpress loop? They are supposed to sit side-by-side, each being 50% width. I realize I could change the width to 49% or use floats, but I would like to leave it this way if possible.
I know you normally can do it by eliminating the white space in the coding with comments as below:
<div class="before-after">
<img src="images/ba_01.jpg" alt="">
<h4>Frick TDSH 355XL<br><small>Slide Valve and Rotor Housing</small></h4>
</div><!-- this comment here eleminates the spacing
--><div class="before-after">
<img src="images/ba_02.jpg" alt="">
<h4>Frick NGC300 Gear Plate</h4>
</div>
This is my wordpress loop, and no matter where I put the comment, and still adds white space in the actual returned html.
<?php
$my_query = new WP_Query(
array(
'cat' => '2',
)
);
while ( $my_query->have_posts() ) : $my_query->the_post();
?>
<div class="before-after">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<h4><?php the_title(); ?><br><small><?php the_content(); ?></small></h4>
</div><!-- --><?php endwhile;?><?php wp_reset_postdata();?>
And this is what is showing up in Developer Tools:
<div class="before-after">...</div>
<!---->
<div class="before-after">...</div>
<!---->
I'm sure I'm just overlooking something easy, but any help would be appreciated. Thanks!
#Prusprus here it is straight from the source code:
<div class="before-after">
<img width="500" height="300" src="http://localhost:8888/wp-content/uploads/2013/10/ba_02.jpg" class="attachment-post-thumbnail wp-post-image" alt="Frick NGC300 Gear Plate" />
<h4>Frick NGC300 Gear Plate<br><small></small></h4>
</div>
<!---->
<div class="before-after">
<img width="500" height="300" src="http://localhost:8888/wp-content/uploads/2013/10/ba_01.jpg" class="attachment-post-thumbnail wp-post-image" alt="Frick TDSH 355XL" />
<h4>Frick TDSH 355XL<br><small><p>Slide Valve and Rotor Housing</p>
</small></h4>
</div>
<!---->
There may be a different way to mark this as answered, not sure, but #Prusprus gave me the solution in a comment above.
I simply had to remove a line break at the start of my code between the closing php tag and the start of my div.
The traditional way of floating inline-block elements could correct this, but since its unfavored there is another way.
You can also set the letter spacing of the parent element to -0.31em to solve this and set the letter-spacing back to normal in the divs themselves. I'll set up a jsfiddle in a sec.
CODE
.row {
letter-spacing:-0.31em;
}
.col {
letter-spacing:normal;
display:inline-block;
width:50%;
}
Good luck!
Two methods here
Set the parent's font-size to 0 and then restore it on the inline-block elements.
Apply a suitable margin to the last div.
DEMO x 2
HTML
<div class="opt1">
<div class="before-after"></div>
<div class="before-after"></div>
</div>
<div class="opt2">
<div class="before-after"></div>
<div class="before-after"></div>
</div>
CSS
.opt1, .opt2 {
margin:10px;
border:1px solid green;
}
.before-after {
display:inline-block;
background:lightgrey;
width:50%;
height:100px;
font-size:16px
font-size:1rem;
}
.opt1 {
font-size:0;
}
.opt2 .before-after{
vertical-align:top;
}
.opt2 .before-after:last-child {
margin-left:-.25em;
}