Is it possible to show only 2 page of 10 page pdf? - php

I am trying shows pdf summary to user before download. There is pdf detail page to shows user pdf cover image, name, description, price, summary and buy now button.
Here's user wants to read summary of report then click on summary button and open model to read embed pdf. After read summary he wants to buy then will click on buy now button.
So, i want show only 2 pdf page on summary button. There is summary and buy now pdf report is same.
I tryed show summary of report, but there is show full pdf.
Here's my code below:-
public function raReportDetail($id){
$reportdetail = '';
$result = $this->connect()->query("SELECT * FROM wm_report WHERE id='$id'");
if($result->num_rows>0){
$row=$result->fetch_assoc();
$reportdetail ='
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="large-5 column">
<div class="xzoom-container">
<img class="img-fluid" src="cover_images/'.$row['cover_img'].'">
</div>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="content-report-detail">
<div class="large-12 column">
<h3>'.$row['name'].'</h3>
</div>
<hr>
<div class="price-wrap">
<h3>Price: <i class="fa fa-rupee"></i> '.$row['price'].'/- </h3>
</div>
<div class="large-7 product-detail">
<p style="text-align: justify;">'.$row['description'].'</p>
<div class="ro-options">
<div class="no-row">
<div class="cart-btn-price">
<ul>
<li>
Summary </li>
<li>
Buy Now
</li>
</ul>
</div>
</div>
<div class="sku-code">
<span class="posted_in">Categary: '.$row['category'].'</span>
|
<span class="posted_in">SKU Code : '.$row['sku'].'</span>
</div>
</div>
</div>
</div>
</div>
<div id="Summary" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 style="display: contents;">Summary of '.$row['name'].'</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<embed src="report/'.$row['report'].'" frameborder="0" width="100%" height="400px">
</div>
</div>
</div>
</div>
';
}else{
$reportdetail = 'Something Went Wrong';
}
return $reportdetail;
}

If you have the ImageMagick library installed in your PHP, you can convert a specific page to jpg.
$im = new Imagick();
$im->setResolution(300,300);
// the [0] below indicates the first page only.
$im->readImage('document.pdf[0]');
$im->setImageFormat('jpeg');
$im->writeImage('thumb.jpg');
$im->clear();
$im->destroy();
You'd probably want to do this for the two pages you wanted to use as a preview.
See also the ImageMagick::readImage documents. The documentation itself isn't great, but the user comments are pretty good. You should be able to $im->setImageFormat('pdf'); as well.
I stole this from Convert PDF to JPEG with PHP and ImageMagick

I would go with FPDI from setasign.
It is simple to use and easy to install. I currently use it in one of my application and it works very good.
https://www.setasign.com/products/fpdi/demos/simple-demo/

Related

Styling My Modal , I need My modal to have a back groundcolor of red

I need the background to be red , and the text to be white , I have tried to do it in the scss file but it just doesn't link , I used bootstrap 5
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<div class='col-12 modal-title text-center'>
<h5>Where to look for Lambdaboard</h5>
</div>
<button type="button" class="btn-close btn-plain-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-content">
<img src="<?=$base_url?>_images/animation.gif" alt="Animated Gif">
<div class="modal-footer">
<h5 class='col-12 modal-title text-center'>
A Fraction of the places you can find it
</div>
</div>
</div>
</div>
</div>
</div>
</section>
If you put a custom style class on your modal div and an other where your text is that dooesn't work ? It should

Is there a way to insert a $name in a modal

I have packages on my store. The names, prices, description, etc.. are defined by variables. $name $price $small_desc
I've made a modal, and I'm trying to use those "variables" in it. This way when a player click for more informations, it will show a different package name on each modal.
The issue is, right now it's only displaying '.$name.'
Here you can visualize it by clicking on a package.
https://royalkingdom.net/store/?cat=1
I've tried inserting the modal in a php section but it didn't work.
I've also tried moving the location of my modal in my code and it didn't work.
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
'.$name.'
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
Modal Footer
</div>
</div>
</div>
if(mysqli_num_rows($result) > 0) {
while($post=mysqli_fetch_assoc($result)) {
$image=$post['imageurl'];
$name=$post['name'];
$text=$post['description'];
$price=$post['price'];
$small_desc = implode(' ', array_slice(explode(' ', $text), 0, 15))."";
$it = exif_imagetype($image);
echo'
<div class="package">
<div class="package-image">
<img src="'.(isset($image) && $image!="" && ($it == 1 || $it == 3 || $it == IMG_JPEG) ? $image : "img/404.jpg").'" class="item-img">
<span class="tooltiptext">Click for Details</span>
</div>
<div class="info">
<div class="text">
<div class="name">'.$name.'</div>
<div class="price">'.$price." " .$currency_simbol."USD".'</div>
<div class="buy">
Buy
</div>
</div>
</div>
</div> ';
I'm looking to have my "variables" display when I open a modal. This way each packages modal will have a different title, description, price, etc...

Dynamically pass data to a Modal from a dynamically created set of images using details from a MySQL database

I have created multiple objects using data retrieved from a MySQL database. Each object contains a clickable image and 2 headers. I can click an image which is connected to a modal but it only gives back 1 modal with the information from the very last object no matter which image is clicked.
Please help.
The following part creates the objects and works.
<div class="row kprod">
<?php
$get_kits = "select * from kitchens ORDER BY k_brand";
$run_kits = mysqli_query($con, $get_kits);
while($row_slides=mysqli_fetch_array($run_kits)){
$kit_brand = $row_slides['k_brand'];
$kit_name = $row_slides['k_name'];
$kit_img = $row_slides['k_img'];
$kit_desc = $row_slides['k_description'];
$kit_id = $row_slides['k_id'];
echo"
<div class='col-12 col-xs-12 col-md-6 col-lg-4 kpindi'>
<div class='row'>
<div class='col imgcol'>
<img class='img-fluid' src='assets/img/$kit_img' href='#portfolio-modal-1' data-toggle='modal'>
</div>
</div>
<div class='row'>
<div class='col'>
<div>
<h5 class='kprodtext' style='font-family:Adamina, serif;'>$kit_brand</h5>
<h6 class='kprodtext' style='font-family:Adamina, serif;'><em>$kit_name</em></h6>
</div>
</div>
</div>
</div>";}
?>
</div>
The next part is the modal I want to pass the data too.
<div id="portfolio-modal-1" class="modal text-center" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">x</span></button>
</div>
<div class="modal-body">
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="kprodtext" style="font-family:Adamina, serif;">
Brand</h2>
<hr class="star-dark mb-5">
<img src="assets/img/image.jpg" class="img-fluid mb-5">
<h6 class="kprodtext mb-5" style="font-family:Adamina, serif;">
<i>Name</i>
</h6>
<p class="kprodtext" style="font-family:Adamina, serif;">
Desc
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to assign different ids to your modals, otherwise only one will be opened.

Bootstrap 3 class="media-body" causes image to not be shown

I have the following code:
<div class="container-fluid>
{files}
<div class="media">
<div class="media-left">
<img src="<?php echo base_url('files/{filename}'); ?>" alt="afbeelding" class="media-object" style="width:200px">
</div>
<div class="media-body">
<h4 class="media-heading">{title}</h4>
<p>{text}</p>
</div>
</div>
<br>
{/files}
</div>
The current result is just the title and text being shown, without the image. When I remove the whole div with class "media-body", the image shows. I think my code is structured right, I followed the w3-schools example. How can I get both the image and text to show up in the bootstrap media format?
Missing "
Change from
<div class="container-fluid>
to
<div class="container-fluid">

Bootstrap Modal YouTube embed with while (extension errors)

I'm currently working on a website with YouTube embedded videos in Bootstrap modal. The problem is that YouTube embed is slowing down the website, because every embed is resulting in like 6 Chrome extension errors. This will result in like 100 errors and the website is going really slow.
Because it looks like every video is getting loaded, because they are in a while loop. Is there any other way to embed it? Without all these errors..
Can I make it better? I don't want all those errors. I tried object, but the videos are loading really slowly.
There is an image of the error.
I'm looping out images and when I click on them, it will embed out youtube videos.
<div class="mosaic-block bar2">
<div class="mosaic-overlay" >
<div class="details">
<center><h4>'.$dos['namn'].'</h4></center><br/>
</div>
</div>
<div class="mosaic-backdrop"><img src="uploads/'.$dos['bild'].'" data-toggle="modal" data-target="#'.$dos['id'].'"></div>
</div>
<!-- Modal -->
<div class="modal fade" id="'.$dos['id'].'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="margin-top: 159px;/* float: left; */width: 800px;float: 0 auto;margin: 0 auto;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<center><font color="grey">'.$dos['uppare'].'</font></center> <div class="content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/'.$dos['youtube'].'" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>

Categories