I am trying to place an image of 400x400 as my product image. But this image appears stretched and blurred. The reason I think is that the default window size of product image is 562x562.On hovering over the image,the actual resolution of the image i.e. 400x400 is visible. So is there any way to change the dimension of window in woocommerce??
Here is the link http://mytalaash.com/product/image-2-2/
Related
I am using konva-react and want to crop my uploaded image in canvas editor. My approach is to show a rectangle on the selected image. when that rectangle is resised, then in onTransformEnd method, I am giving crop object with width, height , x and y as the resized rectangle.
Further If I want to crop more, then I want to show the actual image with reactangle to show the cropped part.
The issue is, when I try to crop second time, it sheo the cropped image and not the actul one. enter image description here
enter image description herePer this page (https://www.highcharts.com/docs/maps/custom-maps) I open inkscape, insert an image I want to draw over and then click on "resize page to selected object" with the image selected. This resizes the page to the size of my background image. I then create the shapes over the image as instructed in the page referenced above. What I want to do is when I paste the svg into the highcharts converter it keeps the shapes as drawn on the page so that I can then insert that same picture into the background of my highchart map on the page and the shapes I have drawn fit perfectly where I drew them on the image in inkscape. Instead it seems like the converter resizes the shapes to best fit the screen. If I didn't want the background image then this would be perfect however with this feature all the images drawn no longer "fit" in the background image where I drew them. Any way to get this to be a 1:1 size conversion so that inserting a background image works?
The small size creates an image too large to fit in the box. Is there a way by which the image can be wrapped completely?
I am doing
<div class="catimgback">
<img src="#arguments.item.getImageURL(size='arguments.size',width=arguments.width,height=arguments.height)#" alt="#htmlEditFormat(arguments.item.getValue('title'))#" class="catimg" />
</div>
Where arguments.width = 163px; arguments.height=163px; and arguments.size = small
If i make catimgback's style=height:100% then all goes well. Also, I played with keeping the size to be custom and giving custom width and height but could not get the images to work. all the small size images gets cut off.
I think you may be confused as to how getImageURL() works. The only time you need to pass in the height or width arguments, is if you pass in size='custom' or omit the size attribute altogether.
Also, when you use size='custom', the image gets cropped automatically based on the dimensions of the image that's been uploaded. So, in your case, you want a square image ... but what if the image that's been uploaded is not exactly square, maybe it's a rectangle. So, in that case, Mura starts at the very center of the image, then scales out from there to the outer most boundaries. If the image were a vertical rectangle, you can imagine then that the top and bottom parts of the rectangle won't make the cut. Conversely, if the image were a horizontal rectangle, then the left and right edges of the image won't make it into the cut.
What you really want in this case is a pre-defined image size called catimg with a height and width attribute of 163px. To create this:
Go to Site Config > Edit Site from the Admin area
Click the Images tab
Towards the bottom, click Add Custom Image Size
Enter a Name (for example, catimg)
Enter the Height
Enter the Width
Click Save (You now have a custom image size that can be used for any content items)
Go to the Site Manager, and add/edit a content item
If editing an existing content item that already has an image, click the crop marks to get to the Image Details screen. Otherwise, select an image to upload, and Publish.
From the Image Details screen, scroll down to the custom image size you've created, and you can now Re-Crop your image to select your desired image region.
Now, anytime you call getImageURL(size='catimg'), Mura will use this specific image to display.
Cheers!
I am currently building a fluid layout website, so that when the screen resolution changes, the site changes with it, no need for individual resolution css etc.
But the problem i am having is with the navigation bar, i want to have one image with the labels (Portfolio, Blog and About), when the mouse moves over each of those labels the whole nav bar changes to another navbar image, one with different coloration to indicate the mouse is on a specific label, each label needs to be a link too (obviously).
To try to clarify, i essentially need a div mouseover event on a specific location on an image, but as mouseover events don´t exist i would have to use :hover in css, but how do i get the image to change in css? Perhaps setting the original navigation bar image as the background image, but how do i overlay the next image and get it to activate on a specific hover location? image mapping?
regards,
Jimy
I have a page that accepts image uploads up to 4MB. The images can be as small as 100x100 or even as large as 1900 x 1200. I'm using a pop-up window to display the uploaded image.
The problem is that I want to scale the larger images programmatically (but not modify the image itself). I want to display the large images at 80% (or 60% or whatever) if possible. I've seen browsers display an image at XX % then when you click on an icon, then the image will be displayed at 100%.
That's the effect I'm trying to accomplish.
I would use the code located http://www.codeproject.com/KB/GDI-plus/imageresize.aspx
Then I would onclick of an icon pass the percentage value to that function and the render the result.