I'm working on a site and on the home page I have three small boxes that are displaying the featured image of a post from wordpress.
I'm trying to get it so that the image views well and responds depending on the screen size of the device it is being viewed on. I'm currently displaying the image as 'full' so I can try and crop it with CSS rather than scale up a smaller image.
I was wondering if anyone has any tips on what the best method to do this would be.
I currently have it laid out as follows:
The PHP Code:
<?php $top_query = new WP_Query('cat=CaseStudies&showposts=3'); ?>
<?php while($top_query->have_posts()) : $top_query->the_post(); ?>
<?php
echo '<a class="moreinfoC" href="ntg.local/';
the_permalink();
echo '/">';
echo '<div class="col-md-3">';
echo '<h4 class="case-head">';
the_title();
echo '<span> </span></h4>';
echo '<div class="caseimg">';
the_post_thumbnail( 'full' );
echo '</div></a>';
echo '</div>';
?>
<?php endwhile; ?>
The CSS Code:
.caseimg {
margin-top: -10px;
height: 130px;
overflow: hidden;
max-height: 130px;
max-width: 100%;
width: 100%;
display: block;
}
.caseimg img {
width: 100%;
max-width: 100%;
height:auto;
}
I'm using Bootstrap/Roots framework too if this is of any use.
Take a look at this website: http://css-tricks.com/css-media-queries/
You should use css #media queries.
Related
I should round the image in pdf. I generate a pdf with PHP that shows also an image inside. Everything works correctly. When I add "width" and "hight" to the image it works, but when I try to round the corners of the image it does not work. When I envelop image with div and add to div border-radius and overflow: hidden; -> overflow: hidden; does not work.
Here is part of my code:
<style>
.visuel-carte{
text-align: center;
margin-top: 25px;
margin-bottom: 40px;
position: relative;
border-radius: 20px;
background-color: green;
}
.visuel-carte img {
height: 270px;
width: 420px;
border-radius: 20px
}
</style>
<page>
<div class="visuel-carte">
<img src="<?php echo $eboutique['visuel_carte']; ?>"/>
</div>
</page>
maybe you have some idea?
I tried also
<div style="background-image: url('<?php echo $eboutique['visuel_carte'];?>')">
but it shows me an error
I found an error in my code:
does not work:
<div style="background-image: url('<?php echo $eboutique['visuel_carte'];?>')">
work (without a little quotes ;) ):
<div style="background-image: url(<?php echo $eboutique['visuel_carte'];?>)">
How can I make a div which I display content in from wordpress page.php responsive to the Wordpress page height. Here is how I display the page on my website.
<?php
while(have_posts()) {
the_post(); ?>
<div class="page-content">
<h1> <?php the_title(); ?> </h1>
<?php the_content(); ?>
</div>
And the css:
.page-content {
display: inline-block;
width: 70%;
height: 135vh;
border: 1px black solid;
margin-left: 5%;
padding: 16px;
background-color: white;
}
Can I make the height of the div the same as the height on the wp page?
To make the height of the div in your page, don't force the height and add
min-height : 100vh
From what I understand
I have a wordpress loop which I'm using to display recent blog posts on my homepage. Heres the page: http://webserver-meetandengage-com.m11e.net and if you scroll down to recent posts you will see the issue... which his a strange one!
The images are flashing on and off!! Here\s the loop:
<div class="container">
<div class="card-columns">
<?php
// the query
$the_query = new WP_Query( array(
'cat' => '-14',
'posts_per_page' => 3,
));
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<a href="<?php the_permalink(); ?>">
<div class="blog-thumb-container-home">
<?php the_post_thumbnail(); ?>
</div>
</a>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php __('No News'); ?></p>
<?php endif; ?>
</div>
</div>
I've gone through the code bit by bit and it seems to be this part of the CSS that's making it happen as when I disable it, it stops! Heres the CSS:
.blog-thumb-container-home {
position: relative;
width: 100%;
height: 208px;
overflow: hidden;
}
.blog-thumb-container-home img {
object-fit: cover;
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
More specifically, when the position: absolute; and -webkit-transform: translate(-50%,-50%); are turned off, the image stops flashing.
Strangely this only seems to happen in Safari! It doesnt flash in Chrome or Firefox and I have tried disabling all my Safari Extensions...
I'm also using a shortcode to pull this loop in as its inside an Elementor page builder block.
Can anyone think of a reason these bits of CSS might be making the image display and not display every second or so? Thanks a lo for looking!! :)
I'm building site a with store images, although some stores don't have an available image. The best I can do is use its placeholder text to display the store title. However, by default the placeholder text is located at the top left of the div and is unstyled.
How can I target the placeholder text to style it??
UPDATE
Ok, maybe I should mention that I'm using WordPress. Perhaps using a simple PHP if else statement would suffice?? Show img if it exists, else show h4 element that I can add in.
Put the text into a and style it as you would for any other html element.
<div class="store-title">
This is where the store name goes.
</div>
If the text is already into an HTML element you can not modify you will have to use existing class or id to hook up to it and style it.
Of you can style the <img> element as well.
You can use line-height to vertically center:
HTML
<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />
CSS
img.no-image {
color: red;
font-size: 20px;
line-height: 200px;
text-align: center;
}
JSFiddle demo: https://jsfiddle.net/ugr6gp8n/2/
Here's another way to style alt text but it only works in Chrome so it's not recommended:
HTML
<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />
CSS
img[title] {
position: relative;
}
img[title]:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
color: red;
line-height: 200px;
text-align: center;
content: attr(title);
}
JSFiddle Demo: https://jsfiddle.net/cxa37mLd/1/
Sources:
Can I style an image's ALT text with CSS?
Positioning image alt text
CSS :after not adding content to certain elements
Why doesn't line-height work on img elements?
You can style some properties directly on img:
img {
color:red;
font-size:20px;
text-align:center;
line-height:200px;
}
<img title="Test Text" src="http://exmaple.com/123.jpg" width="200" height="200"/>
UPDATE 2
Ok this is resolved
HTML/PHP:
<?php if(have_posts() ) : while (have_posts() ) :the_post(); ?>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="store-item-link" href="<?php the_permalink(); ?>">
<div class="store-item" style="border-bottom: 10px solid <?php the_field('color'); ?>">
/* Starting here */
<?php if(wp_get_attachment_url(get_post_thumbnail_id()) == ''):?>
<h3><?php the_title(); ?></h3>
<?php else: ?>
<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>">
<?php endif; ?>
/* Ending here */
</div>
</a>
</div>
<?php endwhile; endif; ?>
CSS
h3{
margin: 0;
font-weight: bold;
font-size: 3rem;
line-height: 175px;
text-align: center;
}
This worked great and thanks everyone for your ideas.
I'm having difficulty adding a class to a wordpress element. I want to add the object-fit: cover element to a Wordpress function, but I'm running into a wall.
<!-- Row -->
<article class="col-4">
<?php the_post_thumbnail('category-thumbnail'); ?>
</article>
I'm attempting to directly add the object-fit:cover to the img through CSS, but it doesn't effect it. Totally confused because its being effected by the width: 100% and height: auto.
.col-4 img{
width: 100%;
height: auto;
object-fit: cover;
}
I've tried taking the width and auto off and just having the object-fit: cover, but it still doesn't take effect on the page.
Thanks in advance for your help.
Use
.col-4 img{
width: 100%;
height: 200px; // height should be mentioned so that image can cover that place
object-fit: cover; // Image will fill the 200px space
}
For object-fit: cover, the height should be mentioned so that the image can cover that height.
I would recommend you to use background image rather than object-fit cover. Please check http://caniuse.com/#feat=object-fit for compatibility with other browsers.
Source on how to use background size cover
https://css-tricks.com/perfect-full-page-background-image/
You can use background-image or simply make the image width: 100%
1. Using background-image
You have to set the height of the image or Maintain the aspect ratio of a div with CSS
.article-photo {
display: block;
width: 100%;
}
<article class="col-4">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="article-photo" style="background-image: url('<?php the_post_thumbnail_url('full'); ?>')">
</a>
<?php endif; ?>
</article>
2. Image with width: 100%
.article-photo {
display: block;
width: 100%;
}
.article-photo img {
display: block;
width: 100%;
}
<article class="col-4">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="article-photo">
<?php the_post_thumbnail('category-thumbnail'); ?>
</a>
<?php endif; ?>
</article>