I've created a pile of images on which you click through. By clicking the top image it moves the z-index back by the amount of images. These images need to have a shared description. If I put position:absolute on them (to stack them). The description also gets stacked. Is there a way to keep them it under the images?
.image-pile {
position: relative;
}
.images img {
position: absolute;
width:300px;
}
https://jsfiddle.net/td59pr1h/
The .image-pile had no height because the content was positioned absolute. Fixed it by calculating the height in javascript.
var imgheight = $( ".images img" ).innerHeight()
$('.images').css('height', imgheight)
Related
I am trying to get an array of images of varying aspect ratios to fit nicely inside a modal - that is the modal will have a larger height for vertical images and smaller height for horizontals. I therefore do not want to specify a height in the graphql query because the images should scale down to fit their container.
const data = useStaticQuery(graphql`{
allFile(filter: {sourceInstanceName: {eq: "images"}, ext: {eq: ".jpg"}}) {
nodes {
id
name
relativeDirectory
childImageSharp {
original {
height
width
}
gatsbyImageData(quality: 100, layout: CONSTRAINED)
}
}
}
}
`);
I have passed the photos into a modal, a carousel, and a dummy div with height of 300pixels and the result is always the same: the images are huge and cropped to fit the container. When I set max height in the query to 500 pixels, everything works fine, but the verticals are much too tiny for the modal. When I set height on GatsbyImage directly, the images are the right size, but something is adding (Gatsby Image wrapper?) 1000 or so pixels of padding on the left and right sides of the image.
Carousel styles:
<div
ref={scrollContainer}
tabIndex={0}
css={`
max-width: 100vw;
max-height: 60vh;
overflow-x: auto; etc...
GatsbyImage styles:
<GatsbyImage
alt=""
objectFit='contain'
// above doesn't work
image={getImage(photo)}
key={photo.id}
// style={{ height: '60vh' }}
//above works but adds excessive padding somewhere
imgStyle={{ objectFit: 'contain' }}
//above doesn't work
/>
I have a Image with a simple clipping Rect ( rotate 30 degree with size 200x200 to make a small view part of image ). My problem is how to prevent Image move or scale outside clipping rect ( that mean Image need alway include entire clipping Rect )?
Here is my code:
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
// create a clipping path
var rectClippingPath = new fabric.Rect({
top: 100,
left: 200,
width: 200,
height: 200,
fill: 'red',
angle: 30,
absolutePositioned: true
});
// create image
var newImage = new fabric.Image();
newImage.clipPath = rectClippingPath;
canvas.add(newImage);
newImage.setSrc('http://fabricjs.com/assets/pug_small.jpg', (imageObject) => {
newImage.set({ left: 50, top: 50});
canvas.setActiveObject(newImage);
newImage.setCoords();
canvas.requestRenderAll();
})
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.6/fabric.min.js" integrity="sha512-XcwgBTqf2CXR/nsswCV1e0j9CjXo87APyBsATK2/l7MvTpcIG0QYKA87v5KIJ4RS6ytArv2pWD6UcRorKhYp1A==" crossorigin="anonymous"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
And here are some example cases:
Here is expected result:
Thank you!
I can't see a way to achieve it based on your example. I think it needs a structural change. You can do it by having a parent element with all controls and then a child element (image object).
Whenever you move the parent frame you should force the photo to move by the same amount, whenever you scale the frame you should also proportionally scale the child photo, same with rotation.
Let's say you rotate the parent frame, now in order to manipulate the photo inside you will need some kind of activating trigger: double click or a button. That will make sure you are not moving the parent frame, but the child.
While you move the child photo you will need to force it to stay contained within the parent frame borders. This is not hard if both elements have a rotation of 0, 90, 180, 270, 360 degrees. It is much harder to make it nice and smooth for all other rotation angles. You can find a working, but not perfect solution here: Contain a rotated object inside another rotated object FabricJS. I also started working on a smoother solution for that, but it is not completed https://codesandbox.io/s/force-contain-of-object-inside-another-object-fabric-js-v3-j38sz.
Implementing this solution you will most probably encounter also an issue having with rotating. It's easy to rotate an child image and the parent if they have the same origin point, but if you move the child and try to rotate the parent, then you will need to rotate them considering a different origin point. Here is a solution to this: https://codesandbox.io/s/rotation-of-an-object-with-different-rotation-origin-fabric-js-362-8m4cb?file=/src/index.js
You can also visit this platform and have look at similar ideas https://diamondphoto.co.nz/. It is build in Fabric JS version 3.
I need for Fine Uploader to be able to drawThumbnail as a background image or to otherwise create scaled and cropped squares.
Basically, I am trying to reproduce the behavior I used in angularjs / flowjs, which was (more or less):
// I modified flowjs to set the background-image here instead of src with the base64 image.
<div ng-repeat="file in $flow.files" flow-img background-size: 'cover'">
This is the API on how to draw a thumbnail, but it specifically states that it returns a img or canvas. Instead, I'd like it set to the css property background-image.
http://docs.fineuploader.com/branch/master/api/methods.html#drawThumbnail
This solution gets close, but does not achieve the same effect as background-size: cover.
#image {
width: 33%;
padding-top: 33%;
position: relative;
}
#image canvas {
position: absolute;
top: 0;
bottom: 0;
}
...
callbacks: {
onSubmit: function(id, fileName) {
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
$('#image').html(canvas);
this.drawThumbnail(id, canvas, 500, false);
}
Using the UI mode give me exactly the same issue, I can only use it as the src like so:
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
This is my preferred solution...
#image {
width: 33%;
padding-top: 33%;
position: relative;
background-size: cover;
}
...
callbacks: {
onSubmit: function(id, fileName) {
this.drawThumbnail(); // somehow onto the background property of #image
}
Another solution, if widely adapted, would be to use elements as backgrounds (because then I could use the canvas for the #image background), but as of right now this is not a practical solution:
https://developer.mozilla.org/en-US/docs/Web/CSS/element
Another solution would be to watch for changes on the $('#image img').attr('src'). Hide the img element and set the background-image of #image on change. But, that's another ridiculous solution when the encoded image is right there.
If there isn't already a way to do this with fine uploader, why restrict the element of type img? Why not take any element and any attribute? Why not just return the base64 image and let us set it to any attribute?
Thanks in advance.
It sounds like the easiest solution would be to ask Fine Uploader to generate a thumbnail, pass the API method a temporary <img>, grab the src attribute from the <img> and use that to construct the background-image.
For example:
callbacks: {
onSubmit: function(id) {
var tempImg = document.createElement('img'),
self = this;
this.drawThumbnail(id, tempImg, 500).then(function() {
var fileContainerEl = self.getItemByFileId(id);
previewImg = fileContainerEl.getElementsByClassName('previewImg')[0];
previewImg.style['background-image'] = 'url("' + tempImg.src + '")';
});
}
I want an image to remain the full height of the browser window even if the window is made smaller. This seems to do the trick. However, at current, the image remains anchored to the left side of the screen with the right side of the image being what is lost as the window resizes. Instead, I'd like the image to chop from both sides leaving a centered image. Is this possible?
Note: I need the image in a div, not set as background.
Thanks!
Here is the CSS I'm currently using:
.div
{
min-height:100%;
min-width:100%;
text-align:center;
overflow: hidden;
margin: 0 auto;
}
.img
{
min-height:100%;
min-width:100%;
margin: 0 auto;
}
something like this ?
var origWidth;
$(document).ready(function() {
origWidth = $(window).width(); //store the window's width when the document loads
origHeight = $(window).height(); //store the window's width when the document loads
});
$(window).resize(function() {
var curWidth = $(window).width(); //store the window's current width
var curHeight = $(window).width(); //store the window's current height
var deltaTop = (curWidth- origWidth);
var deltaLeft = (curHeight- origHeight);
$("#image1").offset({top:($("#image1").offset().top + deltaTop)});
$("#image1").offset({left:($("#image1").offset().top + deltaLeft)});
origWidth = curWidth;
origHeight =curHeight;
});
JsFiddle
(inspired by this question's solution: link)
This is the code I have:
<a class="image_show" href="#"></a>
.image_show:
background-image: url("/images/img.png");
display:block;
}
. image_show:hover {
background-image: url("/images/img2.png");
display:block;
}
The above solution doesn't display the image unless there is text in there. How can I show my image without text in the anchor tag?
Do
.image_show {
display: block;
width: 123; // width of your image
height: 123; // height of your image
}
You could also use inline-block. This more closely resembles how a normal image would fit in a page.