I have two elements in a photo upload cropping tool which I am trying to bring in center and side by side.
.imageuploadcropcontainer {
text-align:center;
margin: 0 auto;
}
<div class="imageuploadcropcontainer">
<img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
<div style="border:1px #e5e5e5 solid; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
<img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="position: relative;" alt="Thumbnail Preview" />
</div>
Image source with alt="Create Thumbnail is already in center, but image source alt="Thumbnail Preview" is on the left side of the page. If I put this element on float right then it goes to extreme right side of page, I do not want to use margins to set it, otherwise that is working.
.imageuploadcropcontainer {
margin: 0 auto;
width: 300px;
}
.imageuploadcropcontainer #thumbnail,
.imageuploadcropcontainer .hello {
width: 50%;
float: left;
}
.imageuploadcropcontainer:after {
content: '';
display: block;
clear: both;
}
<div class="imageuploadcropcontainer">
<img src="" id="thumbnail" alt="Create Thumbnail" />
<div class="hello" >
<img src="#" alt="Thumbnail Preview" />
</div>
Updated after comment question:
can i manipulate the space between the two
Sure you can, depending on what you exactly want. Right now there is no space between the two. See the green borders while running the next snippet.
.imageuploadcropcontainer {
margin: 0 auto;
width: 300px;
border: solid 1px orange;
}
.imageuploadcropcontainer #thumbnail,
.imageuploadcropcontainer .hello {
width: calc(50% - 2px); /* 2px is border 1px left + 1px right from each box */
float: left;
border: solid 1px green;
}
.imageuploadcropcontainer:after {
content: '';
display: block;
clear: both;
}
<div class="imageuploadcropcontainer">
<img src="" id="thumbnail" alt="Create Thumbnail" />
<div class="hello" >
<img src="#" alt="Thumbnail Preview" />
</div>
Related
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>
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 have a button to choose an image and i have a space where i want to show a preview of that image. This space is just above of that button.
Now I want to add a dashed border on this image and border opacity should be 0.47. But the problem is I have already inserted image tag in my code and i'm just changing the <img src=""> dynamically using JS & that is why i can see the border even before choosing an image.
I want this kind of thing:
When image is there its perfectly fine, like this:
But image is not there its showing a small border just above the post button, like this:
Here is my HTML/PHP code :
<div>
<div id="post-image-content">
<div id="post-image-div">
<img id="blah" class="post-image" alt=" " width="100" height="100"/>
<img id="closes" class="close-button-image" src="<?php echo $this->webroot.'mainsite/img/img-close.png'?>" />
</div>
</div>
<a href="#">
<i class="fa fa-camera" aria-hidden="true" id="capture_image_01"></i>
</a>
<?php echo $this->Form->input('cover_image_url', array('type' => 'file','onchange' => 'document.getElementById(\'blah\').src = window.URL.createObjectURL(this.files[0])','style' => array("display:none"),'label' => false, 'div' => false));?>
</div>
And here is my CSS
.post-image {
margin-bottom: 10px;
margin-left: 10px;
border-radius: 4px;
opacity: 0.5;
border: 2px dashed rgba(20, 134, 171, 0.47);
padding: 3px;
}
#post-image-content {
display: block;
overflow: hidden;
}
#post-image-div {
position:relative;
z-index:0;
float: right;
margin: 2px 2px;
}
#post-image-div:hover .close-button-image {
position: absolute;
right: 6px;
top: 8px;
display: block !important;
z-index: 1;
height: 10px;
width: 10px;
}
.close-button-image {
position: absolute;
right: 6px;
top: 8px;
display: none;
z-index: 1;
height: 10px;
width: 10px;
}
Any help would be highly appreciated as i don't have any clue now.
You can add condition before image, if no default image or img tag not needed to shown
<?php if ($image): ?>
<img id="blah" class="post-image" alt=" " width="100" height="100"/>
<?php endif ?>
or add condition to that class only (apply required css)
<img id="blah" class="<?php echo $image ? 'post-image' : '' ?>" alt=" " width="100" height="100"/>
#post-image-div{
border: 2px dashed rgba(20, 134, 171, 0.47);
padding:2px;
border-radius:3px;
}
#post-image-div img,#post-image-div{
width:100px;
height:100px;
<div id="post-image-div">
<img id="closes" class="close-button-image" src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" />
</div>
try this code
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;
In my web i allow user to post comment with there name and picture. I have notice one issue that when some one post bigger picture in comment using html code it run out of comment box. so all i want is thing should stay inside a comment box. not matter how big picture they post. i have posted all detail below kindly help thanks :|
My html
<div class="mycomment">
<div id="postpic">
<img id="profile_pic" width="50px" height="150px" src="image/user/1.gif" class="">
</div>
<div class="mycommentpost">
<a class="postername" href="profile.php?userID=1">Deepak Kumar: </a><br>
<img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt="">
</div>
</div>
My css:
.mycomment {
font-weight: normal;
color: #000000;
border: 2px solid #DEDEDE;
letter-spacing: 1pt;
font-family: arial, helvetica, sans-serif;
float: left;
width: 550px;
margin: 20px 0;
}
#postpic {
float: left;
width: 70px;
}
.mycommentpost {
font-weight: normal;
color: #000000;
letter-spacing: 1pt;
width: 480px;
float: right;
}
.postername {
color: #580000;
font-weight: bold;
font-size: 1em;
text-decoration: none;
}
Comment here is just a picture:
<img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt="">
Solved : By adding this ->
.mycommentpost > img{
max-height: XXXpx !important;
max-width: XXXpx !important;
}
Add to your CSS
.mycommentpost > img{
max-height: XXXpx !important;
max-width: XXXpx !important;
}
This way you will limit the max sizes of added images..
no matter what size of image they upload using this css set the image to default size in your mycommentpost div.
> .mycommentpost img{
> border: 1px solid #DEDEDE;
> padding: 10px;
> width: 130px; }
Try this
<div class="mycomment">
<div id="postpic">
<img id="profile_pic" width="50px" height="150px" src="image/user/1.gif" class="">
</div>
<div class="mycommentpost">
<a class="postername" href="profile.php?userID=1">Deepak Kumar: </a><br>
<img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt="">
</div>
.mycommentpost {
font-weight: normal;
color: #000000;
letter-spacing: 1pt;
width: 480px;
float: left;
}
.mycommentpost img{
width :450px;
}