I am having a bit of trouble with an unfamiliar wordpress theme. My featured images are all 870 x 550 and yet when i put them in they are resized to 870 x 490, with an ugly crop. I have found a couple of CSS entries with a value of 490px so I changed them to 550px (see code snippet).
div.featured-media-container {width:870px; height:550px;}
div.featured-media-container img {width:870px; height:550px;}
This has made the container the right size, and resized my image to fill it, but the crop still remains so the image is stretched. How do I stop them being cropped when I drop them in?
Thanks.
Oh, here's the page in question: http://www.decentdesign.co.uk/portfolio/east-wing-coffee/
You Just DO one thing from your wp admin panel
go to settings > Media
and change the size according to your nedd. For reference take a look of below attached image
that's it Very Simple
Related
"A stackblitz is worth a thousand words": https://stackblitz.com/edit/angular-zoom-crop-marker
Basically what I'm trying to do is to have a square drawn above a certain position in an image (<img>), and have that dynamically adjust to the image while being zoomed in / out and cropped. The stackblitz link has 3 views, the basic view which is a plain image, a zoomable view (which I got working as well) and a view where the imaged is "zoomed in and cropped" while being zoomable - This is where I need your help.
Should I crop using object-fit in some way? Is it better if I use a canvas to handle this? I've been at this for a whole day I and I feel my css knowledge is too limited to pull this of.
Bonus question: How would I go about to have the zoom-in zoom-out buttons add/remove one image per row using only css flex-box? (ie: not statically adding x pixles in height and width, but rather increase or decrease the size of each image so that another image is removed or added (per row) while always filling up all the available space)
Thank you in advance!
Managed to solve it myself. stackblitz updated with a working solution.
I have Joomla 3.7.
I have replaced the file personal2.png in /templates/beez3/images/personal/personal2.png
to another image with the same resolution ( 1060X288 ).
The Image Logo changed but the image isn't fit, I mean the Image is with another size (more bigger).
I wanna inherit the default CSS and I want the image to fit to the logo header size and to be resized when the screen browser is smaller ( because when I smaller the windows the image is not showing very well and I lost some of it.
( I mean I want it responsive to the size of the window ).
I appreciate any help.
Thanks
I am using Weebly to create an online store, using a template and ran into something I dislike. Every time an user clicks on a product the product page comes up and if you hover over the product's image, a zoom function is initialized. How do I disable this effect?
I have a feeling that it is something simple like display:none; but I can't seem to figure out which class or whatever is associated with it.
The simple way is to hide the element that is placed over the image on hover via CSS:
.cloud-zoom-big,
#cloud-zoom-big {
display: none !important;
}
or
.mousetrap {
display: none !important;
}
The better way would be to disable the JavaScript, that is calculating the effect. It's located in your http://cdn2.editmysite.com/js/site/commerce-core.js at the beginning of the file. But this file is minimized, so its hard to remove the relevant code.
It's not necessary to make any custom code changes.
The zoom is going to be based on the size of the image that you upload. So, say for example your image is 300 pixels by 300 pixels there will be no zoom. Zoom starts at about 640 pixels. So, just make sure your image is smaller than 640 pixels.
Note:
If your image is 3000 pixels by 3000 pixels the zoom is going to be great! And an image that is somewhere in the middle of that is going to have about half the amount of zoom.
I met a problem when trying to change the media setting. The first pic wass about Media Setting and how big a large/medium/thumbnail image is. I tried to make large for 960px.
The second picture was what I saw when trying to resize image in editing page. But I couldn't see the 960px option.
I'd tried some sizes smaller than 640px in Media Setting. It worked. And if for some larger than 640px, like 641px and 960px, it showed only 640px. It seemed not to be able to reach 960px that large.
So, why can't I use 960px?
I used a blank theme to make styles from the ground. And so far, I've not changed any function for image setting at all.
Most themes (esp. themes from wordpress) have a specific width limit (measured in pixels) for images inserted in a post or a page. Obviously, that limit depends on the theme’s main column width (which varies greatly from theme to theme).
/wp-includes/media.php has:
// we're inserting a full size image into the editor. if it's a really big image we'll scale it down to fit reasonably
// within the editor itself, and within the theme's content width if it's known. the user can resize it in the editor
// if they wish.
if ( !empty($GLOBALS['content_width']) ) {
$max_width = $GLOBALS['content_width'];
}
else
<strong>$max_width = 500;</strong>
Try overriding with $GLOBALS['content_width'] = 960; in the theme's function.php
As #Debajyoti Das explains, there is a set content width for most themes.
Either find the width in your theme and amend (search the files for 640) or if you have a child theme then add the following code in your functions.php which will usually override the themes width settings.
For instance this works with the Understrap framework:
// set theme width
global $content_width;
$content_width = 1024;
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!