I have a lot galleries displayed with Lightbox2 and it works fine.
Now I want to delete the larger version of the pictures, but keep the gallery with the thumbnails for visitors.
How can I manage, that lightbox2 displays an alternative image, if the given file in the html is not existing?
I couldn't find an option in lightbox.js to handle with missing targets.
I had the same question, but after a little research I decided that Lightbox2 is not the right place to handle missing images. Instead, that should be handled at the server or application level.
The web server will respond with a 404 error for any missing resource, whether a web page, image, or anything else. In most cases, it also returns a small HTML page to alert the user (such as this example at Google).
You can usually configure your server or application to return a default 404-style image instead of an HTML page if the requested resource was an image. That will then be displayed to the user instead of the broken image symbol.
How you do this of course depends on the particular server/application stack you are using, but here is a good solution for Apache.
Related
I am working on an xpages app, where the client wants to restrict the size of images that are pasted into the document. I have restricted docs with the upload component, but not with a pasted image.
Has anyone done anything like this?
Thanks
walt
Yes it is possible, I haven't done this but there are a few ways you could go about it.
Excuse me if you already know this, but it is worth pointing out for anyone who comes across this question in the future, RichText as we knew it from Notes/Domino is not used XPages, it is all MIME. When I started Xpages I knew nothing about MIME so after understanding it all I have written a little summary on my blog to help anyone get used to the idea. If you are going to do anything with the InputRichText control and File Uploads etc. it is worth getting familiar with MIMEEntity's.
http://camerongregor.com/2016/04/21/webmail-ui-you-must-learn-about-mime/
There are 2 ways that images can make it into the 'rich text field', either uploaded using the 'Image' button on the editor toolbar, or alternatively in some web browsers, the image can be pasted from the clipboard. The 2 different methods will include the image in 2 different ways
Uploaded
If the image is uploaded, then the image becomes a multipart/related mime entity of some sort of image/jpeg, image/png etc., related to the text/html. Between the time that the image is uploaded, and the time that the Document is saved, the image file will be located on the server's disk, in the xpages persistence folder associated with the Document e.g.
xsppers_directory/application-id/session-id/document-id/someimage.png
Pasted
When pasted the image is not uploaded as a file to the server's persistence folder, but is instead included within the text/html as a data URI image (as Stephan mentioned in the comment above).
So, if you want a true solution you will need to address both avenues.
Handling Pasted images
I have shared a plugin on my blog which blocks pasted images, so this could be used to eliminate the 'paste' avenue altogether, and force users down the upload avenue.
http://camerongregor.com/2016/11/14/preventing-pasting-of-images-in-ckeditor/
Alternatively, if you are happy with having smaller pasted images, you could just 'restrict' it by modifying the plugin so that it checks the 'length' of the data URI (as Stephan suggested above) and allows the paste if the length is below your predetermined limit.
If even more alternatively, you could find some sort of client side javascript library that will resize images and do it there in the client before the paste.
Or another server-side option is you could process the contents of the 'text/html' MIMEEntity when saving, and find any img tag's that used Data URI's and strip it out, resize the image using some server side library such as ImageMagick and replace it.
Handling Uploaded Images
For uploaded images, an intense solution would be to extend the InputRichText control (similar to how the have demonstrated in the Mastering Xpages 2nd edition) and override the processAjaxRequest event so that it resizes the image during the process of uploading of the image and putting it in the persistence folder. You could resize it there and then using something like ImageMagick.
Or a less intense version would be to process the 'pending' attachments during a before save event. If you get the DominoRichTextItem from the DominoDocument, you should be able to iterate through the Attachments, checking their attachment state, there will be a state which means 'pending/about to upload' and for these ones you can process them while they are in the persistence folder, before they are finally attached to the document.
Finally if you don't want the xpages runtime / persistence directory to be involved, you could do it all after save, just using the backend NotesDocument and MimeEntity processing. Extract the Image MimeEntities to disk, process them with ImageMagick or similar, and then re-attach them.
Someone else may have a simpler solution that I haven't thought of but at least this gives you some idea of what may be involved.
So, there's this blog I visit often, and it has a lot of pictures.
But the thing is, they are all broken. The image is there, and I found that if I use a proxy server and access the blog, some pictures are there. Some are still broken, so then I have to right click the broken image, copy the image URL, open the URL in a different tab/windows, and once that picture finishes loading, I refresh the blog, and the picture I loaded on a different windows now shows....
Does anyone know why this happens, and how I can get it fixed?? Thanks.
In case you don't understand what I mean, This is the blog that makes this happen
http://wersierre.tumblr.com/
This applies to Firefox, chrome, IE in my case.
This is very likely to be the case that the target server is configured to prevent hotlinking. When accessing the images via the page you posted, the HTTP response code of the images is 403, it indicates the server can be reached and understood the HTTP request, but refuses to take any further action.
I'm currently developing a picture-storage on MVC3 and have a question how to restrict access to images.
If I insert image into HTML lice <img src="/ImagesFolder/image0001.jpg"> it will be shown correctly, but anyone who write full path in browser will get that image too. I don't wand to permit it.
One way is to embed image as base64 string, but it is suitable only for small images, I have large ones.
I've seen recommendations to create image-accessing action, and use something like
<img src="/GetImage?ID=1123">, but at that GetImage page I will still use either direct-path or base64 methods? and in first way full path to imagefile will be translated into parent view and still can be seen in picture properties?
Is there a way to use System.Drawing.Image in <img src=""> or any other way? Do you know any samples?
One way to do this is put all of the images into a path which is not published by the http server. This way there is no direct path users can put into the browser.
Scripts themselves are on the server so they can access this path. Your image-access method should be a script which returns actual data and identify itself as the data it is serving image/jpeg for jpegs for example. This way if somebody accesses GetImage method by some other means than the one you have designed the script can detect it (by referer, or other means) and return nothing.
I think that the "image-accessing action" solution you mention is the easiest one to implement. The GetImage script could for example check for a cookie that you set in your application, so that only people that have first visited your site can receive the images.
Now, if you want to prevent people to display the images by typing the URL in the browser after they visited your site, this is more tricky and in my opinion there isn't an easy solution for that. You might check the Referer HTTP header to see if the request is related to your website (as Referer will be empty when putting the URL into the URL bar, but will contain the URL of the page containing the image when it is included with <img src=...>), but this solution has a drawback, as it will prevent browsers not sending the Referer header (generally for privacy reasons; it is not a very wide-spread configuration but this happens) from seeing your images at all. A second possible drawback is that people will probably be able to see the images that are already cached in your browser by typing their URL, unless you can configure the server to serve them with some headers disallowing caching.
It's been few days I'm looking for a solution and I can't figure out why it's still not working.
Here is my goal:
I have a website with a sideshow. The images are dynamically changed (with previous and next buttons). I just want to share an image on social networks (facebook, google+ and twitter) and actually see the image in my wall with a little description and the link to a page.
Precision:
The image is a thumbnail (so, not the same url) of the main image and the link I want to publish is neither the page I'm on (which is static due to Ajax) nor the image one.
My tries:
I have almost got it on facebook but the image loading failed and it was with a share button (which seems to be deprecated in favor of like) and for google+, the +1 button become red after I click it... I tried XFBML and OpenGraph, but the problem is with Ajax (url is the one of the page or is not changed even with createElement("
Questions:
1. Is there any packaged solution (like addthis, but working the way I want)?
2. Or do you have one (or a clue) for me please?
3. Am I the only one to think that offical facebook and google+ ajax documentation are lame?
Thanks a lot.
Hugo
PS: if I could have a fly-out to edit a comment with the content I'm about to share, it would be fantastic!
One way to accomplish this is with cloaking.
Setup a page which provides the image, title, and description to the social application (aka. facebook, google+). You can then use Javascript to redirect the user to the page you actually want the user to see. For users without Javascript the page should display a link to the target page with a "Click here if you are not automatically redirected". The image should exist on the page but you can place it in a div with style="display: none;" so the user doesn't actually see it.
A more advanced technique would be to use the IP address and browser name (user agent) to determine if the visitor is a user or a social network robot and using a 502 temporary redirect to the page you want the user to see if the visitor is not a social robot. The social robots would be shown a page which has the image, title and description.
The social sharing buttons that you're using all have one thing in common: they all work best when there's a URL representation for the object that you're sharing. Some of them, namely Facebook's like button and Google's +1 button, use the contents of that page to create the snippet that's shared.
This isn't a new problem, though. This is the same problem faced with search indexing of AJAX applications. Sadly there's no easy solution. Here are a couple of challenging ones:
Programmatic Solution
You can improve your back end so that it's capable of rendering pages for each shareable step in the state of your slide show: one page per image. As you step through the slide show you can destroy and re-create the social sharing plugins each time targeting them to this machine accessible version of that image.
Snapshot Solution
You can use a crawler tool that is capable of executing JavaScript to make snapshots of the different states of your application. You can then target the social sharing buttons to the snapshot of the current state.
This might require less back end work but may be challenging to keep up to date.
We have members-only paid content that is frequently copied and republished without our permission.
We are trying to ‘watermark’ our content by including each customer’s user id in a fake css class, for example <p class='userid_1234'> (except not so obivous, of course :), that would help us track the source of the copying, and then we place that class somewhere in the article body.
The problem is, by including user-specific information into an article, it makes it so that the article content is ineligible for caching because it is now unique to each user.
This bumps the page load time from ~.8ms to ~2.5sec for each article page view.
Does anyone know of any watermarking strategies that can still be used with caching?
Alternatively, what can be done to speed up database access? ( ha, ha, that there’s just a tiny topic i’m sure.. )
We're using the CMS Expression Engine, but I'd like to hear about any strategies. They don't have to be EE-specific.
If you're talking about images then you could use PHP to add a watermark to the images.
How can I add an image onto an image in PHP like a watermark
its a tool to help track down the lazy copiers who just copy the source code as-is. this is not preventative, nor is it a deterrent. – Ian 12 hours ago
Going by your above comment you are happy with users copying your content, just not without the formatting etc. So what you could do is provide the users an embed type of source code for that particular content just like YouTube does with videos. Into that embed source code you could add your own links back to your site, utilize your own CSS etc.
That way you can still allow the members to use the content but it will always come out the way you intended it with links back to your site.
Thanks
You could always cache a version that uses a special string, like #!username!#, and then later fill it in with PHP based on which user is viewing it.
Another way I believe is to switch from caching on the server to instead let the browser cache it locally for a little. That way it is only cached per user, and it reduces the calls to your database. Because an article is pretty static, you could just let the local computer cache it, and pull in comments via javascript.
This last one is probably not one you are really looking for, but I'm gonna come out and say it anyway. You could not treat your users like thieves, and instead treat the thieves as thieves. Go to the person hosting the servers your content is on and send them an email telling them copyrighted premium content is being hosted on their servers without your permission. You can even automate that process.
How to find out what sites are posting your content? Put a link in the body content to your site, and do a Google Search/Blog Search for articles linking to that site. To automate it, use Google Blog Search because it offers RSS feeds. Any one that has a link back to your site could go into a database with a link to the page, someone could look at it, and if it is the entire article, go do a Whois and send them an email.
What makes you think adding css to something is going to stop people from copying it without that CSS? It's more likely that they are just coping the source of the content you are showing them and ignoring all the styling around it. For example, I use tamper data to look at all HTTP requests made by Firefox, if I can see it on the page, I can see it in the logs. Even with all the "protection" some sites try to put in place, they generally will never work. I can grab what I want, without using any screen capture/recording.
If you were serving flv's, for example, I would easily be able to grab the source of that even if you overlayed it with some CSS. I think the best approach would be to get the sites publishing your premium content and ask them to remove it. It's either that or watermark the actual content on the fly while sending it to the browser.