I am using this line of code to show the store images on server in my dropzone area its working fine but the thumbnail which is genrated by this is not proper its not show the thumbnail of full image its just zoom the image and then make its thumbnail this is the screenshot of thumbnail https://www.screencast.com/t/PZJjZIN9VJTV
and this is the screenshot of which i want
https://www.screencast.com/t/nwfNbMW2mzFx
var mockFile = {
id:id,
name:filePath,
size: '2000',
type: 'image/jpeg',
accepted: true // required if using 'MaxFiles' option
};
// this.files.push(mockFile); // add to files array
this.emit("addedfile", mockFile);
this.emit("thumbnail", mockFile,'http://inspiretech.local/uploads/'+filePath);
this.emit("complete", mockFile);
this answer comes a couple of years late, but in case it helps shorten the search time of other fellow users.
I found an easy way to solve this issue:
thanks to makitweb tutorial =>
have css correct your image size like so:
.dz-preview .dz-image img{
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
Related
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);
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;
}
On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.
When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?
On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.
It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.
Does anybody know how I might go about doing this?
P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.
Something like:
CSS:
.post
{
background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat;
}
(the image and the color are those really used, hope they don't sue me for that :) )
is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends
It looks like their background color for the post is the same as the color at the very bottom of that image. That way it just "fades" in - the image does not actually change size.
Example CSS would be:
#yourPostSelector {
background-image: url('path/to/image.jpg');
background-position: top left; /* or 'top center' - whatever works for you */
background-attachment: scroll;
background-color: #000000; /* pick the bottom color of your background image */
}
Just change you background color which you have used is #00000*
It should be changed to the color of the background image which you use, basically the bottom part so that it blends perfectly. Presently as per your present image the code would be like this :-
.body {
background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
clear: both;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 990px;
}
Update this class and check the result, if you don't understand comment here would make you understand.
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 tried to make a sprite by copy-pasting the code you gave to the userbar.php file. I kept the CSS the same as above. I saved the file with photoshop "save for web -> gif 64 no dither" and kept a small space between the two images in the file. I then uploaded it and referred to the file. But for some reason it only shows the normal image without the hover. Any ideas what I did wrong there? The code for php:
.myButton {
background-image: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif);
display: block;
height: 22px;
width: 22px;
}
.myButton:hover {
background-position: x y;
}
The original thread: How can I make this hover code shorter? And how can I create a css file that implements settings to more than one button?
Try
.myButton:hover {
background-position-x: -22px;
}
if the sprite is horizontal, else background-position-y.
For better understanding of sprites, watch this article about spites on nettuts+.
.myButton:hover {
background-position: 5px 5px;
}
One solution might be to specify the actual positional values for the sprites located in see.gif, as it's not clear if you're using x y as values or just as a placeholder for the snippet above.
If it's not a placeholder, well yeah - there's your problem. Just change x into the actual x-position and y into the y-position and you'll be fine.