How to set image size when using liferay-ui:logo-selector as
<liferay-ui:logo-selector
defaultLogoURL='<%=themeDisplay.getPathImage() + "/organization_logo?img_id=0"%>'
editLogoURL="<%=editOrganizationLogoURL%>" imageId="<%=logoId%>"
logoDisplaySelector=".organization-logo" showBackground="<%=false%>" />
I just can't get it done.I can change image size while displaying logo using img html tag.
As #rasabihariKumar mentioned in the comment, it is not possible to set the image size i.e. the height or width of the logo through <liferay-ui:logo-selector>.
One thing you can do is upload the logo with the correct dimensions
or else extend the <liferay-ui:logo-selector> tag through a hook or ext so that you can send the image width and height to the tag.
Or you can change the image size through javascript after the whole page is loaded through javascript. This answer may help you.
Related
I'm developing an app that grabs the HTML from a webpage and looks at images, within the HTML, that can be compressed and resized.
I can do the first part no problem in node, using Sharp here:
https://www.npmjs.com/package/sharp
I can, of course, resize the same image here too. I just don't know what dimensions to use. I don't want a tiny image to scale up and so on.
Can I somehow detect the size of the image on screen using the HTML I got to begin with?
Thanks in advance.
EDIT:
Sorry for any confusion. I need to know how big the image is being displayed on the page. So, the image may be 400x400 but the css could limit it to 200x200.
If I have a large image (1000x1000) but it's only being shown on screen at 500x500, I'd know it's a great candidate for resizing.
I'm just not sure how I can resize based on it's css dimensions.
I think in Sharp there's a metadata function that lets you access image metadata, e.g. format, width, height, etc.
Example:
const image = sharp(inputJpg);
image.metadata().then(function(metadata) {
// print image width and height
console.log({
width: metadata.width,
height: metadata.height
});
});
In Sharp library,
You can get dimension from this document:
http://sharp.dimens.io/en/stable/search.html?q=dimension
Hope it will help you.
const sharpImage = sharp('test/test.jpg');
image.metadata().then(function(metadata) {
console.log(metadata);
});
I have been trying to implement a feed App like Instagram or Facebook. ImageViews have match_parent width (screen width) and wrap_content height.
The code I have used...
Glide.with(context)
.load(imageURL)
.thumbnail(0.1f)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(imageView)
;
That results into loading thumbnail first. The thumbnail is very small in size. I was expected that the thumbnail will display a faded image with the original image height.
Without thumbnail, the ImageViews do not populate any image (when loading) and then suddenly the original images comes into picture. I cannot use any place holder image as the height of the place holder image may not match the actual image to be loaded, makes it a bad user experience.
I have also tried...
Glide.with(context)
.load(imageURL)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.placeholder(null)
.into(imageView)
;
But it is not working! I was wondering how the Instagram App does those fade in loading with images (with original image height)?
I have looked into various websites including the Glide Github issues and stack overflow, but unable to find any solution! I have already wasted about 6 hours of my day. What is the way out of this problem?
Use override attribute:
Glide.with(context)
.load(imageURL)
.override(18,18)
.thumbnail(0.1f)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(imageView);
Also as Instagram is owned by Facebook it might be the case that they use Fresco library (not sure though).
We have Layout Container with size Width = 200px and Height = 800px, We have images of unequal Height and width,But all images size is such that all images fit in Layout Container. How to achieve this.
Thanks.
First of all you should use dp instead of px in android and suppose you have taken the imageview of 200dp * 200dp in xml file you can set the scaleType property to fitXY or any scale type suitable to you and i suggest you to also use adjustViewBounds=true so that any image will set to it properly you can know more about scaleType here.
I also suggest you to read this blog to understand concept behind it.
And also see these answers
https://stackoverflow.com/a/6670069/5476209
https://stackoverflow.com/a/10124018/5476209
I want to render a large SVG image to a PDF document (PageSize = A4).I am using Itext Library and Java. Here is a post that describes how to render a image larger than page size to PDF () How to show an image with large dimensions across multiple pages in ITextPdf?. But when I use this way of rendering I have 2 problems.
1)The Image ignores the page boundaries.
2)Some time the SVG splits in a way which cuts the text written in the SVG.
Both the problems can be solved If I can control the height of SVG to be rendered on each page, but I cannot find any way to control both Height, and starting point of a Image while rendering it to PDF.
I am facing an issue with XSLFO - FOP image rendering, I have several images of different size.
some of the small images are aligned inline with the text and some are big images that occupies a defined space, While displaying big images it would go beyond the viewport and i found a working solution at the Yahoo groups to restrict it within the viewport, however the given soultion renders both small and big images as block. but i need to render inline image as inline itself and not as block.
I am using following code to render image
<fo:external-graphic src="file:{./#src}" width="90%" content-width="scale-to-fit" scaling="uniform" content-height="100%" vertical-align="middle"/>
Image tag doesn't contain any information about inline or block.
Sample:
<img src="images/real_world_example.jpg" />
Text in the above image should align next to the image
Thanks in advance.
I can't test it but I think that the problem is with your width="90%". Simply delete it, it should work as you expect.