In my Telescope App I integrated Embedly Thumbnail, the thumbnail is displaying but it is very blur. Do i need to change the width and height ratio or is there any option to make it look good.
The Aspect Ratio should be correct only then the generated image will be good.
In the admin setting panel change the width and height property to your choice but maintain aspect ratio. I used 800x720.
The images may look blurry especially if you are using the Grid layout, which uses larger thumbnail images. In settings, try setting the thumbnail width and height to 700 and 350.
Related
Wondering if any can help with this issue I'm having. I've inherited a site that uses wpbakery page builder. The original developer used a LOT of php to build the pages, but I am trying to make it easier for the client to use by rebuilding some pages with wpbakery. In order to get the site to flow well visually, I want to incorporate some background images that were included. However, the images are only 1440 px in width and I want them o stretch across the full screen for whatever size the window is. If I set the row to Stretch row and content (no padding) and have the image in a Single Image add-on, it still only displays as 1440 px wide at the largest. Tried it as a background image to the row, and that goes full width, but it doesn't shrink to the screen size fully. (leaves some image outside the boundaries when the screen gets smaller than 1440 px) Tried to give a Single Image a class and tell the class in the Custom CSS editor to be width: 100%, but that didn't work either. Anyone have any ideas as to how to implement this?
My Woocommerce brand page header banner (Thumbnail) is not displayed in the original size, it is somewhat zoomed in. When I asked about that my theme support he wrote:
"That section has cover background image, so as per the nature it auto resize the image size to adjust and cover full container and also it is parallax, so it is better to have some more height in your image like 1920px X 1000px."
My image size was 1920x600.
When I added more height it does not fix this problem, because it again is somewhat zoomed in and loses quality, and also some part of image.
So - How can I make my Woocommerce brand page header image to be displayed in the real size, without this zooming effect? Without adjusting and covering full container? I should mention that this zooming effect is also seen in my main page header slider.
My image size would be 1920x600 and I wish that it is displayed in the original image size.
Thank you!
To fix this problem I added a CSS code:
.parallax-fix.page-title-shop {
background-size: 100% !important;
}
Do we have any specific height for the initial display of the page in different devices.
I want to show a header image on load of a page, on scrolling down more content appears. For fitting the image in view area for different devices with media queries, I use width as 100% but for height I have problem in understanding?
If your width is set to 100% then your height should be set to auto. The image will be responsive and adjust to different screen resolutions without deforming.
Thankyou both!!
I used CSS3 background image properties, instead of fighting for height. Issue resolved. :)
On my website I have a slider of images across the top. This is the demo of the drupal theme (the company, not my website),
http://demo.drupalizing.com/?theme=bluemasters
All my pictures are different sizes or different kinds of shots. I don't know how to say it. I can re-size in any program. If I keep the aspect ratio, the 960px will be fine, but the bottom will be stretched.
How do I keep it all good and fit it in 960?
If not 960, what is a good number or other type of design?
Can I use CSS? Do I use an image program like Gimp, Paint.net, etc.?
As long as all your pictures are larger than 960px in width you can use HTML or CSS markup to resize the image to 960px. However, please remember that there is no way to display the an entire image say 4000x2000 in a 960px box without making it look small or choppy. In this case I would use an image editing program and cut out the main focus of the image and save it as a 960x300 (or whatever height) image.
From your link, the slider images are all 930px x 320px. You can use CSS to overcome this limitation, but your images might stretch out of proportion.
I would start with a an art work that is 930px x 320px, and just crop your photos according to this aspect ratio.
In this BlueMaster theme, the CSS already has a width set to 100% so no need to worry about scaling.
Online photo editor tool: http://pixlr.com/editor/
File -> New Image
Width -> 930
Height -> 320
I have an image of that has a height of 480px. On my Macbook it looks OK but when I go to my 30 inch monitor obviously there is a huge space in the bottom.
What can I do to make sure that the 480px will always be in relation so the size of the user's screen?
I did some searches and it seems that using background-image: cover or background position I can do some stuff but highly likely it's not what I am looking for. What can I do tackle this issue?
One way to achieve this is to place the image in a container that can scale with the page.
Height is a hard attribute to scale, but you can achieve it as long as all of the parent elements have a specified height as well.
You can use CSS code such as
height:40%;
to scale elements.
Scale the page's height here to see for yourself: http://jsfiddle.net/L7uWd/
Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
Set the image height to some percentage instead of pixel, that will automatically handle with the size of the screen.