I'm doing a project in Laravel in which student's certificate will be generated dynamically using Barryvdh DomPDF. This is my controller function:
public function certPdfGenerate()
{
ini_set('memory_limit', '-1');
$apply_id= input::get('id');
$get_certificate_data = DB::Connection('mysql1')->table('tbl_apply_certificate')->where('apply_id',$apply_id)->first();
$get_certificate_id1 = DB::Connection('mysql1')->table('tbl_apply_certificate')->select('apply_certificate_id')->where('apply_id',$apply_id)->get()->toArray();
foreach ($get_certificate_id1 as $key)
{
$get_certificate_id = $key->apply_certificate_id;
}
$filename = $get_certificate_id.'.pdf';
DB::Connection('mysql1')->table('tbl_apply_certificate')
->where('apply_id', $apply_id)
->update(['apply_pdf' => $filename]);
$data1 = [$get_certificate_data];
$pdf=PDF::loadView('students::htmlcertificate', array('data' =>$data1), [], ['format' => 'A4-L']);
$pdf->setPaper('A4', 'landscape');
$pdf->save(storage_path('certificates/'.$get_certificate_id.'.pdf'));
return $pdf->stream('htmlcertificate.pdf');
}
This is my view page :
<style type="text/css">
#certbackground
{
background-image: url('http://localhost/folder_name/public/cer_template/final-certificate.png');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
#certbackground1
{
background-image: url('http://localhost/folder_name/public/cer_template/final-certificate-back.png');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="certbackground">
#foreach ($data as $value)
<h3 style="margin-top: 142px;margin-left: 900px;font-weight: 100;">{{$value->apply_certificate_id}}</h3>
<h3 style="margin-top: 30px;margin-left: 370px;font-weight: 100;">{{$value->apply_name}}</h3>
<img style="height: 180px!important;margin-top: -5px;margin-left: 845px;" src="{{ URL::asset('public/certif_pro_image/'.$value->apply_photo) }}" />
<h3 style="margin-top: -148px;margin-left: 370px;font-weight: 100;">{{$value->apply_course}}</h3>
<h3 style="position:absolute;top:320px!important;margin-top:320px;margin-left: 450px;font-weight: 100;">{{$value->apply_softwares}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 532px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_start_date))}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 670px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_end_date))}}</h3>
<h3 style="position:absolute;top:189px!important;margin-top:189px;margin-left: 550px;font-weight: 100;">Grade {{$value->apply_grade}}</h3>
<h3 style="position:absolute;top:210px!important;margin-top:210px;margin-left: 440px;font-weight: 100;">{{$value->apply_centre}}</h3>
<img style="height: 80px!important;position:absolute;top:196px;margin-top:196px;margin-left: 220px;" src="{{ URL::asset('public/qrcode/'.$value->apply_qrcode) }}" />
<h5 style="position:absolute;top:545px;margin-left: 5px;font-weight: 100;">www.domain.in/certificate/{{$value->apply_certificate_id}}</h5>
#endforeach
</div>
<div style="page-break-after: always;"></div>
<div id="certbackground1">
</div>
</body>
The problem here is that the background image of pdf is too large in pdf. The size of background image is 3507 x 2480 with resolution 300. When I change the image size to 1058 x 748, it fits to pdf but the quality of pdf after print is too low.
How do we adjust the background image of pdf without losing clarity?
Dompdf, up through and including 0.8.4, does not support the background-size declaration (ref issue 463).
Since it looks like you want to contain the entirety of the image within the container you could try using a positioned image with a low z-index inside a relatively-positioned div. You would have to more precisely define the the positioning of the elements, but it should work for your example.
Here's a minimized demo that renders OK in Dompdf 0.8.4:
<div style="position: relative; border: 5px solid black; width: 450px; height: 375px; margin: auto;">
<img src="https://picsum.photos/200/150?grayscale" style="position: absolute; width: 450px; height: 375px; z-index: -1000;" />
<div style="position: absolute; top: 180px; width: 100%; text-align: center; color: white; line-height: 1.5"><span style="background-color: black; padding: .5em;">CONGRATULATIONS</span></div>
</div>
try this
<style type="text/css">
#certbackground
{
background-image: url('');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
#certbackground1
{
padding: 300px 100px 10px 100px;
width:300px;
height:500px;
}
</style>
</head>
<body>
<div id="certbackground">
#foreach ($data as $value)
<h3 style="margin-top: 142px;margin-left: 900px;font-weight: 100;">{{$value->apply_certificate_id}}</h3>
<h3 style="margin-top: 30px;margin-left: 370px;font-weight: 100;">{{$value->apply_name}}</h3>
<img style="height: 180px!important;margin-top: -5px;margin-left: 845px;" src="{{ URL::asset('public/certif_pro_image/'.$value->apply_photo) }}" />
<h3 style="margin-top: -148px;margin-left: 370px;font-weight: 100;">{{$value->apply_course}}</h3>
<h3 style="position:absolute;top:320px!important;margin-top:320px;margin-left: 450px;font-weight: 100;">{{$value->apply_softwares}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 532px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_start_date))}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 670px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_end_date))}}</h3>
<h3 style="position:absolute;top:189px!important;margin-top:189px;margin-left: 550px;font-weight: 100;">Grade {{$value->apply_grade}}</h3>
<h3 style="position:absolute;top:210px!important;margin-top:210px;margin-left: 440px;font-weight: 100;">{{$value->apply_centre}}</h3>
<img style="height: 80px!important;position:absolute;top:196px;margin-top:196px;margin-left: 220px;" src="{{ URL::asset('public/qrcode/'.$value->apply_qrcode) }}" />
<h5 style="position:absolute;top:545px;margin-left: 5px;font-weight: 100;">www.domain.in/certificate/{{$value->apply_certificate_id}}</h5>
#endforeach
</div>
<div style="page-break-after: always;"></div>
<img id="certbackground1" src="http://localhost/folder_name/public/cer_template/final-certificate-back.png" />
</div>
</body>
Related
I have a 1 page site with full screen scrolling sections.
Each section displays correctly on desktop, but on mobile the 'team' section has a white block top and bottom.
I have made another section for teams ('team2test') for use only on mobile - with HTML to try to make the section full height but the background image is not full screen
Please assist in either why the 'team' section has a gap top and bottom - or why my background image is not full screen in 'team2test'
Code for 'team2Test':
body,
html {
height: 100%;
margin: 0;
}
.team-images-mobile {
display: block;
margin-left: auto;
margin-right: auto;
padding: 10px;
width: 200px;
height: 200px;
}
.team-section {
background-image: url(https://neuefund.com/wp-content/uploads/2022/01/team_7693a7d4f435b52cec2b4ce8cbbf00a4.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team-section">
<div class="team-images-mobile">
<img src="https://neuefund.com/wp-content/uploads/2022/01/MAX-300x300.png" alt="" >
<img src="https://neuefund.com/wp-content/uploads/2022/01/KRISH-300x300.png" alt="">
<img src="https://neuefund.com/wp-content/uploads/2022/01/COFIELD-300x300.png" alt="">
</div>
</div>
Link to site
Your problem comes from:
why the 'team' section has a gap top and bottom
That comes from your padding in
.team-images-mobile {
padding: 10px;
}
why my background image is not full screen
This come from the height: 100vh you set in .team-section
body,
html {
height: 100%;
margin: 0;
}
.team-images-mobile {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
.team-section {
background-image: url(https://neuefund.com/wp-content/uploads/2022/01/team_7693a7d4f435b52cec2b4ce8cbbf00a4.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.team-section img {
width: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team-section">
<div class="team-images-mobile">
<img src="https://neuefund.com/wp-content/uploads/2022/01/MAX-300x300.png" alt="" >
<img src="https://neuefund.com/wp-content/uploads/2022/01/KRISH-300x300.png" alt="">
<img src="https://neuefund.com/wp-content/uploads/2022/01/COFIELD-300x300.png" alt="">
</div>
</div>
The HTML of your "Team section" looks like this now:
<div class="grve-column wpb_column grve-column-1">
<div class="grve-column-wrapper">
<div class="grve-element grve-text">
<h2 style="text-align: center;">Team</h2>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<div class="team-section">
<div class="team-images-mobile">
...
</div>
</div>
</div>
</div>
<div class="grve-empty-space grve-height-1x" style=""></div>
</div>
</div>
If you check in your browser inspector, you'd find that the .grve-element (the heading text "Team") is taking up space before the actual .team-section in your code. And that element has a white background.
So it doesn't really matter with your .team-section style. It's more of an HTML structure issue.
There are 2 direction to solve this:
If you can control the overall HTML, simply move your .team-section background css settings to the .grve-column level; or
Make .grve-element height 0 by setting it as "position: absolute; width: 100%;". You'd need to give .team-images-mobile some padding so they won't overlap with "Team".
link to example
Getting the black portrait box is easy, but how do I create something like the two red boxes right on top of each other? I know one solution is to export the two landscapes with the gap as one image and put it in as a portrait but I'd prefer to not do it like that.
This is a start for you.
.row {
display: flex;
}
.row div {
width: 50%;
}
div {
margin: 20px;
}
img {
width:100%
}
<div class="container">
<div class="row">
<div class="first">
<img src="https://placehold.it/400x800/ccc/666?text=" class="img-responsive" alt="">
</div>
<div class="two">
<img src="https://placehold.it/400x400/ccc/666?text=" class="img-responsive" alt="">
<img src="https://placehold.it/400x400/ccc/666?text=" class="img-responsive" alt="">
</div>
</div>
</div>
<div class="main">
<div class="flexbox">
<div class="row"><img src="https://via.placeholder.com/150"/>
</div>
<div class="row image-wrapper">
<div class="col"><img src="https://via.placeholder.com/150"></div>
<div class="col"><img src="https://via.placeholder.com/150"></div>
</div>
<div>
</div>
.main {
width: 500px;
}
.flexbox {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.col {
width: 100%;
height: 250px;
box-sizing: border-box;
padding: 10px;
}
.col img {
background: red;
width: 100%;
height: 100%;
}
.row {
width: 50%;
height: 500px;
padding: 10px;
box-sizing: border-box;
}
.row img {
background: black;
width: 100%;
height: 100%;
}
.row.image-wrapper {
padding: 0;
}
https://codepen.io/stargroup0075/pen/ExjMPXK
I want to make a watermark on a specific page on my project.
I write this in app.css
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url("../images/SystemLogo.png");
background-size: 100px 100px;
background-position: 30px 30px;
background-repeat: repeat;
opacity: 0.7;
}
and this is my blade
#extends('layouts1.index')
#section('content')
<div class="container">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="watermarked">
<div class="text-center">
<h2 class="text-center"> Appri=oval report </h2>
<form method="post" action="/student/share-approval/{{$approval->uniid}}">
#csrf
<p lang="ar" dir="rtl">
// here is the approval report
</p>
<button type="submit" class="btn btn-primary">share the report </button>
</div>
</div>
</body>
</form>
</div>
#endsection
The problem is not showing the watermark as the image I want .. the result is a default background. How can I show the image as a background?
I think your HTML is formatted incorrectly. The ending form tag and div is below the body tag.
Try this:
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url("https://en.opensuse.org/images/4/49/Amarok-logo-small.png");
background-size: 100px 100px;
background-position: 30px 30px;
background-repeat: repeat;
opacity: 0.7;
}
<div class="watermarked">
<div class="text-center">
<h2 class="text-center">Stuff here</h2>
<form method="post" action="/#">
<p>
A Form here
</p>
<button type="submit" class="btn btn-primary">Button</button>
</form>
</div>
</div>
I am using bootstrap 4 inside my wordpress theme. I am trying to make a slide show on the top of my page but the images are stretching out when the size is not 100%.
How do I make the images zoom instead of stretching. I have tried applying
.cover {
background-position: center center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-size: cover;
}
class to my tag.
This is the code for where I want to add the image.
<div class="carousel-inner">
<div class="carousel-item active">
<img class='cover' src="<?php echo get_theme_file_uri('/incl/1.jpg');?>">
<div class="carousel-caption">
<h3>Voorbeeld 1</h3>
<p>Voorbeeld beskrywing</p>
</div>
</div>
<div class="carousel-item">
<img class='cover' src="<?php echo get_theme_file_uri('/incl/2.jpg');?>" >
<div class="carousel-caption">
<h3>Voorbeeld 2</h3>
<p>Voorbeeld beskrywing</p>
</div>
</div>
<div class="carousel-item">
<img class='cover' src="<?php echo get_theme_file_uri('/incl/3.jpg');?>">
<div class="carousel-caption">
<h3>Voorbeeld 3</h3>
<p>Voorbeeld beskrywing.</p>
</div>
</div>
</div>
You're expecting image source (src) to be treated as background-image.
Might be !important to you, but it won't happen.
You probably want to show the image as background of parent (I moved cover class on parent):
.cover {
background: transparent no-repeat fixed center /cover;
}
.cover img {
opacity: 0;
display: block;
width: 100%;
height: auto;
}
<div class="cover" style="background-image: url(https://loremflickr.com/620/240)">
<img src="https://loremflickr.com/620/240">
<div class="caption">
<h1>Caption stuff here...</h1>
</div>
</div>
.cover {
background: transparent no-repeat fixed center /cover;
}
.cover img {
opacity: 0;
display: block;
width: 100%;
height: auto;
}
/* You don't need anything below this point. Just for SO example */
body {
margin: 0;
}
.cover {
position: relative;
}
.cover .caption{
width: calc(100% - 60px);
height: calc(100% - 60px);
left: 30px;
top: 30px;
background-color: #42424242;
color: white;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
border: 1px solid #ffffff35;
box-shadow: 0 5px 6px -3px rgba(0,0,0,.1), 0 9px 12px 1px rgba(0,0,0,.07), 0 3px 16px 2px rgba(0,0,0,.06)
}
<div class="cover" style="background-image: url(https://loremflickr.com/620/240)">
<img src="https://loremflickr.com/620/240">
<div class="caption">
<h1>Caption stuff here...</h1>
</div>
</div>
This lets the <img> still set the height of the slide but won't show it, so the background can be viewed. Obviously, you need to do it for each of the items.
I'm currently building a site on Wordpress using the html5blank as the parent theme. I've built all the front-end text pages on HTMl/CSS. When I've transferred all the files over a lot of the styling has broken - I've fixed the majority of it but there's one section that I cannot fix. This is how it should look -
And this is how it looks in the Wordpress site -
When I've inspected the site via developer tools it seems as though these rules are not being applied -
.agencyproducts {
position: relative;
display: inline-block;
text-align: center;
}
Also, the row in the front-end site is applying a height rule but not in the wordpress site. I've looked at applying specificity rules and !important but nothing (this also disrupts other styling rules on other parts of the site). I'm really stuck on this and would appreciate any assistance.
Here's the full code for the section -
section#products {
height: 800px;
max-width: 100%
}
.agencyproducts {
position: relative;
display: inline-block;
text-align: center;
}
.agencyproducts p {
text-align: center;
margin: 30px;
}
.agencyproducts img {
width: 70px;
height: 70px;
position: relative;
line-height: 1;
top: 50%;
}
figure {
text-align: center;
display: inline-block;
max-width: 80px;
height: 100px;
vertical-align: top;
margin: 5px;
font-size: 9px;
margin-bottom: 60px;
}
figure img {
padding-bottom: 5px;
}
.four {
padding: 0;
margin: 0;
border: 0;
}
.images {
margin-top: 30px;
border-bottom: 10px;
}
.images img {
margin-left: 20px;
padding: 10px;
}
.chevron {
height: 150px;
}
.chevron figcaption {
margin-top: 20px;
font-size: 13px;
color: #d3d3d3;
}
hr.hragency {
display: block;
width: 250px;
margin-top: 0em;
margin-bottom: 0em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: #F0F0F0;
}
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="2k4kproduction.html">
<figure>
<img src="images/production.png" alt="Production">
<figcaption>2K / 4K PRODUCTION</figcaption>
</figure>
</a>
<a href="postproduction.html">
<figure>
<img src="images/post-production.png" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure>
</a>
<a href="2d3danimation.html">
<figure>
<img src="images/animation.png" alt="Animation">
<figcaption>2D / 3D ANIMATION</figcaption>
</figure>
</a>
<a href="adhoc.html"><figure>
<img src="images/ADHOC.png" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure>
</a>
<a href="interactive.html">
<figure>
<img src="images/interactive.png" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure>
</a>
<a href="tvadverts.html">
<figure>
<img src="images/tv-adverts.png" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure>
</a>
<a href="360video.html"><figure>
<img src="images/360.png" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure>
</a>
</div>
</div>
<hr class="hragency">
<div class="row">
<div class="images">
<div class="four columns">
<img src="images/VIDEO.jpg" alt="Video">
<img src="images/blog.jpg" alt="blog">
</div>
<div class="four columns">
<img src="images/faq.jpg" alt="FAQ">
<img src="images/VIDEO.jpg" alt="Video">
</div>
<div class="four columns">
<img src="images/blog.jpg" alt="blog">
<img src="images/faq.jpg" alt="FAQ">
</div>
</div>
</div>
</div>
</section>
<section class="chevron">
<div class="container">
<div class="row">
<figure>
<figcaption>SEE MORE</figcaption>
<i class="fa fa-chevron-circle-down fa-3x" aria-hidden="true"></i>
</figure>
</div>
</div>
</section>
Try this:
.agencyproducts{
width:100%;
text-align:center;
}
.agencyproducts a{
display:inline-block;
}
Because container .agencyproducts need to have text-align:center and first childs of it must be displayed as inline-block ... then they will display properly. You only set child of a tag as display:inline-block but do not tell CSS how it should treat it parent.
With what I understood try appending !important to your custom css properties so as to override any pre-existing style properties.
height: 150px !important;