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>
Related
I'm writing here today because I need some help to insert different class into a foreach loop.
CURRENT SITUATION
I have a foreach loop like this one:
<?php
$propertyImages = get_field('property_images');
if( $propertyImages ):
?>
<div class="container">
<?php foreach( $propertyImages as $propertyImage ): ?>
<a class="gallery-item href="<?php echo esc_url($propertyImage['url']); ?>">
<img class="gallery-img" src="<?php echo esc_url($propertyImage['sizes']['medium']); ?>"/>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
DESIRED SITUATION
With this loop I want to display the images in a grid pattern that loops itself (like the one you can see in the images below.
I think that to achieve this I need to add a "grid-lg-img" for the first 2 element of the loop then add a "grid-sm-img" for the 3rd 4th 5th items of the loop and then again and again with the same 2-3-2-3-... pattern.
Is it possible to craft a solution like this? Or maybe I'm looking in the wrong direction?
Thank you.
You can use only CSS.
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
a.gallery-item {
display: block;
}
a.gallery-item:nth-child(5n+1) {
flex: 1 50%;
}
a.gallery-item:nth-child(5n+2) {
flex: 1 50%;
}
a.gallery-item:nth-child(5n+3),
a.gallery-item:nth-child(5n+4)
a.gallery-item:nth-child(5n+5) {
flex: 1 33,333333336%;
}
a.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
You can do this easily with CSS grid.
If you make the grid a total number of columns which is divisible by the amount of actual columns you want in both your 'large' and 'small' size, then you can just target those first two elements and make them span however many columns you'd like.
So, here you want your large images to be half width, and the smaller ones will be one third width. 6 is divisible by both 2 and 3, so your half width images can be 3 of 6 available columns, and your third width images can be 2 of 6.
html,
body {
min-height: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.gallery {
max-width: 75%;
padding: 1.5em;
background: #f2f2f2;
display: grid;
gap: .5em;
grid-template-columns: repeat(6, 1fr);
}
.gallery__item:nth-of-type(1),
.gallery__item:nth-of-type(2) {
grid-column: span 3;
}
.gallery__item {
width: 100%;
grid-column: span 2;
}
<html lang="en">
<head></head>
<body>
<div class="gallery">
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
</div>
</body>
</html>
Further reading on grid here.
you can wrap it all with while
<?php
$propertyImages = get_field('property_images');
while($propertyImages) : $i =0;
if( $propertyImages ):
?>
<div class="container">
<?php foreach( $propertyImages as $propertyImage ): ++$i; ?>
<a class="gallery-item-<?php echo $i?> href="<?php echo esc_url($propertyImage['url']); ?>">
<img class="gallery-img" src="<?php echo esc_url($propertyImage['sizes']['medium']); ?>"/>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
I have this css script generated using php, it's used to show a wordpress second featured image when an user hover. The problem is that the images are blinking and I don't know how to solve this small issue. Can anyone suggest a fix for this? I've implemented the lazyload, but on this case it's unuseful.
<div class="box">
<?php $id = get_the_ID(); ?>
<div class="rounded-circle" style="background-image:url('<?php the_post_thumbnail_url('full'); ?>')" id="staff-pic-<?php echo $id; ?>"></div>
<?php if(class_exists('MultiPostThumbnails')):
$hover_pic = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'secondary-image');
endif;
echo
'<style>
#staff-pic-'.$id.'{
background-size: cover;
background-position: center;
margin: auto;
transition: all 300ms;
}
#staff-pic-'.$id.':hover{
transition: all 300ms;
background-image:url("'.$hover_pic.'") !important;
background-size: cover;
background-position: center;
margin: auto;
}
</style>';
?>
<h3 class="text-center team-name"><?php the_title(); ?></h3>
<p class="description text-center"><?php the_content(); ?></p>
</div>
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 have some code to output images in Wordpress like this...
<div class="col-md-2">
<?php $image = get_field('artist_photo');
if( !empty($image) ):
// thumbnail
$size = 'medium';
$thumb = $image['sizes'][ $size ];
?>
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" class="img-responsive" />
</div>
<?php endif; ?>
The problem is, all of the images have different heights (based on their proportions at original upload}.
Is it possible to make them have a uniform height whilst remaining responsive?
Here are two ways to constrain the height of an image in CSS.
First, you can set a maximum height. So something like:
.col-md-2 img {
display: block;
max-height: 300px;
width: auto;
height: auto;
}
Second, you can display the image as a background image and then use the background-size property to constrain it. In your markup display the image using:
<div class="image" style="background: url(<?php echo $thumb; ?>) no-repeat center;" />
And style it like so:
.col-md-2 {
height: 300px;
}
.col-md-2 div.image {
height: 100%;
width: 25%; // for example, assuming you want 4 images per row
background-size: constrain;
}
I'm not sure how this will work in the context of bootstrap, but option 2 might be your only option if you can't specify an explicit height for the image or its parent.
There are more devils in the details and the specifics will depend on your situation, but hopefully this is helpful.
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.