This is semi related to my last question but i have set up a filemaker foreach loop to output a group of images to accompany there names and ids, along with a checkbox.
Once checked the relating images go to another page to print, No matter how much i try i cant get the elements to fit to one page ?
I have used inline styling, a Print css stylesheet, all possible combinations with chromes inspector.
I can make it fit, once the image name is taken away, but i need this included.
include('head.php');
if (isset($_POST['img'])) {
$img = $_POST['img'];
} else {
$img = '';
echo 'error';
}
?>
<div class="container">
<div class="row" >
<?
foreach ($img as $image){
//echo '<div class="col-md-5">';
echo '<img class="" style="margin:20px 10px 10px 0px; width:45%;" src="Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/'.$image.'">';
echo '<p class="centered" style="width:45%;">'.$image.'</p>';
//echo '</div>';
}
?>
</div>
</div>
Basically i'm trying to achieve an A4 portrait, with a grid of 6 images, with a margin between and the label underneath.
I tried pushing everything into a col-md-6 div, taking the <p> tags away but this didn't help.
I also tried using px opposed to %, just cant figure this one out.
The code from the previous page;
echo '<input type="checkbox" class="form-control check" id="img" name="img[]" value="'.$pic.'">';
With the $pic variable being the image name.
I think you can achieve what you want by tweaking the img height in #media print, like so:
#media print{
img{max-height:280px} //tweak this until you're happy
}
Also, don't forget the img-responsive bootstrap class - it works wonders:)
<div class="col-xs-6"> <!-- this will limit img width if img-responsive used too-->
<img class="img-responsive" src="image.jpg">
<p>Filename 1</p>
</div>
You can probably also forgo most of your inline styling and stick with bootstrap's defaults at first, then tweak later if you really need to.
http://www.bootply.com/YZkHOq0C1i
Related
Is there a good way of calling a css class as part of a PHP if else statement? What I am trying to do is change the background color of a div that is a part of the html depending on the value of the results from a php if else statement.
php
if(!empty($check_availability)){
echo <div id="1"> do something <div>
// make the div background green if this is true
}
else {
<div id="2"> do something else instead<div>
//make backgound red if this is true
}
html
<div id="container"> <!-- <<<<<<< this is the div that I want to change the background color of depending on results from the php -->
<div id="1"></div>
<div id="2"></div>
</div>
I assuming you are talking about conditionally adding classes to divs. good is subjective, but this is what I normally do.
$class = !empty($check_availability) ? 'green-class' : 'red-class';
echo "<div class='{$class}'> do something <div>";
I am trying to set an image uploaded through custom fields plugin and have it display as the background of a div (which is used in a slider).
However the image is not displaying...I have text in the custom fields and that is showing okay so I think its something to do with the line of code I am using to pull in the image.
I am trying to set the background of .slide1 with the image.
The custom field name is slide1_background.
HTML:
<div class="slide1" style="background-image:url('<?php the_field('slide_bg1'); ?>');">
<div class="slide1-cont"><p class="slide-text">
<h1><?php the_field('slide_title1'); ?></h1>
<img src="<?php bloginfo('template_directory')?>/images/line.png" /></p>
<p><?php the_field('slide_content1'); ?></p></div>
</div>
CSS:
.slide1{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height: 800px;
}
Look at the difference in your code in your question, where you try to set the background-image, compared to the code in your comment in another answer where you're setting it as an image source.
the_field('slide_bg1') returns an array, so you're trying to set the background image source as a PHP array which gets converted to a string as "Array" so in your HTML it'll look like: background-image:url('Array')
You need to get the field first, then echo the url element of the returned array as the source of the background image:
$image = get_field( 'slide_bg1' );
if ( !empty( $image ) ) { ?>
<div class="slide1" style="background-image:url('<?php echo $image['url']; ?>');">
<?php }
Use echo
<div class="slide1" style="background-image:url('<?php echo the_field('slide_bg1'); ?>');">
I need to draw text in top of the image this the look like
when the page load i need to display price in side the photo.I try it like this
<button class="btn btn-danger" id="buy-btn" data-toggle="modal" data-target=".package-buy-modal">BOOK NOW</button>
<img id="price-tag" style="position: relative;width: 100%; /* for IE 6 */" src="<?php echo base_url()?>assets_profile/img/price.png">
<h2 style="-o-transform: rotate(32deg);-moz-transform: rotate(32deg);-webkit-transform: rotate(32deg);">$<?php echo $car_data['Charges']; ?></h2>
But it didn't work as i expected.how can i do this.if there is another easy way to this ?
Here is an example of using background-image within a div so that you can put more inside the div, ie)text
HTML:
<div id='image' src='http://i.stack.imgur.com/1DZ6X.jpg'>
<h2 id='price'>Price: $10</h2>
</div>
CSS:
#image {
width:243px;
height:163px;
background-image:url('http://i.stack.imgur.com/1DZ6X.jpg');
}
check it out here
Add a z-index value to the <img> and the <h2>. For example, z-index:98 on the <img>, and z-index:99 for the <h2>. (A higher value because you want it on top).
I would also recommend moving all styles to a css file, rather than use the inline style attribute.
I am trying to display a 'meet the team' page in a 2x5 table, working with code written by the previous web designer in Wordpress.
This is the page I am looking at - http://www.stirling-house.com/about-us/meet-the-team As I say, I want to display the pictures in a table, so it looks neater.
The code I have is -
<div id="maintext">
<h1>MEET THE TEAM</h1>
<h3>THE STIRLING HOUSE ADMINISTRATION TEAM</h3>
<?php $members =get_posts('numberposts=99&cat=4&order=ASC'); //print_r($members);
foreach ($members as $post) {
setup_postdata($post);?>
<div class="member-box">
<img src="<?php echo get('member_photo');?>" alt="" style="margin:5px 7px 0 0;" />
<h3><?php echo $post->post_title;?></h3>
<h4><?php echo get('member_designation');?></h4>
Can anyone help?!
One way of doing it is by adding a counter before the foreach (for example, $n), initialize it to zero and increment it every time the loop finishes. Then, make all the odd divs float to the left and the even ones float to the right.
This is how the code would look like (more or less):
<?
$n = 0; // Counter
foreach($members as $post){
if($n % 2) $style="float:left";
else $style="float:right";
<img src="<?php echo get('member_photo');?>" alt="" style="margin:5px 7px 0 0;" />
<h3><?php echo $post->post_title;?></h3>
<h4><?php echo get('member_designation');?></h4>
If that does not work, you can try using a table layout and placing a <tr> tag after $n rows (resetting the counter every time you add a <tr>).
It is the opinion of most web designers (post-2005 or so) that <table> elements should not be used for layout/design. If you add the following CSS rule to your sites, stylesheet:
.member-box { display: inline-block; }
You will get something that looks like this: http://imgur.com/DzEkLAU
Sorry to answer indirectly, but I think this is the answer you're really looking for... ;)
I use a PHP for-loop to print some portfolio items which echoes this:
echo "
<a href=\"portfoliodetail.php?id=$id\" class=\"noHover\" title=\"$title\">
<img src=\"images/portfolio/thumbnails/$bgthumbnail\" alt=\"$title\" />
</a>
";
However, I'm echoing images three times, and I want the last image to have a different margin than the others.
So I thought I'd just define a :last-child in the CSS, but when I put this margin at 0, all my margins are set at 0. Maybe when echoing this in a loop it thinks all the items are the :last-child or something? Is there a way to make the margin of the last image different?
Using CSS you can set the margin using the :last-child property
<style>
div a img{margin-left:10px;}
div a:last-child img{margin-left:50px;}
</style>
<div>
<img src="http://www.iwebsource.net/wp-content/uploads/2012/02/css3.png" />
<img src="http://www.iwebsource.net/wp-content/uploads/2012/02/css3.png" />
<img src="http://www.iwebsource.net/wp-content/uploads/2012/02/css3.png" />
</div>
FIDDLE EXAMPLE