I have a featured image for a Custom Post Type that I am trying to lay out in a div. For some reason the image is on the page but outside the div. This is my first time working with featured images and custom post types. What am I missing that is causing the image to appear on the page before the div even starts?
if ($loop->have_posts()) {
$output = '<div class="stories">';
while($loop->have_posts()){
$loop->the_post();
$meta = get_post_meta(get_the_id());
$output .= '
<div class="story" style="float: left; display: block; border: 1px solid #CCC;">
<a href="' . get_permalink() . '">
' . get_the_title() . '</a>
' . the_post_thumbnail("medium") . '
' . get_the_excerpt() . '
</div>
';
}
$output .= "</div>";
} else {
$output = 'No Stories Added Yet.';
}
return $output;
When I view the HTML output this is what is rendered:
<div class="row-fluid ">
<img class="attachment-medium wp-post-image" width="300" height="195" alt="13755721_m" src="http://code2media.net/wp-content/uploads/2013/04/13755721_m-300x195.jpg">
<img class="attachment-medium wp-post-image" width="300" height="240" alt="African-Boy" src="http://code2media.net/wp-content/uploads/2013/05/Snotty-African-Boy-300x240.jpg">
<div class="stories">
<div class="story" style="flost: left; display: block; border: 1px solid #CCC;">
Story 2
Test Content
</div>
<div class="story" style="flost: left; display: block; border: 1px solid #CCC;">
Test Content
</div>
the_post_thumbnail("medium") is echoing the image thumbnail immediately when it is called, outside your other HTML as it is still being constructed, and appending an empty return value to your string. If you want the method to return the result to append to your string (you do), then you need to use get_the_post_thumbnail($post->ID, "medium")
Generally speaking, WordPress methods that start with the_ will echo the result, and methods that start with get_ will return the value.
the_post_thumbnail("medium") will return with img tag. you can get just featured image src and use as as want.
Take a look the this
Related
when I use one image inside the container carousel div the image occupies 100vw. But when I add multiple images inside the container it was supposed to be overflown but rather images get shrunk and act weird. I tried the same thing with regular HTML tag and it works perfectly.
My question is how to make a carousel in Next js without using any library where on each slide there is only one Image covering 100% view width.
#code
<div className="embla" >
<div className="embla__container">
<Product_3
src="/lifestyle/14.jpg"
details="Discover the support you need to power through gaming marathons."
name="CHAIRS"
/>
</div>
</div>
#CSS part
.embla {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
width:100vw;
height:10rem;
display: flex;
flex-shrink: none;
}
#Product_3 component
function Product_3({ src, name, details }) {
return (
<div className="product_3">
<div className="product3_img">
<Image src={src} layout="fill" />
</div>
<div className="product2_details">
<h3 className="product2_name">{name}</h3>
<div style={{fontSize:"2rem",color:"#999999",margin:"1rem 0 2rem 0"}}>
{details}.
</div>
<button className="learn_more product2_btn">Learn More {">"}</button>
</div>
</div>
);
}
I am using dompdf in laravel to create invoice. and it works fine for me until i use image in that.
Admin Controller
public function generateInvoice(Request $request)
{
$user = Auth::user();
$pdf = PDF::loadView('pdf.invoice', $user);
return $pdf->download('invoice.pdf');
}
And in Invoice View Page that contains the invoice template...
<style>
.block{
display: block;
}
.minifont12{
font-size: 12px;
}
.minifont10{
font-size: 10px;
}
.col-md-45{
width: 45%;
display: inline-block;
}
.col-md-30{
width: 30%;
display: inline-block;
}
.col-md-25{
width: 24%;
display: inline-block;
}
.bluecolor{
background-color: #C5C5EC;
}
.midtop{
margin-top: 50px;
}
</style>
<div class="header" style="position:relative; top:10; width:100%; ">
<img src="http://localhost:8000/img/minilogo.jpg">
<div style="text-align:center; margin-top:-20px;">Retail Invoice/Bill</div>
<div style="text-align:right">Invoice No. #BTR_PB_000052</div>
</div>
<div class="content">
<div class="minifont12 block" style="margin-top:20px;">
<strong>Sold By:</strong> SRM Smart Solutions Pvt. Ltd.<br>
<span class="minifont10">
Building No. 29, Third Floor, Central Market, West Punjabi Bagh, Delhi-110026
</span>
</div>
<hr>
<div class="col-md-45">
Order Id : BT121178273<br>
Order Date : 24-05-2016<br>
Invoice Date : 25-05-2016<br>
CIN No. : U72300DL2015PTC281652
</div>
<div class="col-md-30">
Avinash<br>
H.No 30-45-5/26, Chandigari colony east, rohit cottage lane, opp. krupa comlex lane, r.k.puram post, 500 056, hdy.<br>
Hyderabad, telangana - 500056<br>
8099473211
</div>
<div class="col-md-25">
<span class="midtop bluecolor">
*Keep this invoice for return and refund purposes
</span>
</div>
</div>
but When I run the code...it will show error message
Maximum execution time of 60 seconds exceeded
Please tell me what is the issue behind this..
I had the same issue when using a very large image. I solved the issue by changing the maximum execution time by adding this line before starting the pdf creation: ini_set('max_execution_time', 120);. You can also change this in your php.ini file if you like, just make sure you know what you're doing, as this setting applies to all scripts executed on your web server. You'll also have to restart your web server after making changes in the php.ini file.
Some other options so solve this are discussed here.
you can use this code :
<img src="{{ public_path("images/a.png") }}">
or can :
<div style="background: url({{ public_path("images/a.png"}})">text</div>
Tryng get code position side of first code!
$fetchcategory = $results['category'];
$string = array ( '/\b(.*?)\b/i' );
$replace = array ( '$1' );
$category = preg_replace($string, $replace, $fetchcategory);
echo '<p class="news_cat" /><p class="news_date"><img title="News category!" dir="ltr" src="img/category.png" style="width: 13px; height: 13px;" /> Category: '.$category.'</p>';
echo '</p>';
This is code what i want show side to the first one what is
echo '<p class="news_date"><img title="Date added!" dir="ltr" src="img/info_date.png" style="width: 13px; height: 13px;" /> ';
$timestamp = $results['timestamp'];
$date = strtotime($timestamp);
echo $postdate = date("d.m.Y",$date);
You have to edit your PHP so you echo out both the information for the date and category at the same time. Inside the paragraph with class news_date, lets have a look at the code for the category
echo '<p class="news_cat" />'.
'<p class="news_date">'.
'<img title="News category!" dir="ltr" src="img/category.png" style="width: 13px; height: 13px;" />'.
'Category: '.$category.
'</p>';
And the code for the date
$timestamp = $results['timestamp'];
$date = strtotime($timestamp);
echo '<p class="news_date">'.
'<img title="Date added!" dir="ltr" src="img/info_date.png" style="width: 13px; height: 13px;" />';
echo $postdate = date("d.m.Y",$date);
// Missing end thag for paragraph!
echo '</p>';
if we merge those together we get something like this:
$timestamp = $results['timestamp'];
$date = strtotime($timestamp);
echo '<p class="news_date">'.
'<img title="Date added!" dir="ltr" src="img/info_date.png" style="width: 13px; height: 13px;" />';
echo $postdate = date("d.m.Y",$date);
echo '<img title="News category!" dir="ltr" src="img/category.png" style="width: 13px; height: 13px;" />'.
'Category: '.$category.
// Missing end tag for paragraph!
'</p>';
And then the output is this:
<p class="news_date">
<img dir="ltr" src="img/info_date.png" style="width: 13px; height: 13px;" title="Date added!">
20.08.2015
<img class="" dir="ltr" src="img/category.png" style="width: 13px; height: 13px;" title="News category!">
Category:
Film
</p>
And on the page you will have it result in looking like this:
instead of this:
As you can see, by simply dividing the php and output into several lines for debugging it becomes much clearer. We even found ourself a paragraph with no ending tag, but fixed it.
i have tried creating pdf files with dynamic content (generated with db data)
DomPdf was perfectly working with it.
but when i add some addtional section it breaks the content in the middle of div blocks.
So i added page-break-inside: avoid; then that problem solved.
now it makes a blank page after that div element in the pdf document !
Any Solutions? Thanks in advance !
Here is the Code within the php :
if(mysql_num_rows($get_options_query) > 0){// we have options available
$color2 = 'f9ebd4';
$quote_items .= '<div style="page-break-inside: avoid; width: 760px; height: auto;"><div style="width: 760px; height: auto; background-color: #f19221;padding:5px; ">Options:</div>';
while($get_options = mysql_fetch_array($get_options_query)){
$prod_opt_col_images='';
$all_prod_opt_col=$db->get_results("SELECT colour_name, colour_image
FROM prod_variations
JOIN prod_colours ON prod_variations.product_colour = prod_colours.colour_name
WHERE prod_variations.product_id ='".$item['product_id']."'");
if(count($all_prod_opt_col)>0){
$prod_opt_col_images='<br />'.'Available in:<br />';
foreach($all_prod_opt_col as $row_prod_opt_col ){
$prod_opt_col_images.='<img src="'.URL.'/images/colours/mat/'.$row_prod_opt_col->colour_image.'" width="25" height="25" alt="'.$row_prod_opt_col->colour_name.'" "/> ';
}
}
if($prod_opt_col_images!=''){
$prod_opt_col_images.='<br />';
}
$quote_items .= '<div class="options" style="background-color: #'.$color2.';">
<div class="divCell1"> '.$get_options['qp_prod_qty'].'</div>
<div class="divCell2"> '.str_replace("<br>","<br />",$get_options['qp_prod_name']).'<br />'.str_replace("<br>","<br />",$get_options['qp_prod_desc']).$prod_opt_col_images.'</div>
<div class="divCell3"> <img src="'.URL.'/images/products/'.$get_options['qp_prod_image'].'" width="75" height="75" alt="Quote Product" /></div>
<div class="divCell4"> $'.number_format($get_options['qp_prod_price'],2,'.',',').'</div>
<div class="divCell5"> </div>
</div></div>';
}
}
I have following code in C# which is printing images from db.And through this code images and radio button shows single time in single line.Here is My code
foreach (DataRow item in ds.Tables[0].Rows)
{
divs += #" <div style="" position:relative; height:100px; width:400px; margin:10px auto;"">
<div style=""position:absolute; width:80px; height:80px; top: 10px; left: 130px;"">
<a href=""#"" class=""screenshot"" rel=""images/"+item["namee"].ToString()+#".jpg"" ><img src=""images/" + item["namee"].ToString() + #".jpg"" width=""80px"" height=""80px"" /></a>
</div>";
if(id < 1){
divs += #" <div style=""position:absolute; width:231px; left:240px; top:35px; height: 40px;"">
<p style="" margin-top:10px; margin-left:20px; ""><input type=""radio"" name=""SSRI"" value=""" + item["namee"].ToString() + #""" /></p>
</div>";
}
divs += #"<div style=""position:absolute; width:231px; left:100px; bottom:10px; height: 40px;"">
</div>
</div>";
}
Response.Write(divs);
By this Code Out Put is like this
Images '' radio
Images '' radio
But i want that out put should b like this
Images '' radio Images '' radio
Images '' radio Images '' radio
Is there any one can help me to do this. Please Help !
I'm not sure how your current code attempts to do what you want, but you should use floating divs. Remove all the top left and position:absolute you have, and just use float, height and width. Then use the clear:left; to a new line.
For example, in your code:
int currLine = 0;
foreach (DataRow item in ds.Tables[0].Rows)
{
if (currLine % 2 == 0)
{
// Every second item, move to a new line
divs += #"<div style=""clear:float;"" />"
}
divs += #" <div style=""float:left; width:400px; margin:10px auto;background:yellow;">
<div style=""width:80px; height:80px;background:red;""
<a href=""#"" class=""screenshot"" rel=""images/"+item["namee"].ToString()+#".jpg"" ><img src=""images/" + item["namee"].ToString() + #".jpg"" width=""80px"" height=""80px"" /></a>
</div>";
if(id < 1){
divs += #" <div style=""width:231px;height: 40px;background:blue;"">
<p style="" margin-top:10px; margin-left:20px; ""><input type=""radio"" name=""SSRI"" value=""" + item["namee"].ToString() + #""" /></p>
</div>";
}
divs += #"<div style=""width:231px; height: 40px;background:green;"">
</div>
</div>";
}
Response.Write(divs);
I took the liberty of adding different colored backgrounds so you can better learn what does what..