I am currently developing a Wordpress theme.
The problem I am facing is the following:
Articles do not collapse as they should.
PHP & HTML
<script>
/* adds classes based on image orientation */
$(document).ready(function() {
$("article:has(.landscape)").addClass( "l-article");
$("article:has(.portrait)").addClass( "p-article");
});
</script>
<div class="blog-list container">
<div class="row grid index-pos">
<?php
/* wp loop */
?>
/* article that doesn't collapse well */
<article class="col-md-6 col-sm-12 col-xs-12">
<a href="<?php the_permalink(); ?>">
<?php image_filter($size) ; ?> /* displays wp thumbnail with class .landscape for landscape and .portrait for portrait
</a>
<div class="item-holder">
/* code that shows title and excerpt
</div>
</article>
<?php endwhile; ?>
</div>
</div>
CSS
article .portrait {
height: 833px;
}
article .landscape {
height: 300px;
}
.l-article {
height: 530px;
}
.p-article {
height: 1100px;
}
col.*.* { float:left }
image showing issue
What is causing the issue?
I have tried using masonry from here but it doesn't do the job in terms of aligning the images well together.
Thank you.
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 have links of images stored in database,I want to bring the set of images at the centre of the screen (which in my case is left-aligned). No matter how many pictures comes dynamically, the set of the images should be aligned centre.
Iam using bootstrap for designing and here is how my code look like:
<div class="row">
<div class="col-md-12 text-center">
<?php
foreach($n as $val)
{ // loop to iterate 'n' image links
?>
<div class="col-md-1">
<img src="<?php echo $val; ?>" // images showing up.
</div>
<?php
}
?>
</div>
</div>
I am adding an image below to demonstrate the situation.
I have tried the following:
bootstrap classes : center-block (which is based on margin)
bootstrap classes : text-center (which is based on text-align)
bootstrap classes : "img-responsive center-block"
Please Note:
I don't want to push the content toward centre forcefully (like using of bootstrap class "col-md-push-3" or something as such, because the number of images to be displayed is not fixed. They vary time to time)
The column classes you are using to wrap the images [col-md-1]are floated left by default....you'd have to override that behaviour.
.text-center .col-md-1 {
float: none;
display: inline-block;
}
.text-center .col-md-1 {
float: none;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
You can still use some good old CSS using FlexBox, as shown on this Fiddle. Basically, it uses a structure like:
<div class="container">
<div class="picture">
<img src="http://lorempixel.com/image_output/food-q-c-200-200-1.jpg" />
</div>
</div>
And then, with some FlexBox properties, you can achieve what you want:
.container {
display: flex;
}
.picture {
flex: 1 1;
width: 100%;
}
img {
width: 100%;
}
To sum up, you put the container in flex mode, and then all its div would occupy same space. Some intermediary divs are required in order to keep the aspect ratio of each image.
If you want to center them in case of you have less pictures available, you can still use the justify-content: center; property, setting a maximum width on the divs, such as this other Fiddle.
Note however that this solution would not work on IE9-.
Make a div with text-align:center
Amand then make a div inside it with display:inline-block
I'm currently working on a wordpress template where the title of a post is hidden and on hovering the post, it should be displayed on the bottom of the browser. To simplify, the post has this structure:
<article class="post">
<header class="article-header">
<h2 class="entry-title">
Post Title
</h2>
</header>
<section class="entry-content">
Post Content
</section>
</article>
Basically, I'd like to have a fixed in the body, that sits on the bottom of the browser and when a post is hovered, the content of its child element is passed into the . My approach so far was to have all elements constantly fixed to the browser bottom (hidden) and on a hover, each of them will be display. That led to a couple of problems and I thought I'd might be easier to have one empty div, which just grabs the title information.
Can anyone help me with that, maybe with jQuery or php?
Thanks!
you mean, something like this? http://jsfiddle.net/rKhqT/5/
HTML:
<article class="post">
<header class="article-header">
<h2 class="entry-title">
Post Title
</h2>
</header>
<section class="entry-content">
Post Content
</section>
</article>
<footer></footer>
CSS:
html, body {
margin: 0;
height: 100%;
}
.entry-title {
display: none;
}
footer {
position: fixed;
left: 0;
bottom:0;
width: 100%;
height: 30px;
border: 1px solid black;
}
JS (requires jQuery) :
$(document).ready(function() {
$('article.post').mouseover(function() {
$('footer').text($(this).find('h2').text());
});
$('article.post').mouseout(function() {
$('footer').text('');
});
});
I want to create tabs that function like toggles, but instead only one toggle can be active at one time. The content of the tab also needs to be above the the tabs themselves. The problem is I am using a loop to generate the content as well as the tabs themselves.
I've got a nice javascript code right here that works perfectly fine. I understand this perfectly as well. The only problem is that it obviously doesn't disable other toggles when another one is clicked. Also having one "tab" / "toggle" always active. Code that could probably check the div id with a prefix of "post" and make all div id's with "post" to display:none besides the one that was clicked on. That would be perfect if that could be possible. Another way I could think of this is putting all the generated content into a container, and it simply disables all id's in the container besides the one that was clicked.
If this code can be modified to achieve that, it would be great. This is some very simple code that I understand very clearly. All I need is that it behaves more like tabs where only one can be active at once.
<script type="text/javascript">
function toggleMeMirror(a){
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
</script>
HTML / PHP
Loop 1 - The Content
<?php while ($queryepisodemirrors->have_posts()) : $queryepisodemirrors->the_post(); ?>
<?php if(get_post_meta(get_the_ID(), 'parentIDmirror', true) == $postIDCheck) { ?>
<div id="post-<?php the_ID(); ?>" style="display:none;">
<center><?php the_title(); ?><br /><br />
<?php echo get_post_meta(get_the_ID(), 'mirror_embed_code', true); ?>
<?php wprp(true);?>
</center>
</div>
<?php } ?>
<?php endwhile; ?>
Loop 2 - The actual toggles / tabs
<?php while ($queryepisodemirrors->have_posts()) : $queryepisodemirrors->the_post(); ?>
<?php if(get_post_meta(get_the_ID(), 'parentIDmirror', true) == $postIDCheck) { ?>
<div style="float: left; padding: 4px;">
<center>
<div class="post-<?php the_ID(); ?>" onclick="return toggleMeMirror('post-<?php the_ID(); ?>')" >
<div style="overflow: hidden; width: 150px; height: 100px;">
<div style="background: rgb(0, 0, 0) transparent; /* fallback color */ background: rgba(0, 0, 0, 0.8); color: white; padding: 2px;">
<center>
<?php echo get_post_meta(get_the_ID(), 'video_provider', true);
echo ' Mirror';?>
</center>
</div>
<img src="<?php echo $thumbnail_src; ?>" width="150px"/>
</div>
</div>
</center>
</div>
<?php } ?>
<?php endwhile; ?>
This is also tagged jquery so I'll just recommend that you include the jquery library and include:
$('.someclass').hide();
as the first line in the toggleMeMirror function.
Then, make sure that each of your looped content divs exist in the class "someclass".
like:
foreach($this as $that) {
print "<div class='someclass'>$that</div>";
}
then
function toggleMeMirror(a){
// hide all
$('.someclass').hide();
// show one
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
You can try something like this DEMO
HTML Code
<div id="one"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='50px' widht='50px' ></div><br>
<div id="two"><img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='50px' widht='50px' ></div><br>
<div id="three"><img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='50px' widht='50px' ></div><br><br>
<div id="thumb"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' ></div>
jQuery
$("#one").click(function() {
$("#thumb").html("<img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' >");
});
$("#two").click(function() {
$("#thumb").html("<img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='200px' widht='200px' >");
});
$("#three").click(function() {
$("#thumb").html("<img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='200px' widht='200px' >");
});