I have a serie of photos taken with a mobile. I am trying to print a complete document in PDF (done by DOMPDF in Laravel), with text and a photo inserted in it. It works perfect, except for the photos, it got printed very very small.
I had same problem with background, but I designed it with the exact A4 size (in print point).
My question is how to modify the photographies in order to get them printed in the PDF at the size I want.
PHP Code:
$cliente = Cliente::findOrFail($id);
$view = \View::make('cpanel.pdf.curriculum', compact('cliente'))->render();
$pdf = \App::make('dompdf.wrapper');
$pdf->loadHTML($view);
return $pdf->download('cv-'.$cliente->nombre." ".$cliente->apellidos."-".Date('d-m-Y').'.pdf');
I tried with css rules, but DOMPDF ignores it for images
<img style="width: 125pt;border: 1px solid red;" src="{{URL::asset('/images/candidatos/'.$cliente->foto)}}" />
instead of asset {{URL::asset('/images/candidatos/'.$cliente->foto)}} use relative url eg . "home/public_html/img/imagename.jpg"
there is a semicolon after style= replace it with double quotes
Related
I control the size of my image in a page by CSS imgType.
<img class="imgType" style="..." src="/image1.jpg" alt="..." />
If I edit the image to change its name only (the fields width & height stay empty and save the content of the editor, tiny writes a value for both the width and height.
<img class="imgType" style="..." src="/image2.jpg" alt="..." width="249" height="145" />
I tried to use object_resizing : false, but it does not do anything.
How can I stop tiny to write these values?
You can remove the image dimensions from the Insert/Edit Image dialog with:
image_dimensions: false
Docs:
https://www.tiny.cloud/docs/tinymce/6/image/#image_dimensions
I am trying to resize image in product view page, but after the image has resized, white spaces come along in left and right both the sides (width), in resize function I gave the value 338,474, but It comes with white spaces. For that I applied function keepFrame(false).
But after applying that, my image height remains same, but width changes to 271. What should I do? Below is my code.
<img src="<?php echo $this->helper('catalog/image')->init($product, 'image')->keepFrame(false)->resize(338,474);?>" alt='' title="<?php echo $this->htmlEscape($this->getImageLabel());?>" />
I tried keepFrame(false) both before and after resize(338,474).
Please, if any body can help me.
Simply pass your height and width in following function resize
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(338, 474).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
Try to do the following steps, (let's say you want 150 width):
Go and open default/template/catalog/product/view/media.phtml.
Now On line 54 find the delete the ‘width’ and ‘height’ attributes in the tag.
On the same line (54), find.
$_image->getFile()->resize(150, 150);
All good. Simply replace one of these numbers with 0 and the image will auto scale. e.g.:
$_image->getFile()->resize(150, 0);
It will give you images 150 pixels wide, but the height will vary according to the original image ratio.
Hope that helps.
As you can see in http://thefreefallband.com/super in the last post there's an image too big for almost every computer. Is there anyway to pu t a limit to the images in wordpress in width?
If there isn't, how can i resize it via html code without losing the proportion?
A really simple CSS fix would be:
.post img {
max-width: 100%;
height: auto;
}
You can declare the sizes of images the WP makes automatically when you upload them to the Media Library by going to 'Settings -> Media'. Note that while Thumnial Size will crop your image to the exact size you specify, Medium Size and Large Size will keep the aspect ratio of your image, while resizing it to fit your specified max height/width.
If they are not good for you, you can add you own image size in functions.php
add_image_size( $name, $width, $height, $crop );
See the codex for more informaion.
When calling an image, depending on the function your are using, you can specify either one of the defined image sizes, or a maximum height/width (WP will find the closest match if you do this).
Assuming your are using the post featured image -
if(has_post_thumbnail( $post_id )) :
the_post_thumbnail( $size, $attr );
endif;
See the codex for has_post_thumbnail() and the_post_thumbnail() for more informaion.
In mvc3 Products have more images and there is standard box size that all images seems in that in view.
Users enter images in different sizes: 200x800, 2200x500 ..etc. But I must show all images in standard box in 150x120 sizes. Most images stretchs horizontal or vertical in 150x120 size box and seems very bad.
<img src="#Url.Content( Path.Combine( "~/Uploads/Products/", #item.Date.Value.ToShortDateString(), #item.ImagePath1 ) )" width="150" height="120" alt="" />
How can I do all images get small, but to keep proportion ?
one way to keep propotions is to set the width value in css, but then the image will have the width and the height is unknown depending och the startimage. This will be the simplest way to fix the streched images. But you will not know the height as mentioned.
And ofc you must load the big image (big transfer size), so this may not be a propriate solution.
razor code
<img src="#Url.Content( Path.Combine( "~/Uploads/Products/", item.Date.Value.ToShortDateString(), #item.ImagePath1 ) )" alt="" />
css code
.parentDiv img{
width: 150px;
}
You got good question. However one way to do this is to ask user to upload in some proportion using javascript.
E.g your input control should be like
<input id="ImageFile" name="ImageFile" type="file" onchange="check_filesize(this.value,'upload');" />
And in javascript your can check file size and etc.
Another is to make use of ImageResizeClass and in your Upload Control you can resize the file to match your expectation size to shown in div.
So your upload controller would be something like following...
public ActionResult Upload(Image image, HttpPostedFileBase ImageFile)
{
ResizeImageHelper resizeImageHelper = new ResizeImageHelper();
resizeImageHelper.ResizeImage(path + ImageFile.FileName, path + ImageFile.FileName, 640, 480, false);
resizeImageHelper.ResizeImage(path + ImageFile.FileName, path + "thumb" + ImageFile.FileName, 74, 74, false);
image.imageLocation = ImageFile.FileName;
image.imageThumb = "thumb" + ImageFile.FileName;
imageRepository.Add(image);
imageRepository.Save();
}
This way you can make sure to show the image perfectly.
Hope you understand and this helps.
Can any one tell me how to show image of Facebook, Google, etc. on different positions from this image-
to something like this-
This is what is called an image "sprite." It is a collection of images put into a single image.
You have to use CSS to choose which portion of the "sprite" file should be displayed. Check out this link from W3 schools for usage examples:
http://www.w3schools.com/css/css_image_sprites.asp
CSS:
for the top most image
#topimage{
background-image:url('/images/image.png');
background-position:0 0;
width:200px;
height:24px;
}
for the second image from top,
assuming the height of the each part of image to be 24px..
#secondimage{
background-image:url('/images/image.png');
background-position:0 -24px;
//-24px means the picture is shifted up by 24px so
//that the second image from top is visible
width:200px;
height:24px;
}