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; ?>
Related
My main file is a .php file, and images can be uploaded and displayed from this page. Getting those images to display in three columns has been confusing. It is usually done like this: https://www.w3schools.com/howto/howto_css_images_side_by_side.asp with each image or images placed in div tags. three div tags if you want three columns. In my .php file, images are not written out in the code, so how do I get the images to display in three columns on the page?
I do include one div tag wrapped around the PHP code which is showing the first column.
Here is the CSS code:
.container{
}
.container .heading h3 span{
font-weight: 100;
}
.container .box{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.container .box .dream{
flex-direction: column;
width: 32.5%;
}
.container .box .dream img{
width: 100%;
padding-bottom: 15px;
border-radius: 5px;
}
PHP code:
<div class="products-wrapper">
<div class="container">
<div class="box">
<div class="dream">
<?php foreach ($products as $product): ?>
<a href="<?=url('index.php?page=product&id=' .
($product['url_slug'] ? $product['url_slug'] : $product['id']))?
>" class="product">
<?php if (!empty($product['img']) &&
file_exists($product['img'])): ?>
<img src="<?=base_url?><?=$product['img']?>" alt="<?
=$product['name']?>">
<?php endif; ?>
<span class="name"><?=$product['name']?></span>
<span class="price">
<?=currency_code?><?=number_format($product['price'],2)?>
<?php if ($product['rrp'] > 0): ?>
<span class="rrp"><?=currency_code?><?
=number_format($product['rrp'],2)?></span>
<?php endif; ?>
</span>
</a>
<?php endforeach; ?>
</div>
I have fetched some list of destinations cities from database and want to show it in view.
here is my normal approach
<?php
$this->db->select('*');
$citydata = $this->db->get('cities')->result_array();
foreach ($citydata as $citydatas){?>
<div class="col-lg-4">
<img src="<?=$citydatas['banner];?>" />
</div>
<? } ?>
Above code will display 3 columns in each row,
But What i want is different approach, I need to show 2 columns in first row, then 3 column in second row.
and
Another Approach would be - three column in first row but first column will take half screen and other two will take another half and in second row first two will take half and then third will take rest half screen using col-6
here is the first grid style what i am looking for
here is the second grid style
My Approach for first style, is below approach good to use?
<?php
$this->db->select('*');
$citydata = $this->db->get('cities')->result_array();
$i = 1;
foreach ($citydata as $citydatas){?>
<div class="<?php if($i++ == 1 || $i++ == 2){ echo "col-lg-6";}else{echo"col-lg-4";}?>">
<img src="<?=$citydatas['banner];?>" />
</div>
<? } ?>
You can use nth-child selector along with CSS grid to get the desired result.
First Grid Style
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
}
img:nth-child(6n + 1),
img:nth-child(6n + 2){
grid-column: span 2;
}
img {
width: 100%;
height: 100%;
}
<div class="grid-container">
<img src="https://picsum.photos/id/10/400" />
<img src="https://picsum.photos/id/20/400" />
<img src="https://picsum.photos/id/30/400" />
<img src="https://picsum.photos/id/40/400" />
<img src="https://picsum.photos/id/50/400" />
<img src="https://picsum.photos/id/60/400" />
</div>
Second Grid Style
For second grid style, you just need to change the nth-child selector, rest of the code will be same.
img:nth-child(6n),
img:nth-child(6n + 1) {
grid-column: span 2;
}
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
}
img:nth-child(6n),
img:nth-child(6n + 1) {
grid-column: span 2;
}
img {
width: 100%;
height: 100%;
}
<div class="grid-container">
<img src="https://picsum.photos/id/10/400" />
<img src="https://picsum.photos/id/20/400" />
<img src="https://picsum.photos/id/30/400" />
<img src="https://picsum.photos/id/40/400" />
<img src="https://picsum.photos/id/50/400" />
<img src="https://picsum.photos/id/60/400" />
</div>
PHP Code
Use following code to render this layout using PHP
<div class="grid-container">
<?php foreach($citydata as $citydatas): ?>
<img src="<?=$citydatas['banner]?>"/>
<?php endforeach; ?>
</div>
I am using the Wordpress theme "Photos"
It generates thumbnails for posts on the home page using featured images. Thumbnails fade on hover, but no post title is displayed. http://www.hardeepasrani.com/demo/photos/
.photogrid-item img.featured-image:hover {
opacity: 0.2;
}
I have found numerous wordpress plugins and numerous examples online of how to accomplish thumbnail hover captions, but the wordpress plugins affect the feature images accompanying posts rather than the thumbnails on the home page, and the online examples are simple html/css whereas I believe this theme needs me to put it in the content.php file.
<div id="post-<?php the_ID(); ?>" <?php post_class('photogrid-item'); ?>>
<a class="photogrid-link" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php if ( has_post_thumbnail() ) : ?>
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<img class="featured-image" src="<?php echo $feat_image; ?>" />
<?php else: ?>
<?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?>
<img class="featured-image" src="<?php echo $feat_image; ?>" />
<?php endif; ?>
</a>
</div>
w3schools has a nice, simple example, but it overlays predefined text ("Hello World") https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
How can I integrate this so that it will display the corresponding post title to every thumbnail?
--------------UPDATE---------------
Using developerme's answer, I got most of the way there. But hovering over any of the thumbnails made the overlays show up for all of the thumbnails. For some reason this was fixed by editing the CSS from
.container:hover .overlay {
opacity: 1;
}
to:
.overlay:hover {
opacity: 1;
}
I have no idea why, but that seems to do the trick.
<style>
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.overlay:hover {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
</style>
<div id="post-<?php the_ID(); ?>" <?php post_class('photogrid-item'); ?>>
<a class="photogrid-link" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php if ( has_post_thumbnail() ) : ?>
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<img class="featured-image" src="<?php echo $feat_image; ?>" />
<div class="overlay">
<div class="text"><?php the_title(); ?></div>
</div>
<?php else: ?>
<?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?>
<img class="featured-image" src="<?php echo $feat_image; ?>" />
<?php endif; ?>
</a>
</div>
Could You Please try Following code with the css.You change the css with your own needs.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.overlay:hover {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) : ?>
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<img alt="Avatar" class="image"> src="<?php echo $feat_image; ?>" />
<?php else: ?>
<?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?>
<img alt="Avatar" class="image">src="<?php echo $feat_image; ?>" />
<?php endif; ?>
<div class="overlay">
<div class="text"><?php the_title(); ?></div>
</div>
</a>
</div>
</body>
</html>
The majority of browsers will display the image title on hover. Assuming that your theme adds the title to the code (the HTML will look something like <img src='image.jpg' title='my great image' />) then all you need to so is go through the images in your media library and make sure that the title field is filled in.
Hope that helps
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>