I'm working on a documentation site and noticed that the images have a very slight delay. I realized it's because the alt text shows up before the image renders.
Is there a way to hide the alt text before the image appears?alt-text-shows-up
I want the image load to look a little cleaner to the users. If there's something that I could do on my end it would be appreciated. In the docusaurus blog I noticed the same thing happens with the image, I see the alt text before the image appears https://docusaurus.io/blog
At first I thought it was just on my end, but my peer noticed it on his machine as well.
I had the images in a folder with the .md document, then moved them to the static folder as it was suggested on the docusaurus website. The delay still persists even when moved to the correct folders.
Related
Whenever i download an higher resolution image chrome compresses it to around 100kb .What can i do to solve this? Is there a certain setting in chrome?
Try clicking on the image, then long press and choose open image in new tab. This should give you a good idea of how big the image is. Then long press and save the image. Note: the mobile version of Google Images does have search tools too (its at the extreme right in the bar with tabs for web, images, videos etc.)
I'm looking at this documentation on "Image and file upload options".
First thing off the bat it says in describing the automatic_uploads option is:
Enable or disable automatic upload of images represented by data URLs
or blob URIs. Such images get generated, for example, as a result of
image manipulation through Image Tools plugin, or after image is
drag-n-dropped onto the editor from the desktop.
This is exactly what I want - when an image is dragged and dropped onto the editor I want it to upload the image to my server. I read through the rest of the options and came up with this:
tinymce.init({
automatic_uploads: true,
images_reuse_filename: true,
images_upload_credentials: true,
images_upload_handler:async function (blob,success,failure) {
console.log(blob)
},
// remainder of options here
For the moment I'm just trying to print a debug statement when the upload handler is called, so that I know I have gotten that far. But when I drag an image onto the editor, I get a pop-up which says:
Leave site?
Changes you made may not be saved.
[Cancel] [Leave]
If I say "Leave" it abandons the site and brings the image up in the browser, which is not what I want. If I say "Cancel" then it stays on the page, but my upload function is never called, and subsequent attempts to drag onto the page do nothing.
Why isn't this working? Is there some plug-in that I need to install which isn't mention on the documentation page?
How a browser treats dragged/dropped images can differ across browsers. From where are you dragging the image? What browser and OS are you using?
In TinyMCE 5 the Insert/Edit Image dialog would have an Upload option (3rd link on the left) if you have image uploads setup correctly.
Do you see such an option? Can you drag/drop to that dialog via the Upload tab?
For a deck of lecture slides, I have extracted several vector illustrations from a PDF-file. I did this by highlighting the relevant area in Preview.app, copying, and opening a new file from the clipboard.
The figures look just fine, even though I noticed that the files are a little large. When I open them in Illustrator, I can see what's described in the screenshot – that all of the page content is still there, it's just hidden because it lies outside the crop area.
Now I could simply remove everything except the relevant figures in Illustrator, but I would much rather automate the process, since I have a large number of figures.
How can I automate this process such that everything outside the crop area is discarded and everything inside it is preserved as a vector image?
You can use redact utility to remove the content.
Just go to https://doxiview.cib.de/showcase/index.html?locale=default
Choose redact tool
upload your PDF
Choose on the right Select Area and redact fill color as white
Mark all content, which you want to remove
click on apply
download PDF
Afterwards you can crop the PDF and you won't have the content being still there.
There's no need to rasterize. Just crop the pages then use Acrobat DC to "Sanitize" the document. That will completely remove any non-visible parts of the file.
In Acrobat Pro, go to Preflight and select the setting below.
Then click edit to the right
You should be able to create Adobe droplets with this preflight setting for automation
I just downloaded lytebox. Everything seems to be working, except one feature. The close/next/previous buttons are not displaying. They still work, just I can't see them. I have moved the images folder to the same directory as my lytebox.css and lytebox.js, moved them to another directory, moved the images into the same dir as .css/.js, but nothing seems to get them displayed properly. I haven't edited any code. Are there any common reasons why they won't display properly? I have looked in the lytebox faq, but the suggestion there did not help. I can display the code if needed, it's just superlong so I don't want to take up too much space.
The path of all images should be located in lytebox.css. Search the code for the image names and you will see them. Then relocate the images or edit the css-file.
I had the same problem and sorted it by doing this
url('../images/close_black.png')
I'm still new to coding. I downloaded flex slider, and I have it running fine on my site and working fine. However I can't make ANY edits into my html regarding the slider. It has the 'next' and 'previous' image links on my gallery, which I would like to replace. It shows up in the html when I inspect it in firebug, yet when I run my html through my text editor (Im using text mate), it doesn't show up at all!
Any ideas why?
I think you are talking about the navigational arrows on the left and right side of the images. This can be changes in the "flexslider.css" file. If you are using textmate then the line number is 52.
Probably the easiest way is to find the image here images/bg_direction_nav.png. Right click the image and open with your image editing software eg. photoshop. Then once you have change the image just save it and it will be saved in the same folder location. If you keep the image the same size then you will not have to mess around with anything else..