I am wanting to add a frame to an image using Laravel.
Example, I have two images, one image is the png frame, and the other is the original image.
I need to put the two together to form an image with a frame.
This is my frame.
My goal is that I can put a frame on any image.
You can easily compose images together using JavaScript with merge-image package.
With the following images:
/body.png
/eyes.png
/mouth.png
You can do:
import mergeImages from 'merge-images';
mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
.then(b64 => document.querySelector('img').src = b64);
// data:image/png;base64,iVBORw0KGgoAA...
And that would update the img element to show this image:
Well this is more about the css and html question
BTW you can do this in border-image property in css here the example
Html
<img src="https://images.unsplash.com/photo-1565013161635-98472edee347?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" width="50%" id="borderimg1">
CSS
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
**Result**
There are some excellent client-side approaches already in this thread, but if you want to do this server-side, the popular Intervention Image package is handy and designed to work with Laravel.
You'll have to do some resizing math if your images vary in size, but fundamentally you want the insert method to overlay one over the other.
// create new Intervention Image
$img = Image::make('public/foo.jpg');
// paste another image
$img->insert('public/bar.png');
// create a new Image instance for inserting
$watermark = Image::make('public/watermark.png');
$img->insert($watermark, 'center');
// insert watermark at bottom-right corner with 10px offset
$img->insert('public/watermark.png', 'bottom-right', 10, 10);
Related
I have a table for member. When i display all image in html I put and all of them are displayed with the same size but when I put class='img-responsive' they go back to their original size.
Ok I now understand what you were asking. So let me explain.
All images have something called an aspect ratio. This can be 1:1 which means for every 1px(or whatever your unit of measurement is) there is 1px on the other side. Then 1:2 so for every 1px there is 2px on the other side and 1:3, 1:4 ...etc.
The ratio you would like to have is a 1:1 ratio that is 100px * 100px.
But this cannot be forced from an image with another aspect ratio without distorting the image. Companies like facebook do this by either creating cropped versions of the image or giving it a background-size of cover.
My recommendation would be to create a div with a height and width of 100px and set the image as a background image as follows:
.divClass{
background-repeat:no-repeat;
background-size:cover;
width:100px;
height:100px;
}
Next add the following to your php code
<div class="divClass" style="background-image:url('image/location/<?php echo $imageName; ?>');">
This would allow the image to fill the div fully while keeping the aspect ratio. The downsides would be that some of the image would not be visible if the aspect ratio of the image is not 1:1 which is what you are trying to achieve. Also if you would like to change the position of the image you can use the background-position Property.
If you would like to be able to see the entire image you can add a popup box.
jQuery: How can I show an image popup onclick of the thumbnail?
Your final solution would be to crop the images or allow the user to crop the image before they upload. Below is a great plugin that allow this.
https://fengyuanchen.github.io/cropperjs/
If you want to force the width/height of the img element you can use :
img {
width: 100px;
height: 100px;
}
In case you are using some other libraries that override default css behavior you can use !important:
img {
width: 100px !important;
height: 100px !important;
}
The img-responsive class from bootstrap will set:
max-width: 100%;
height: auto;
To the image, and if you want a specific width/height - this is not what you are looking for.
I am making a project in which I am using a cover picture like Google+.
approx Full on screen but when I upload small size pictures or very large size pictures, it stretches or compress in preview.
simple tag I am using to fit in my box is
<img src="coverphotos/1291384_4846629064030_1548133592_o.jpg" height="530px" width="1024px" style="border-width: 0px; margin-top:-4px">
Very very important. I wanted to make a cover picture on my project but i am getting irritated because its stretching, and making picture ugly, how Facebook,Google+ upload a cover picture without stretching?
Preview.
http://www.tiikoni.com/tis/view/?id=479959b
I don't want it to get stretch, while uploading on fb and google its works osm
Either set the height to 530px OR set the width to 100%, don't do both together.
The picture will not be stretched and will maintain its aspect ratio. :)
This: height="530px" width="100%"
You're telling the picture to take the full width of its parent and to be exactly 530px high. What you probably want is unconstrained height on the image, but constrained height on its parent with overflow: hidden.
Take a look at this article: Perfect Full Page Background Image
Based on your link, this css fixed the issue.
body {
width:100%;
margin: 0;
}
center {
width:100%;
}
center img {
width:100%;
height: auto;
}
It's my first time asking here (I have visited the site several times, but never asked). Well, let's go to the question:
It happens that I'm developing a live image resizer (I know it already exists, but I'm doing my own for my own projects). It has three parameters: the image path (obviously), the size I want to resize and the extra margin I want to add. The idea is to resize the image inside a box with square dimentions. The problem is, the size I want to resize depends on the size of the outer box. For example, I have this HTML code:
<div class="image_outer_box">
<img width="300px" height="199px" style=" margin: 65.5px 15px;" src="img.jpg">
</div>
The properties of "image_outer_box" are the following:
.image_outer_box
{
height: 330px;
width: 330px;
border:solid 1px #737373;
}
The function I call is this:
liveResize($img, $size, $extramargin);
The problem here is when I send the $size, since I must be aware of the CSS properties of "image_outer_box" in order to make the right resize. And, as you can see, it's not only a matter of the size specified in "image_outer_box" but the margin I want to add. Actually, I wanted to add 15px of extra margin for the image and resize the image inside 300x300.
It's not critical to have a way to get the CSS attributes from this particular class, but it would help if I (and other developers) can apply the function without being aware of the CSS attributes of the container where the image will be placed.
If there's a way to make it, I would be great.
Thanks! (for the other times I came here to search a solution and I found it!!!)
EDIT: I found a way that doesn't require to get the CSS properties, but still I would like to have info for this matter. Thanks for those who tried to help 'til now!
Do you want to actually store the resized image, or are you just trying to display it resized? If the latter is the case, the following solution might help:
HTML
<div class="image_outer_box" style="background:url('img.jpg') no-repeat; background-position:50% 50%; background-size:100%;">
</div>
CSS
.image_outer_box
{
margin:10px;
height: 330px;
width: 330px;
border:solid 1px #737373;
}
Of course, this doesn't allow you to manually set the width and height of the image, since that depends on our CSS entirely. Change the CSS, and the size of the image will automatically change as well. I like this method quite a bit, but it won't get very far if you want to store the image or if you want to be able to set the image size manually.
I think in order to be aware of the CSS and change according to the current client side state of the image you should (I mean I would recommend) use Javascript and maybe if you want to keep the function call it over AJAX.
OK, let's say I have this image:
In my Java game, I use a cropping method which crops each monster of 32x32 pixels and thus puts in monster[0] onwards. Anyways, in PHP, is there some way I can do this? Like crop an image and go from there?
Any help would be appreciated.
You can use imagecreatefromgif() with PHP where you can create a new image on the fly by giving specific x and y positions. Rather than just me copy/pasting the code, here is the link to the documentation.
http://php.net/manual/en/function.imagecreatefromgif.php
You can also use different variations of imagecreatefromgif() such as imagecreatefromjpeg() or imagecreatefrompng() etc
All are linked to on the PHP documentation page as well as more examples in the comments.
Hi you can crop the image via imagecopyresampled the man page
http://php.net/manual/de/function.imagecopyresampled.php
You just have to set the correct offset.
if this should be displayed in a Browser you can do it even via CSS
.selector {
height: 32px;
width: 32px;
overflow: hidden;
display: inline-block;
background: url(theimage.gif) -32px 0px no-repeat;
}
Hope it helps
Don't crop it. You can use it as it is with CSS background-position. The the sive of a and move the background to the image you want. It is faster than loading every image on its own.
I 'm using zen as the basic theme to make a new theme for my site. The problem is i want background images for header and footer that are not getting displayed until i specify a height and width for them.Moreover, the height and width specified in the CSS inside the #header and #footer have to match the exact dimension of the original images (which are dimensionally large) otherwise the images are not being displayed properly (parts of them get cut). Is there a solution (either using CSS or PHP) that would allow me to write the CSS for the header and footer without any dimensional constraints so that the background images self adjust ? The header and footer contain no blocks. A part of the CSS is as follows :-
#header
{
background-image:url(images/header.jpg);
background-repeat:no-repeat;
height:
background-position:center;
}
#footer
{
margin-top:0px;
background-image:url(images/footer.jpg);
height:391px;
background-position:center;
}
#footer-inner
{
text-align:center;
padding:4px 10px 10px 10px;
}
If you want the images to automatically scale, you will need to use an img tag for each image, and set the width/height to 100%. That will scale them automatically to be the same size as their parent container. That means if you want the images to scale according to the size of the browser window, you'll need to set the parent container's width/height to be a percentage, and not a fixed pixel width/height.
Few sites do that sort of thing, you may want to reconsider and use fixed size images.
Background images in CSS are designed to display themselves in the background of the div they are placed in. This means that the size of the div determines the extent of the image you see. In your case, since your header region has no content, #header has the default dimensions set in layout.css.
As you have discovered, if your header div has no content, you have to explicitly set the size of your header to your desired dimensions, either in CSS as you originally posted (recommended) or with an empty block with the correct dimensions (not recommended except in rare circumstances).
If you use the preprocess functions, you should be able to set a class for the header and footer based on the images you choose. You will have to create the CSS for the different classes to match the images though.
For example:
Preprocess Function
function themename_preprocess_page($vars) {
$classes = array('image1', 'image2', 'image3');
$vars['header_class'] = array_rand($classes);
}
CSS
#header .image1 {
background-image: url(path/to/image.jpg);
height: [imageheight] px;
width: [imagewidth] px;
}
Hopefully this helps.