Rather than add Pin It buttons through our site, I would like to simply control what images show up in Pinterest's "Find Image" results if a user decides to pin one of our URLs.
As of now, "Find Images" allows the user to scroll through the images it finds on the page so they can select which image to pin. The "found" images start with the first jpg in the html file, I'm assuming (could that be a bad assumption??). On our site, this forces a user to scroll through about 15 navigation and promotion images before arriving at the featured product image. Is there any way to specify this image to show first in those results? Maybe through a meta tag, or by adding a class or id to the element?
Without a public Pinterest API, this seems like just guesswork, but I wanted to see if anyone else has run into this, or solved this. Thanks.
A lot of search results including the Pinterest Help Center talk about using nopin in HTML elements, which is invalid HTML. What they don't document is a data attribute to the same (well formed) effect.
<img src="foobar" data-pin-nopin="true" />
Adding the nopin attribute will exclude the image from appearing on Pinterest:
<img src="..." nopin>
I solved this by simply loading the image before all others in the page. In this case, I gave it width="0" and height="0" (you could also give it style="position: absolute; left: -9999px; top: 0;" just to be sure).
This won't break the page layout, but will force Pinterest to find this image first. The only downside is that the browser will load the page a few milliseconds slower, but if you're reusing this image later in the page anyway, you should make up for lost time then.
Pinterest will find any images from <img> tags (it will ignore CSS background images) that are at least 80px x 80px.
The order the images show up on in the Pinterest list is determined by the order they are specified in the HTML.
As you have discovered, you can alter the CSS of an image to "hide it" without actually hiding it by either moving it off the page with absolute positioning or 0 height and width. Any images that are set to display: none will not be picked up by Pinterest.
You can instruct the share preview to only grab specific images from the page by using the “image_include” configuration option. First, set image_include to your desired class name (id selectors are not allowed, only class selectors), then add that same class name to each of the images on the page that should be grabbed. For image_include, don’t add the ‘.’ selector. Here’s an example:
<script type="text/javascript">
var addthis_config = {
image_include: "at_include"
}
</script>
Once image_include has been defined with a class, add that class to the desired images on the page. In this example, the only images on the page that will be grabbed, will be the images with the at_include class (img1.jpg and img3.jpg).
<img src="http://www.example.com/img1.jpg" class="at_include" />
<img src="http://www.example.com/img2.jpg" />
<img src="http://www.example.com/img3.jpg" class="at_include" />
I was reading this blog which suggests the following:
Use the global no pin flag to prevent pinning on the whole site
Manually add the Pin It widget to those images you want to make pin-able.
Given Pinterest's webmaster tools appear to only have a blacklist, rather than a whitelist option (that you are seeking), this could be a possible solution. Another stated benefit of this is you can also supply suggested pin text through the Pin It widget.
Only downside to this I guess is that it may break the user's own Pin tools. Pinterest does allow you to supply a custom "denied" message, so I guess you can say "please use our site's pin buttons directly".
I've tried this, and it works. It seems like a decent approach, at least until Pinterest sees fit to add some better tools, such as an image whitelist option. The main drawback is needing to add Pin-it buttons on every image you want to enable for your users & your users may be annoyed that they can't pin anything.
Unfortunately, there is no way to mark several images on your page as preferred, but you can mark one image to stay at the top of your images when someone pin it. Specify this meta-tag in <head>:
<meta property="og:image" content="http://YOUR-DOMAIN.com/IMAGE.jpg"/>
I have not found official confirmation for this feature, but it works great with addthis sharing plugin.
Add this script before the actual call to pinterest. And set images that you do not want to show with a class called 'nopin'
<script type="text/javascript">
var addthis_config =
{
image_exclude:'nopin'
}
</script>
<div id="toolbox" class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_pinterest"></a>
</div>
</div>
If anyone is using AddThis, please check this thread: http://support.addthis.com/customer/portal/questions/1570789
AddThis has some, uh, unique functionality that affects the image picker presented. As in, when there is only one image on the page, it ignores the defined og:image.
If you set that lone image to be excluded, then the image picker won't show any images for selection.
Related
<a href="#" role="button" >
<span aria-hidden="true"> First</span>
<img src="D:/kk.JPG" alt="First name" width="20px" height="20px"/>
</a>
JAWS reads it as First First name button instead of First name button.
Is this a Firefox issue? How do I resolve this without using aria-label for the outer anchor tag.
The problem, here, is that JAWS does not consider this element itself, but it is used in the calculation of the text alternative for the link.
To solve this, you can try to remove the redundant text from the img alternative name.
I would make a guess on the pertinence of the image alt here as it is inside a link with other text, so you don't have to describe the image but the purpose of the link.
Of course, if you hadn't said so, I would have suggested to use aria-label.
See the following page: webaim.org/blog/alt-text-and-linked-images
In the above example, because text within the link provides the content of the image and the function of the link, the image itself can be given an empty alt value. An image within a link is something very specific: you don't have to consider the image alternative but the link alternative.
According to WCAG, when an image is the only element inside a link, it should describe the purpose of the link. When you use aria-hidden=true on the only other element, you fall in this situation. As a consequence: the alt for this image should describe the purpose of the link and you have to forget about the description of the image. That's being said, as this does not work in Jaws/Firefox, if you can remove the redundant part, it's the best option
I currently use retina.js to load Retina-optimised images on my website.
It is great, but renders redundant all thumbnail links to larger images (which load with Fancybox).
My question is how can I disable all links to images if Retina is detected? (At least until I have a higher-res camera.)
Regards
Paul
If you want just some images on your page to be excluded from retina.js, you have to add the data-no-retina attribute to the tag, like this:
<img src="yourImage.jpg" data-no-retina />
If you want to disable the links created by Fancybox, you have to modify the Fancybox source itself.
I'm working on a new website re-design; so far every browser compatibility issue has been resolved no problem - but there's one that remains in IE7.
The client has a dropdown menu from the header which extends over the content, but the problem occurs when the client has a related video on the page as this is often displayed first; the video [being displayed just below the header] pushes the menu behind.
The dropdown is created in CSS using a high z-index value (1000).
JavaScript is used to hide and show the menu by altering the 'visibility' value.
The video uses jPlayer, given the age of IE7 it doesn't use HTML5 to display the video but instead includes a .swf file.
I have tried altering the z-index of the header, jPlayer, etc to the suggestions on this site but had no luck. I have also tried changing the position from absolute to relative but this broke the dropdown.
I have modified the parameter 'wmode' so that it's property is 'transparent', I've also tried 'opaque'.
The only difference I have made so far is adding hours to the work-log.
The page is question can be found here:
http://www.newforest.gov.uk/healthandleisure/
Thanks!
Have you tried an iframe shim? I had a similar experience with the google earth plugin, and adding the shim to the pieces that need to go on top of the swf elements as:
<iframe class="bgi" frameborder="0" scrolling="no" src="about:blank">
<html><head></head><body></body></html>
</iframe>
where bgi is a class that has
height:100%;
width:100%;
z-index:-1;
When I click the AddThis Pinterest button, the box opens mid-screen, offereing a variety of images from my page. Cool. However, among those offered are grainy, enlarged portions of nav buttons, banner ads, and other images that are relevant. On the same, page the Favorites Bar PinIt button (from Pinterest itself) does it "correctly", meaning it only offeres meaningful images; no nav buttons included.
How can I exclude selected images from the AddThis Pinterest widget box?
Thanks in advance to anyone who can help.
The actual way to force an image is the "media" option, not the "url" option:
<a... pi:pinit:media='http://path/to/my/image.jpg'>...</a>
AddThis Pinterest has support for "at_include" and "at_exclude" classes for images.
Full post here: http://support.addthis.com/customer/portal/articles/1300322-pinterest-image-sharing#.UuAnmrvTm2x
Include Images
You can instruct the share preview to only grab specific images from
the page by using the “image_include” configuration option. First, set
image_include to your desired class name (id selectors are not
allowed, only class selectors), then add that same class name to each
of the images on the page that should be grabbed. For image_include,
don’t add the ‘.’ selector. Here’s an example:
<script type="text/javascript">
var addthis_config = {
image_include: "at_include"
}
Once image_include has been defined with a class, add that class to
the desired images on the page. In this example, the only images on
the page that will be grabbed, will be the images with the at_include
class (img1.jpg and img3.jpg).
<img src="http://www.example.com/img1.jpg" class="at_include" />
<img src="http://www.example.com/img2.jpg" />
<img src="http://www.example.com/img3.jpg" class="at_include" />
Exclude Images
You can instruct the share preview to ignore specific images from the
page by using the image_exclude configuration option. First, set
image_exclude to your desired class name (id selectors are not
allowed, only class selectors), then add that same class name to each
of the images on the page that should be ignored. For image_exclude,
don’t add the ‘.’ selector. Here’s an example:
<script type="text/javascript">
var addthis_config = {
image_exclude: "at_exclude"
}
Once image_exclude has been defined with a class, add that class to
the desired images on the page. In this example, the only image on the
page that will be grabbed, will be the image that doesn't have the
at_exclude class (img2.jpg).
<img src="http://www.example.com/img1.jpg" class="at_exclude" />
<img src="http://www.example.com/img2.jpg" />
<img src="http://www.example.com/img3.jpg" class="at_exclude" />
Image Container
You can also instruct the share preview to grab images from a specific
container, such as all the images contained within the class or id
that has a Pinterest share button. This can be really helpful if there
are multiple Pinterest share buttons on the page. Remember, the
Pinterest share button must be within the same container that the
images are located in. Also, notice that image_container needs to have
the ‘.’ or ‘#’ selector. Here's an example:
<script type="text/javascript">
var addthis_config = {
image_container: ".shared_content"
}
Once image_container has been defined with a class, add that class to
the desired on the page. In this example, the only images on the
page that will be grabbed, will be the images contained within the
shared_content .
<div class="shared_content">
Here's some example text. Images in this div will be grabbed.
<img src="http://www.example.com/img1.jpg" />
<img src="http://www.example.com/img2.jpg" />
<a class="addthis_button_pinterest_share"></a>
</div>
<div class="another_div">
Here's some more example text. Images in this div will not be grabbed.
<img src="http://www.example.com/img3.jpg" />
<img src="http://www.example.com/img4.jpg" />
</div>
If you want to specify a single image for Pinterest to use, you must specify the path to that image as the value of the pi:pinit:url property.
<a... pi:pinit:url='http://path/to/my/image.jpg'>...</a>
Normally a webpage load images is like scrolling down. I don't want the visitor's of my site to see it. I am looking for a script that will load my webpage and then it will show completely. I have already put a fadeIn effect but the images loading is scrolling and also my background image.
Questions:
Is there a script for that?
What is the best script to use? PHP or JavaScript?
this is one method, http://developer.yahoo.com/yui/examples/container/panel-loading.html
basically you can wrap the content in a hidden div, then unhide it in the body's onload event.
You could overlay your page with a "please wait..." div, and fade that out when the page is loaded. You could use JQuery's ready event to hide the div.
The downside of this is that users with JavaScript turned off would never see the page, but only the "please wait.." message.
To make it work for users with JavaScript turned as well, you would have to make the "please wait..." div visible using Javascript at a very early stage of the document's loading, which is very tricky to achieve. It might work if you put a <script> tag after the "please wait" div but before the actual page's content.
or you can add on page header small copy's of this images.. 1x1 px and fade it or hide or z-index -100/ browser will download this full-size images
Use this code:
<body onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'block';">
<div id="loading">Some loading text or icon goes here...</div>
<div id="content" style="display:none;">Main content goes here...</div>