I am looking to have background color exactly like
Here is my code:
<div class="col-md-4">
<div>
<?php if (!empty($lot_image)): ?>
<img src="<?php echo $lot_image['url']; ?>" alt="<?php echo $lot_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$monte_text"; ?></h3>
<p class="details"><?php echo "$displaycenter6";?></p>
</div>
How can I cover complete image and the text so they both will have same color without white space between them?
Related
I have an array data, for example array data like this:
[0, 1, 2, 3, 4];
I want to foreach array data to view. My first array data will place for headline, second data and others will place for list data. This is my view:
<div class="editor-choice">
<div class="headsection">EDITOR’S CHOICE</div>
<!-- Headline Editor Choice -->
<article class="headline-editor-choice">
<a href="https://www.sportstars.id/read/ole-gunnar-solskjaer-pelatih-man-united-terburuk-setelah-era-sir-alex-ferguson-48Gz3V">
<div class="img-headline-editor-choice">
<img src="https://img.sportstars.id/mpi/800//2021/11/48Gz3V/master_94xHM5T8r5_1941_ole_gunnar_solskjaer.jpg"
alt="img-news">
</div>
</a>
<div class="detail-headline-editor-choice">
Liga Inggris
<span class="date">22 November 2021 13:21 WIB</span>
<div class="title-article title-editor-choice-headline">
<a href="https://www.sportstars.id/read/ole-gunnar-solskjaer-pelatih-man-united-terburuk-setelah-era-sir-alex-ferguson-48Gz3V"
class="title" style="-webkit-box-orient: vertical;">Ole Gunnar Solskjaer Pelatih Man United Terburuk
Setelah
Era Sir Alex Ferguson</a>
</div>
</div>
</article>
<!-- List Editor Choice -->
<?php foreach ($editorchoice as $kuy => $val) { ?>
<article class="list-editor-choice">
<div class="img-editor-choice">
<a
href="<?php echo $val['link']; ?>">
<img src="<?php echo image_uri().'/okz/900/'.str_replace("thumb","master",#$val['image_content']); ?>"
alt="img-news">
</a>
</div>
<div class="detail-editor-choice">
<div class="title-article title-editor-choice">
<a href="<?php echo $val['link']; ?>"
class="title" style="-webkit-box-orient: vertical;"><?php echo $val['title']; ?></a>
</div>
<div class="warp-date-article">
<div class="ico-calendar"><img src="<?php echo base_url(); ?>assets/mobile/images/icon/calender.svg">
</div>
<div class="date-article">19 November 2021</div>
</div>
</div>
</article>
<?php } ?>
This is the example of editorchoice data (data from array):
How to make the first array data from $editorchoice to Headline Editor Choice, and second & others data in List Editor Choice?
I use Codeigniter 3
I solved this problem with this code:
<?php if(!empty($editorchoice)):?>
<!-- Editor Choice -->
<div class="editor-choice">
<div class="headsection">EDITOR’S CHOICE</div>
<!-- Headline Editor Choice -->
<article class="headline-editor-choice">
<a href="<?php echo $editorchoice[0]['link']; ?>">
<div class="img-headline-editor-choice">
<img src="<?php echo image_uri().'mpi/800/'.str_replace("thumb","master",$editorchoice[0]['image_content']); ?>" alt="img-news">
</div>
</a>
<div class="detail-headline-editor-choice">
<?php echo #$editorchoice[0]['channel_name']; ?>
<span class="date"><?php echo $editorchoice[0]['timeago']; ?></span>
<div class="title-article title-editor-choice-headline">
<?php echo $editorchoice[0]['title']; ?>
</div>
</div>
</article>
<!-- List Editor Choice -->
<?php $i = 0; foreach ($editorchoice as $key => $value) { ?>
<?php if(!empty($i)):?>
<article class="list-editor-choice">
<div class="img-editor-choice">
<a href="<?php echo $value['link']; ?>">
<img src="<?php echo image_uri().'mpi/800/'.str_replace("thumb","master",$value['image_content']); ?>" alt="img-news">
</a>
</div>
<div class="detail-editor-choice">
<div class="title-article title-editor-choice">
<?php echo $value['title']; ?>
</div>
<div class="warp-date-article">
<div class="ico-calendar"><img src="<?php echo base_url()?>assets/mobile/images/icon/calender.svg"></div>
<div class="date-article"><?php echo #$value['timeago']; ?></div>
</div>
</div>
</article>
<?php endif;?>
<?php $i++; } ?>
</div>
<!-- End Editor Choice -->
Thank you ..
I have some images that I show on div thumbnail like images below. I want if I upload an image with different size, the image in thumbnail still shows with proportional size. Thanks for help.
<div class="col-md-4 product simpleCart_shelfItem text-center" style="height:500px;">
<a href="?page=detail&id=<?php echo $r['idbarang']?>&id2=<?php echo $r['idstok']?>">
<!--img src="admin/<?php echo $r['gambar']?>" width="394" height="480" alt="" /-->
<img src="admin/<?php echo $r['gambar']?>" height="450" alt="" />
</a>
<?php if ( $r['diskon'] != '' && $r['diskon'] != '0' ) { ?>
<a href="?page=detail&id=<?php echo $r['idbarang']?>&id2=<?php echo $r['idstok']?>">
<div class="offer3">
<span class="badge">
<span class="badge">
<span class="badge"><?php echo "Sale "."$r[diskon]"."%" ?>
</span>
</span>
</span>
</div>
<?php } ?>
<div class="mask">
Quick View
</div>
<a class="product_name" href="?page=detail&id=<?php echo $r['idbarang']?>&id2=<?php echo $r['idstok']?>">
<?php echo $r['namabarang']?>
</a>
<?php if ( $r['diskon'] == '' ) { ?>
<p> <span class="item_price"> <?php echo $harga ?></span></a></p>
<?php } ?>
<?php if ( $r['diskon'] == '0' ) { ?>
<p> <span class="item_price"> <?php echo $harga ?></span></a></p>
<?php } ?>
<?php if ( $r['diskon'] != '' && $r['diskon'] != '0') { ?>
<p> <font face="comic sans ms" color="brown" size="2"><strike> <?php echo $harga ?></strike></font></p>
<p><span class="item_price"> <?php echo $diskon ?></span></p>
</span></a></p>
<?php } ?>
</div>
If you want to place any size image onto the page and have it appear the same size you can ensure that an image fits it's parent element's size with the CSS property object-fit
https://css-tricks.com/almanac/properties/o/object-fit/
When I put an image as background the image is cut, here's an example:
http://midanew.wpengine.com/
Look at the first big image (with the screaming people), now scroll down until you see the same picture only with their hands, since the picture is cut.
The two pictures are the same. Why the seconds picture is cut and how can I make the pictures to look the same?
The code for the first picture:
<div class="col-sm-8">
<?php
$attachment_id = get_field('rectangular_image');
$main_post_img = wp_get_attachment_image_src( $attachment_id, 'full' );
if ( $attachment_id ){ ?>
<img src="<?php echo $main_post_img[0] ?>">
<?php
}else{ ?>
<a href=<?php the_permalink()?>><?php the_post_thumbnail(); ?> </a>
<?php }?>
</div>
And the second one:
$first_special_img_id = get_field('rectangular_image');
if ( $first_special_img_id )
$first_special_img = wp_get_attachment_image_src( $first_special_img_id, 'full' );
else
$first_special_img = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
?>
<a href=<?php echo esc_url(get_permalink()); ?> rel="<?php the_title();?>">
<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>')">
<?php
echo '<div class="special-cat-on-img">';
echo '<h5><div class="special-cat-name-img">' . __('Special Project', 'mida') . '</div></h5>'; ?>
<h6 class="speical-cat-title-img"> <?php the_title() ?> </h6>
<?php echo '</div>'; ?>
<?php echo '<div class="special-proj-ex">' . get_the_excerpt() . '</div>'; ?>
<div class="blue-line"></div>
</div>
</a>
Thanks in advance!
Add
background-size: contain;
to the line
<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>')">
That is, replace that line with
<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>');background-size: contain;">
in your second image.
See the below screenshot
See the docs for more details about background-css.
Your css for the class of the div where you have your second image, ".special-project-section" has a width of 750 and height of 300. You image is 944x415. Thus is will be cut. To make them look the same change that css class.
If you wish to keep the div the same size try to center the image with css like mentioned here
background: url(url) no-repeat center;
I'm trying to hide a div when the custom field is empty. When I don't use an image in the "palette" custom field I want it to hide <div class="small-12 large-12 columns center">. Thanks in advance.
<div class="small-12 large-12 columns center">
<?php
$image = get_field('palette');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
The classes on the div have padding and margins assigned to them which is creating the spacing. Removing the div all together when will remove the classes solving the issue.
You could move the if statement around the whole div, like this:
<?php
$image = get_field('palette');
if( !empty($image) ):
?>
<div class="small-12 large-12 columns center">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endif; ?>
if you want to hide the div you should do this :
<div class="small-12 large-12 columns center"
<?php
$image = get_field('palette');
if (empty($image)){?>style="display:none"<?php } ?>
>
<?php
$image = get_field('palette');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
i am currently having a problem aligning p tag in a div side by side here is my code:-
<div class="div_right">
<div style="background-color: #EEEEF1; width:300px; padding:20px 30px;">
<p><img class="_51sw img" alt="" src="https://www.facebook.com/images/profile/timeline/app_icons/info_24.png" alt="SJT" title="SJT"> About <?php echo $name; ?></p><hr>
<p style="font-weight:bold;">Tagline</p>
<?php echo $tagline; ?>
<p style="font-weight:bold;">School</p>
<?php echo $school; ?>
<p style="font-weight:bold;">Core Commitee Member</p>
<?php echo $member; ?>
<p style="font-weight:bold;">Bragging Rights/Achievements</p>
<?php echo $brag; ?>
</div>
But i want to put tagline and school in one column side by side and in another just below it core commitee and bragging rights side by side and i don't know how to do it.
You can achieve it simply using a display:table-cell with all your <p> elements :
p {
display: table-cell;
}
<div style="background-color: #EEEEF1; width:3000px; padding:20px 30px;">
<p><img class="_51sw img" alt="" src="https://www.facebook.com/images/profile/timeline/app_icons/info_24.png" alt="SJT" title="SJT"> About <?php echo $name; ?></p><hr>
<p style="font-weight:bold;">Tagline</p>
<?php echo $tagline; ?>
<p style="font-weight:bold;">School</p>
<?php echo $school; ?>
<p style="font-weight:bold;">Core Commitee Member</p>
<?php echo $member; ?>
<p style="font-weight:bold;">Bragging Rights/Achievements</p>
<?php echo $brag; ?>
</div>
set your DIV to have it's display as table, or table row. then each should be displayed as a table cell.can all be done in css, classes would help!