how can you specify which image you want to show on when sharing an article? Now it just picks random images from our site which aren't relevant. I tried adding an image_src link to the head of my site but this didn't help. Any idea how you can do this?
The API of LinkedIn doesn't tell us how:
http://developer.linkedin.com/docs/DOC-1075
Kind regards,
Daan
There is currently no way to specify a thumbnail. They don't seem to use oEmbed, OpenGraph or image_src. However, you can trick it into picking a specific image.
Make your image 62x62 pixels (other sizes will likely work, but non-square aspect ratios failed for us in the combinations we tried). Also, make it the first IMG tag in the document.
If you don't want users to see that image on your site, you can hide it with postion:absolute and right:-999px.
Related
Google PageSpeed Insights is saying that I should compress and resize several images.
Here's an example:
I saved this image using Photoshop's Save for Web JPEG High preset:
What can I do to this image to avoid Google's "compress and resize" warning?
Due to the small number of different colours that image seems to have, you'd probably get a much smaller image if you exported it as a gif, or png-8. Sitepoint has a useful article on when to choose which image format.
This is what works for me and JPEG to be on the safe side of PageSpeed Insights.
File > Save for Web & Devices
Not only do you need to find the right compression settings but also you need to stick to your img tag actual dimension. If you know your max width for img tag will be 555 px then save your JPEG to that dimension, not a pixel more ... as for how it goes along with retina display, it seems Google does not take this criteria in account right now.
If you are not happy with the resulting quality (and you might be if you have a designer ecommerce site) you need to bypass Google recommendation - knowing it could slightly penalize your SEO over someone else that actually stick to the rule.
You don't mention if you are using the Chrome extension or the main website? Assuming the former you can actually download the optimised version of an image by clicking the 'See optimised content' link under 'Suggestions for this page'.
Img here:
I want to present an image to my visitors, and I don't mind if they download it (they can always take a screenshot anyway), but I don't want this image to appear in any search results ever.
While I know that I can politely ask bots not to index my content, I don't trust them. Therefore, I want them to not recognize my image. Two ideas:
Create my image through e.g. PHP's image functions: <img src="image.php">. But I guess Google understands this.
Publish my image as a table, with each cell 1x1 pixels and the background color of that pixel: <td style="width:1px;height:1px;background-color:#36ef2a"></td>.
Better ideas?
Does this include not trusting /robots.txt file in your setup? Not sure if that is what you meant.
What type of images are they? If they are mostly text, and can be represented with drawings, you can try using the HTML5 Canvas Element and/or Inline SVG to present your image.
I'm not sure if you can use background images to help your point inside the CSS.
I added image to canvas element, but visitor than can save that image to local comp.
Is there any way to disable that option? I don't know, putting some transparent image over?
Thx
So i thought this can help you just disable rightclicks:
$('#canvas').bind("contextmenu",function(e){
return false;
});
None of this (not even image slicing) stops a user from simply copying the screen on to the clipboard and pasting it into MSpaint or any other image utility, and saving the result. Its trivial to do; And a transparency image is no impediment to this.
The only effective options that I know of are (as was said), watermarking or low quality.
*Avoid 1 pixel wide lines or dot watermarks that can be removed easily with a Photoshop filter.
~If its commercial... You could have a pay-wall, and steganographically embed the purchaser's name and or information into the image (or preview), such that if it does get used without permission, at least you know who did it.
Basicly: if your image is loaded by the Browser you can never protect the user to download it, because if the browser knows where to find the image, the user can find this out as well. So all this download protection only works for users not familiar with computers and the internet and nowadays i think most people are able to download such an image if they really want to.
If you want to prevent users to use your images for their work, you can use images with watermarks or in a lower resolution otherwise can you tell what reason do you have to prevent users from downloading?
I found this question in review of an HTML5 captcha alternative I'm developing. My goal is not to "prevent" users from downloading the image as much as blocking OCR on the image capture. To prevent it, I added a onclick event to the canvas object that resets the canvas element on click. The user can "download" it, but it no longer is the original code presented.
Hello I am building a social network similar to facebook and I really need some help on how to handle the images in my website. I would like to know how sites like facebook manage the resizing of their images. An example would be looking at someones photo album. The length and width are not just simply changed. They are done in a more professional way to make the image still look clear and not stretched. Do they use a special tool for this. Another example would be profile pics when they are loaded to your message wall. Your friends profile pics are centered and cropped accordingly and then re sized. How do they go about doing this. Any help would be greatly appreciated.
They resize proportionally with an imaging library like GD, Imagick or others.
The presentation in the gray area is just that, presentation so HTML and CSS.
They stretch the images proportionally so that they don't look wrong; if you make the image 37.5% wider... you also make it 37.5% taller.
If we knew what language you are familiar with, we could probably suggest something to help with this.
im building a webshop in Drupal and i was wondering if you could help me with the following problem:
I got one big image frame (500x500) and 5 little image thumbnails(95x95) underneath the big one.
How can i realise that if the visitor clicks on the thumbnail, the big image frame gets filled with that specific image?
jQuery is the right direction, but the strength of Drupal is based on doing things "the drupal way", which means, I guess in your case, to use Views as the origin for the thumbnails using imagecache + lightbox, and somehow change the main "frame".
I used jcarousel in some cases (for different but similar uses) and it works nice. I guess it is possible to trick it to do what you need, or - better - to find an existing module that do what you want.
I know, many Drupal buzzwords, and a stiff curve to overcome, but this is the right direction in case you want to base your site on Drupal.
If you don't need all of these, and want a static page+jquery, Drupal might be an overkill altogether.
If you use Views, Imagecache, and the Lightbox2 module, you can create image galleries out the arse and tell it to link the field to its large size and use Lightbox2 as the method. This is how I do most of my galleries.
Drupal uses jQuery so you can write a simple jQuery script to handle this (not sure if there's already a plugin to do that). Just add all the img tags (make sure all of them except the first one are hidden[display=none]). Then when a thumbnail is clicked/hovered do a $(big_img_holder).replace() with the tag for the image to be shown. Tell me if you want to see some code and I'll try to show you.
You can see this plugin as an exapmle. Just replace the numbers on the right with thumbnails and you're ready to go ;-)