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.
Related
I have a page run by Hubspot Blog and an image implementation with srcset, looking like this:
<img loading="lazy" src="
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=480&name=Element%2023#300x.png"
alt="Element 23#300x" width="480" style="width: 480px;" srcset="
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=240&name=Element%2023#300x.png 240w,
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=480&name=Element%2023#300x.png 480w,
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=720&name=Element%2023#300x.png 720w,
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=960&name=Element%2023#300x.png 960w,
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=1200&name=Element%2023#300x.png 1200w,
https://emobility-magazin.com/hs-fs/hubfs/Element%2023#300x.png?width=1440&name=Element%2023#300x.png 1440w"
sizes="(max-width: 480px) 100vw, 480px">
The issue: Google PageSpeed Insights test delivers as an opportunity properly size images, with a diagnozed problem with the image I mentioned above. It looks like the srcset doesn't work for PageSpeed Insights test and the image isn't resized properly.
Getting the test data directly through Page Speed Insights API the issue is diagnozed too, on the same way.
But, running the Chrome-own Lighthouse test outta Developer Tools (incognito mode), the issue isn't there - the image seems to be properly resized by srcset.
My question: is there something, what prevents correct resizing while testing by PageSpeed Insights test? Are there any issues in my srcset implementation? Or is this a kind of bug of PageSpeed Insights?
So there's a couple of things going on here:
All your images are the same 6510x10194 images. So the audit is correct to highlight the image as improperly sized. Is the width param supposed to result in different size images being returned?
I'm not sure why it's not failing the audit on desktop. I can repeat what you see but to me it should be failing there too. So PSI looks more correct here.
Your sizes attribute looks incomplete to me. Maybe that's what's throwing off the browser for point 2?
When I run it through https://ausi.github.io/respimagelint/ it gives the following output:
W descriptor doesn’t match the image size
Descriptor 240w doesn’t match the image size of 6510x10194 from …/Element%2023#300x.png?width=240….
Descriptor 480w doesn’t match the image size of 6510x10194 from …/Element%2023#300x.png?width=480….
Descriptor 720w doesn’t match the image size of 6510x10194 from …/Element%2023#300x.png?width=720….
Descriptor 960w doesn’t match the image size of 6510x10194 from …/Element%2023#300x.png?width=960….
Descriptor 1200w doesn’t match the image size of 6510x10194 from …/Element%2023#300x.png?width=1200….
Descriptor 1440w doesn’t match the image size of 6510x10194 from …/Element%2023#300x.png?width=1440….
A fitting image source should be available for all screen sizes
At a viewport of 1280×720 the image was displayed 480 pixels wide, but the closest provided image has a width of 6510 which is 93% (66 megapixels) off. The affected viewports are 300×169–3000×4000.
Try using the following image sizes in <img srcset="…"> instead:
260×407, 480×752, 760×1190, 960×1503
Loading a large image and display it much smaller should be avoided to save bandwidth. Loading a small image and display it much larger should be avoided to prevent pixelated artifacts.
The sizes attribute has to match the width of the image
The size of the image doesn’t match the sizes attribute (max-width: 480px) 100vw, 480px. At a viewport of 1000x563 the image was 424 pixels wide instead of the specified 480 (-12% difference). The affected viewports are 300x169-480x640, 780x439-940x1253, 1000x563-1020x1360.
Try using sizes="(min-width: 1220px) 480px, (min-width: 1000px) calc(28vw + 144px), (min-width: 780px) calc(50vw - 36px), (min-width: 560px) 480px, calc(91.67vw - 15px)" instead.
The sizes attribute is a hint for browsers which should tell them how large the image will be displayed. If it doesn’t match the real size, browsers cannot select the correct image source.
I'm trying to post a picture to a file on my Gitlab using markdown
seems to work but is far too large.
Other solutions I've tried and don't seem to work are as follows:
<img src="https://gitlab.com/example/screenshot" width="48">
<img src="https://gitlab.com/example/screenshot" alt="Drawing" style="width: 200px;"/>
Any ideas on what I can do rather than re-sizing every image I have?
Raw HTML works
Try the following: after uploading your image, use img tag with src pointing to the path of uploaded image, for me it's working:
The following is from one of my files
<img src="/uploads/d19fcc3d3b4d313c8cd7960a343463b6/table.png" width="120" height="120">
Check this link, where I've put different size of same image https://gitlab.com/Basel.issmail/resize-image/wikis/resizing-image
There is an issue on gitlab discuss Add control over images with Markdown
GitLab 15.7 (December 2022) adds an official support for this:
Change the dimensions of images in Markdown
Before this release, there were no controls for changing the size
of images rendered within Markdown text areas.
This often led to unwieldy images with no control over how much space they took up in descriptions and comments.
You can now set the width and height of how images are rendered directly
in Markdown by appending the {width=x height=y} attributes to the image reference. Sizes can be specified with pixels or percentages.
See Documentation and Issue.
Following code give good result: (the URL set in tag is the one generated by Gitlab when attaching a image)
![]() <img src="/uploads/d19fcc3d3b4d313c8cd7960a343463b6/table.png" width="120">
It shows a clickable thumbail with a fixed width (and keep image ratio).
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.
Is there some plugin/way to crop images when they are uploaded in a Modx TV?
I got a slider with a ratio of 1:4. Now when the user uploads a image in another ratio, the image will stretch out.
I want something like Facebook does when you upload a cover image which is to high.
(PS: I want to use it later in Migx)
Like 'okyanet' mentioned you can use phpThumbOf to set the dimensions/ratio when MODx delivers the image.
Another way would be to use the extra 'Image+'. You still need phpThumbOf for this, but the Editor can define the clipping manually in the Manager. And you can define the ratio of the clipping in the TV-Setting for the image.
Use phpThumbOf. The 'zoom-crop' parameter will allow you to preserve the source aspect ratio and then crop it to the dimensions you require.
The image is processed when the page is parsed by MODX, rather than at the time of upload.
There are plenty of articles about how to use this extra, including this one:
http://www.belafontecode.com/image-manipulation-with-phpthumbof-in-modx-revolution/
So I load some simple HTML into a webview.
The html is in the format: (it is extracted html, therefore no body tags.
<p>..blah</p>
<div style="text-align:center;">
<a href="http://services.runescape.com/m=rswikiimages/en/2012/5/combat1-18140712.jpg" target="_blank">
<img src="http://services.runescape.com/m=rswikiimages/en/2012/5/combat1_thumb-18140804.jpg"></a></div>
<p>..blah</p>
In the webview activity class I add:
webInfo = "<body style=\"color:white;font-size:15px\">" + webInfo + "</body>";
//for setting the size and color of the text
I use the following to load the html:
webview.loadDataWithBaseURL(null,webInfo,"text/html","UTF-8",null);
// webInfo is an html string
and I do the following so that it doesn't scroll horizontally and so that the image fits within the screen.
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);|
If I don't use SINGLE_COLUMN, I'm always scrolling horizontally, even though the text fits nicely within the page. I thought it had finally solved the problem but I get overlapping html when i load it. This fixes itself if I zoom slightly in or out with my fingers.
Here's a picture of whats happening:
Question 1:
How do I fix that problem and display the image so it fits in the screen and no horizontal scrolling is required?
Question 2:
I've also been having trouble getting rid of the weird symbols too, my 's show up really weird.Tried using several different encodings like UTF-8, US-ACSII and lots of Windows ones, none of them seem to work to get rid of the symbols.
I hope I've been clear, any help is appreciated, I've been fiddling with this for a while O_O...
Add in webview settings:
webSettings.setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING) //handle for font overlapping.