I'm not using any WP cache plug ins. I've noticed that only one png out of the other pngs (and other images) I have on my WP site has a query string attached to it when I look at in Chrome dev tools. It's actually downloaded twice - with and without query string.
The other odd this is that Chrome Dev tools says that the intiator for the png with query string is jQuery. I just include jQuery from Google's CDN, so I'm not changing anything.
Any ideas to why just one of my pngs (why this one?) has a query string attached? Here's what it looks like:
<img src="http://www.mysite.com/wp-content/themes/myTheme/images/slide1Btn.png?1369071380764" alt="">
Please let me know if I haven't included enough information.
Edit
This png is a button on one of the slides I have in a slideshow. I use http://archive.slidesjs.com/ to generate the slideshow. The png images are part of the HTML markup and not generated by the script, however I did find this line in the slides.js code:
// gets image src, with cache buster
var img = control.find('img:eq(' + start + ')').attr('src') + '?' + (new Date()).getTime();
I would like to just have the png load once and just be retrieved from the cache on reloads - like each of the pngs will do on subsequent slides in my slideshow. I'm perplexed as to why it only happens to this png.
It might either be :
some argument for a script that dynamically generates or resizes or processes the image (it does not matter that the url has a .png extension, that doesn't necessarily mean that a png file is served statically)
a "cache breaker" - or "cache buster". This can be used to prevent the browser (sometimes also the server) to get the image from a cache, and force it to get it fresh from the server.
Because in this case this looks as a timestamp (unix epoch in milliseconds), I'd bet for the later.
wordpress generates many of the images dynamically, meaning when you access the png you are calling a server page that generates the png dynamically choosing between different images or based on the query string parameters, like size for exmaple.
200px width image.
http://mysite.com/wp-content/uploads/2013/05/Giant_water_bugs_on_plate.png&w=200&h=446&zc=1&q=100
vs
600px width image
http://mysite.com/wp-content/uploads/2013/05/Giant_water_bugs_on_plate.png&w=800&h=446&zc=1&q=100
Related
TinyMCE 4: I have implemented the image file/upload from local source, using php to save the uploaded file into a directory, with tinyMCE referencing this image. Works fine. This leaves a simple html text file to save in the database.
However, I see that the user can just cut and paste an image directly into the textbox, resulting in the image showing up and becoming a base64 image string, which defeats the purpose of storing only html text. Now the text could become extremely long if this base64 image is not prevented.
Is there a way to prevent this image paste action in tinyMCE? Or better yet, a way to automatically convert this paste into an image file and have it stored in the same place as the other images on the fly?
I know I could convert base64 images to a jpg files and store after submitting the form to a php handler, but would seek a simpler answer if possible.
The documentation is your friend for this issue. TinyMCE can certainly help you convert the images on the fly as they are pasted into the editor:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
You can also stop the images from appearing in the first place if that is your preference:
https://www.tinymce.com/docs/plugins/paste/#paste_data_images
I am using 'SwiftSoup' SDK to parse HTML content from UIWebView. I want the image size and resolution for each and every image fetched from HTML content. How to get the image size and resolution as soon as an image is loaded and from HTML content received from SwiftSoup?
Assuming you know when all images from the HTML are loaded, here's a javascript code that can be used to grab a list of sizes for all images:
let script = "JSON.stringify([].slice.call(document.getElementsByTagName('img')).map(function(img) { return {url: img.src, width: img.clientWidth, height: img.clientHeight} }))"
Executing this javascript via stringByEvaluatingJavaScript(from:) should give you a JSON that you can parse to obtain the desired info.
For example the output for this page is
[{"url":"https://i.stack.imgur.com/rQQMq.png?s=48&g=1","width":24,"height":24},{"url":"https://www.gravatar.com/avatar/46be6ae9d14855f5ab1aaf1d510ab8bc?s=32&d=identicon&r=PG&f=1","width":32,"height":32},{"url":"https://clc.stackoverflow.com/impression.gif?an=49ocs77evOWqh-6LVv8gJiaWI_07xL9f6GBcyDt7dl3NWtNsxo9-twOOBzKwMPRsYGBosGdkZGCRZuqawDHjMeecj4L_WRhSDiyObbJ82JRhP5vp7j6Og2e4ru0W9mRhmNs0gbnc8pVcsT0jc2Z-sTTTwxaOliucyy4LsrAwFLRcfRVt-e6KDEjTco4LjVyda4XkgZqaJcJzLa9Oj4RoMrJk4eJgYpBgYGDg4o1ij5VnYhAHsvk4o9gSmZgYRIBsfmYbtrvCTAxiIHH2ALapwv3t9i1z_NRrAA&md=291","width":0,"height":0}]
I'd recommend though to switch to WKWebView since it's recommended also by Apple, and because stringByEvaluatingJavaScript(from:) is blocking (WKWebView provides an async version of this function, and one that also will do the parsing for you, so you can remove the JSON.stringify() call from the script).
Please check updates as they have additional informations... Apparently located the problem in a specific pdf client but cannot close the issue with an open bounty...
I am generating a pdf using grails rendering plugin. The PDF has a couple of images inside and "some" of them are not being outputted!
I am rendering the images inline via data uris as required by the plugin. That means that all my images are something like:
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQECWAJYAAD...">
If I render them in a normal html view, I can see the images just fine!
If I render the template to a JPG/PNG with the same plugin, again the images render all fine.
If I render to PDF the images which are being retrieved by an octed-stream are broken!
Something like:
Looks like the image started to render and then something happened...
It is happening on the big-sized images, but also on the thumbnail version of same image.
Any one has some hints as why this might occur?
UPDATE
The file which does not show up is a file with mime application/octet-stream
So apparently I can retrieve the bytes from the file, but when they transmitted for PDF Rendering, the image does not appear...
Yet another update
The issue seems to be related with the PDF Viewer. Was using a Linux based PDF Viewer (PDF Viewer 0.1.8) and specific images are broken. In all other PDF Viewers I could test everything works fine.
Cannot close the issue as there is a bounty open :( Sorry that the bounty and question seems meaningless now, but you never know, someone might have an idea how to solve this even for PDF Viewer 0.1.8.
<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQECWAJYAAD...">
works fine for me. Note the missing "e".
You can use rendering tag:
<rendering:inlineJpeg bytes="${your-image}" />
Make sure you decodeBase64() your image.
Is there have any way to do this ? I am trying load some local file in the UIwebview, if the content include Image, loadHTMLString is taking much longer to finish page loading just because have to waiting the download of image file.
As I think if the image can be load in progressive mode, the UIwebview can display the html text on the very beginning to prevent the user keep too long time to waiting for the whole page loading.
P.S. The Image is from the internet,but the html string is on the local file
All you need to do is to have the images to be loaded in the Progressive JPEG format. To convert them using ImageMagick you can type:
convert somefile.xxx -interlace JPEG somefile_progressive.jpg
for example.
Another possible solution could be to load the images using JavaScript, once the page has been loaded fully.
Ie just leave the src blank in the html and set it via JavaScript later.
I would really use Javascript. You'd show a blank page or one with just a part of your content and after your document is ready (maybe use jQuery?) you load the other content.
document.getElementById('content1').innerHTML = "<img src="./images/something.png" alt="" />"
I'm building out an admin area for an ecommerce site where the user can create a new product and upload multiple images to be used for the product. I have a table that lists all of the products, each row shows the first image returned from the database. I can scale down a large image to 100px x 100px but the user is still downloading a big image, not a true thumbnail.
I see two ways of doing this:
1. I can make the user choose which img will be the thumbnail so that the regular img is upload and also a smaller version of the file.
2.I can create thumbnails for every img that is uploaded and append to the filename of the thumbnail img so that I can return the first image that ends with a certain string.
Is there a more elegant way to do this or am I on the right track?
Create a cache directory, then create a script called something like image.php. Link your images like this
<img src="image.php?path=images/img.png&width=100&height=100">
Then in image.php, it should first check in the cache directory if the file exists.
Call the file "img.png&width=100&height=100" and save it in the cache directory. That way you can easily check if it exists, but there is enough entropy for someone to change it to width=101 and height = 101 so that the image will be regenerated.
Each time you create the thumbnail, just store it in the cache directory. If it exists, do a header() call and an echo file_get_contents() and then die().