I am new to magento. I am using a theme 'rwd'. The product images get blurred when its listed on home page.
With Inspect element, I found that its natural image size is 85x85. But re-sized to 140x140. How do i set the image to 140x140 or any other procedure to be taken care for image resolutions?
Try this one :
Go to the file view.xml which you can find in code/Magento/Catalog/etc/.
Open the file and edit line 31 from :
<var name="product_small_image_sidebar_size">85</var>
to :
<var name="product_small_image_sidebar_size">140</var>
If you look inside the template file:
app\design\frontend\rwd\default\template\catalog\product\list.phtml
you will find around line 128 (Magento 1.9.1.x) the image size setting for the Grid View:
<?php $_imgSize = 85; ?>
just change the value to the one you need. After clearing Magento image cache you will find that the small images will be created at the resolution you set, thus not involving the poor browser resize.
In .phtml files there are many of these $_imgSize settings related to the different views, just do a text search for the string.
I think in your case is the uploaded image size is smaller and in default magento resizes product image to 140x140.So in this case the image tends to expand and hence it looks blurr.
One solution would be to upload an image with large size.
I think you should open the magento project with a good text editing software such as sublime text 2, and then do a research in the whole project (ctrl + alt + F), and look for the string '140'.
That way you may find the place where magendo defines the size to which magendo resizes your image.
Related
Goal: When creating an image gallery in Wordpress 5.3.2 using the Gutenberg editor, I'd like to be able to select the image size.
Why: The block gallery automatically serves the large image and then relies on CSS to resize the image to fit the flexbox layout. Instead I'd like to choose the medium size for my site, which is closer in size to what's displayed in the layout. This will improve load times, as users aren't being served oversized images.
Question: Is there some code I can add to functions.php that will give me the option to choose the image size I want or to override the default large size for the medium size?
I understand what you're going for and unfortunately WordPress and Gutenberg still loads the full-size, original image (and just resizes it in css) :(
There are several closely-related issues that describe this
https://core.trac.wordpress.org/ticket/45407
https://github.com/WordPress/gutenberg/issues/9620
https://github.com/WordPress/gutenberg/issues/6177
Update, 2021:
Gutenberg no longer loads the full-size, original image and you can choose which in the block's right side panel which of the registered image sizes to load;
but that image is often still larger than necessary and not fully optimized; more information at https://gist.github.com/skorasaurus/a01249d4302226bf12c80dd979322303
My logo (which actually only contains my name ) on my wordpress twenty sixteen child theme site is not completely sharp. I have tried everything like higher resolution uploading in jpg, png or svg. Nothing helped.
I didn't use site title instead of a logo because I don't want to use too many different font families since this might slow down my site. And also I think the font family 'skia' I'm using is not very common so that could make even loading worse.
Hope someone can help me on this. Or correct me if my findings are not correct.
Hazy
It could be that the CSS of your theme is resizing the image. Or maybe you have a plug-in that automatically compresses images on upload.
if this is still relevant, i have come across the solution.
i had the same issue
no matter what logo i made or even text only it had some blurry effect
the key to this is when you export your logo (in Photoshop for ex), set the height and width to the desired size, and set the same height and width in the Wordpress customizer as well.
in my case i have made my logo in PNG at the size of 500x200 and exported it to 200x80PX
in Wordpress im using OceanWp as a theme, this allows you to set the height and width of your logo inside the settings of the customizer.
so basically set it to 200x80 and your good to go
my logo contains only text and a square
my logo now looks sharp as the sky :)
Wordpress auto generates images with all possible demnisions..
For example: generate thumbnail, medium, large etc
How I can make wordpress produce images only on demant.
For example if I want only have the thumbnail size for one image, then the only images which are created will be only the original size and the thumbnail size. For other image, maybe I will want only the original kai medium size..
Is it possible to do something like that?
I don't talk about unset function..
Sorry for my English!
That's how WordPress works, it's native behaviour, it generates all possible thumbnails of the image so it can be loaded in any size when needed. In other words, thumbnails are generated when uploading image and not when showing in (on-demand concept).
For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?
edit: So i add my css files using
config.contentsCss = ['http://fonts.googleapis.com/css?family=Droid+Sans',
'http://fonts.googleapis.com/css?family=Bree+Serif',
'http://fonts.googleapis.com/css?family=Droid+Sans+Mono',
'http://192.168.0.50/css/new/all.css?v=1" media="all',
'http://192.168.0.50/css/new/templates.css?v=1',
'http://192.168.0.50/css/pre_review/colors.css?v=1',
'http://192.168.0.50/css/pre_review/paged_test.css?v=2',
'http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1',
'http://192.168.0.50/css/pre_review/main.css?v=1',
'text/css'];
I have also installed the Enhanced Image plugin to allow me to resize and move images around. however when i insert an image on to the page the source looks like
<p><img alt="" height="239" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" width="239" /></p>
when i originally set the image width and height in the popup panel i set the values to 2 and 2, these values do nothing to edit the actual size of the image. It still displays at the full size of 239x 239.
I know that it is my added styles that are causing this error as it works fine without them, However i do need them. is there anyway around this without having to remove the styles?
First of all, your contentsCss has some weird parts like the last item or this 'http://192.168.0.50/css/new/all.css?v=1" media="all'. Please verify that all this works. Incorrect rules may affect CKEditor.
Second, the issue may be very simple - your CSS most likely affect widgets styling. Disable loading your CSS files one by one and see which one breaks the Enhanced Image plugin. Then find the rule that breaks it and then improve the rule so it does not affect images.
I'm trying to add images to a banner that was included with the WordPress template I'm using, but it's cropping the images instead of scaling them properly.
I noticed that the height of the banner was too small, but I can't seem to be able to change it in the CSS code.
This is the page where I'm trying to sort out the banner - Money Matters Home, and this is the original image that I uploaded - home-banner-1.png
As you can see, it's being cropped from the original, despite the fact that I've tried to change the height of the banner. The original image dimensions are 900 x 278, and it should scale naturally to 1152 x 355, but isn't.
Does anyone know how to sort this out? I feel like I'm missing something really obvious here!
You could just re-size the image in Photoshop or Gimp to the exact dimensions of the WordPress header.
Use your browsers developer inspect tool to figure out the exact dimensions.
Change dimensions of your image first to 870x230 (as i see the dimensions of current banner) - you can do it in Photoshop or even Paint.
Then when you upload image in Wordpress via Uploader, Upload the Image file and Select "Original" option in Size of image before saving rather than small/medium/large etc
Your current image banner file is: http://bojomedia.co.uk/preview/moneymatters/wp-content/uploads/2013/08/home-banner-1-temp-870x230.png
note 870x230 at the end of that file name - This is wordpress generated cropped version of original file that's being used there.
I hope this helps.