How to get full image paths from web page using Firebug? - image

I would like to download all images in full quality from this blog: http://w899c8kcu.homepage.t-online.de/Blog.
I have access to server, but I can not find the directory where the images lie. When I use Firebug on the first picture, it shows me http://w899c8kcu.homepage.t-online.de/Blog;session=f0577255d9df9185d3abe04af0ce922d&focus=CMTOI_de_dtag_hosting_hpcreator_widget_PictureGallery_15716702&path=image.action&frame=CMTOI_de_dtag_hosting_hpcreator_widget_PictureGallery_15716702?id=34877331&width=1000&height=2000&crop=false.
How can I find the file paths like /dirname/image.jpg?

According to its HTML output the page obviously uses the CM4all content management system (CMS).
I don't know how precisely this CMS is working, though generally CMSs normally either save the files under cryptic names within a folder specified in the CMS's configuration or not in the file system at all but within a database.
Also, CMS may only save compressed or resized versions of the original files.
So, if you don't want to or are not able to dig into the server-side script code to find out if and where the images are saved, you should contact the company behind CM4all about this.

Related

Changing Where CKEditor Looks for Images

I am wondering if there is some way to change where CKEditor looks for images. Right now it uses the location of the web page containing the editor as the root directory but I would like to write a javascript function that can change this directory to any arbitrary path passed to the function.
The bigger picture for this is that I'd like to extend the functionality of CKEditor to be able to save the source it creates to whatever location is picked by the user. I've already implemented getting the source and saving it using wxWidgets but am having trouble getting CKEditor to change its working directory so that images can be included from the directory the user picks.
I've tried using some of the properties like baseDir, basePath, and baseHref to make this possible but as far as I can tell none of them quite do what I'm looking for.
So the process would be:
(1) The user picks a directory where the source will be saved
(2) The user creates a page using CKEditor where images from the directory chosen can be included AND DISPLAYED in CKEditor
(3) The user saves the source of their page to the chosen directory (the source saved here should use the relative path to the images because the source is now located in the same directory as the images it includes)
I realize this is a rather unconventional use of CKEditor but if someone might be able to kick me in the right direction to making this happen, I'd really appreciate it.
EDIT:
So after a little experimenting and changing some backslashes to regular slashes, it looks like the baseHref attribute does what I'd like. I've still not been able to change its value at runtime though as I would like. Does anybody know if this is possible with CKEditor? I'd still like to have a javascript function that I can pass a path to and have it change this baseHref value. Right now I have set its value in config.js.
If this isn't possible, I know you can read and write the source in and out of the editor. So I would like to resort to reading and storing the source from the editor, reloading CKEditor with a new config.baseHref, and then writing the source back into the editor. Does anyone know if the CKEditor api provides functionality to reload its configuration?
Thanks.
I don't expect too many people will be trying to do what I was doing here since CKEditor is usually hosted on a server somewhere, but in case someone finds it helpful, here's what I ended up doing.
As I mentioned in the edit to my question, modifying the baseHref gave me the functionality of prepending the image filename with the directory path leading to it. I wasn't able to find a way to modify it while the editor was running so I ended up telling CKEditor to load an external configuration file each time it started with the line
config.customConfig = 'C:/Users/kenwood/Desktop/MarkCreator2/ckeditor/custom_config.js';
Then I used C++ to write new contents to custom_config.js any time I wanted to switch directories.
Unfortunately this method meant I had to read the contents out of the editor, refresh the page, and then write the editor contents back in any time I wanted to change directories. This was adequate for what I needed though.

How to use the existing Png-Shell-Thumbnail for my file types?

I am currently writing an application working with specially prepared image data. Another tool prepares the images (basically PNGs with additional data stored in the meta-data section). Now my tool works with these files, but not with all PNGs, so "we" decided to use a different file extension. So far, so good.
Now, because I am a lazy sack I implemented some file type registration to allow double-clicking on the file and opening it in my application (no problem at all).
And here is my Question:
It would be cool if the windows explorer could still show me the thumbnail previews for my files. Since they basically are still PNG files, it should be possible without writing my own shell extension (at least I believe so).
I quickly tried to copy all registry keys and values from HKCR.png to HKCR.mInDat (my file name ext) and it worked. However, I would prefere knowning what I am doing ;-)
Which of the registry settings are responsible for the thumbnail preview control and which can I use to get the preview for my file types?
I tried to google it, but I failed, since it seems I am unable to come up with the right buzz-words to find the info I need. Please, help me.
Thank you!
Yours,
3of4
Simple:
[HKEY_CLASSES_ROOT\.apng]
#="apng"
"Content Type"="image/png"
"PerceivedType"="image"
[HKEY_CLASSES_ROOT\apng\shellex\{BB2E617C-0920-11d1-9A0B-00C04FC2D6C1}]
#="{3F30C968-480A-4C6C-862D-EFC0897BB84B}"

Swapping an image during web development

I'm trying to see what a certain webpage would look like if I replaced a certain image with another. Rather than upload the image, edit the site, etc, each time I tweak it, I'd like to know if there's a way to change the image in the page to my local version while viewing the remote page.
I use Firebug for debugging web development usually, but I'm open to any other tool that might do this.
(It is absolutely impossible to search for this and find anything but questions about dynamic image swapping on a deployed website, so sorry if this is a duplicate.)
Added: I just tried substituting a file:/// URI pointing to the image (copied and pasted from the address bar after manually opening the image), and alas, it did not work — the image fails to change.
It seems to only work with the http[s] protocols (likely for security reasons). You can store your images on service like Dropbox, share the image or folder, then use the public URLs.
Really, you can use any web accessible images, so a local server would work too.
If your image is in a localhost server(not as file mind you) i think you can still put that localhost url in the firebug inspect element and it'll work.
Tried an absolute file path but it doesn't work apparently. So I guess you just have to make do with a localhost server image. That works for me
Quick and Lowtech Answer: Take a screen shot of the page open it in photoshop and drop the local image on a layer above the webpage image.
Hi if you are serving from a webserver, u probably can't point it to a file on ur local drive. Even if its localhost, u can't point to a local file c:/test.jpg for example. Its because the browser sorts of sandbox ur page so that scripts can't access local files.
One way is to upload the new file (new_file.jpg) to the webserver, give the image link an id
<img id="something1" src="test.jpg"/>
Using jQuery in the firebug watch window do
$("#something1").attr("src","new_file.jpg");
You should see the image change. If you are not using jQuery, you can use document.getElementById("something1") and get the element to modify.
Another way is to use http://makiapp.com/
You can overlay an image from you computer onto any website you look at with this. Very cool tool for lining up a comp with your code.
You can:
Drag your test image into Google Drive
Open it in a browser
Go to the actual image path
Use this path as a substitute in Firebug
It's almost as fast as working from a local drive.

How do I save a web page, programmatically?

I would like to save a web page programmatically.
I don't mean merely save the HTML. I would also like automatically to store all associated files (images, CSS files, maybe embedded SWF, etc), and hopefully rewrite the links for local browsing.
The intended usage is a personal bookmarks application, in which link content is cached in case the original copy is taken down.
Take a look at wget, specifically the -p flag
−p −−page−requisites
This option causes Wget to download all the files
that are necessary to properly display
a givenHTML page. Thisincludes such
things as inlined images, sounds, and
referenced stylesheets.
The following command:
wget -p http://<site>/1.html
Will download page.html and all files it requires.
On Windows: you can run IE as a com object and pull everything out.
On other thing, you can take the source of Mozilla.
In Java, Lobo.
Or commons-httpclient and write a lot of code.
You could try the MHTML format (which is what IE uses). http://en.wikipedia.org/wiki/MHTML
In other words, you'd be downloading each object (image, css, etc.) to your computer, and then "embedding" them, via Base64, into a single file.

Load an image from Firefox cache?

I'm trying to load an image from the Firefox cache as the title suggests. I'm running Ubuntu, so the location of my cache is /home/me/.mozilla/firefox/xxxxxx.default/Cache
However, in the Cache (and this is on Mac, too) the filenames are just ridiculous combinations of letters and numbers. Is there a way to pinpoint a certain file?
You should take a look at the source code of the CacheViewer Add-on.
Download the file instead of installing it (right click and save as) and then extract it (it's just a Zip file, even though it has a .xpi extension), then extract the cacheviewer.jar file inside the resulting chrome folder. Finally go into content and then cacheviewer to find the javascript and XUL files.
From my brief investigation, the useful routines are in the cacheviewer.js file, though if you were hoping there would be a simple javascript one liner for accessing cached items you're probably going to be disappointed. The XUL files (which are just XML) are helpful in working out which JS functions are called to perform particular tasks. I'm not too sure how all this maps into Greasemonkey, rather than the extension environment, but hopefully there's enough code to get you started.
Ummm, that really is an internal implementation detail. But I suggest looking at how about:cache?device=disk and about:cache-entry?client=HTTP&sb=1&key=https://stackoverflow.com/Content/img/wmd/blockquote.png are implemented.
Also, http://www.securityfocus.com/infocus/1832 gives details, too. Note that Firefox doesn't use a separate file for everything...
And of course, Firefox may change the format at any time.
Just give your img src= attribute the full URL. If the image happens to be cacheable (the server sends an appropriate Expires: or Cache-control: header, for example) and it's already in the cache, Firefox will not hit the network.
HTTP caching is supposed to be invisible. When you're generating content, you generally shouldn't worry about it.
You can point REDbot at a URL to see all sorts of delicious information about its cacheability.

Resources