trying to get my "Like" button to link to Wordpress attached image URL.
Is it possible to "Like" just an image file?
Here's what I have
<?php $large_image_url = wp_get_attachment_url( get_post_thumbnail_id(), 'large'); ?>
<div class="likeButton" style="float: left;"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode($large_image_url); ?>&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:25px"></iframe></div>
Firebug shows it's linking, but pressing like yileds no results to my FB page. Hewlp!
See my answer here: Like Button counts the likes of a PDF but does not actually post the activity?
You can't like a file directly because the file won't serve the metadata Facebook uses to display the 'like' story - you need to like a HTML URL, then include the image on that URL (or redirect users other than Facebook's crawler to the image)
Related
On my site I have images in the travel report, some of which you can click on and are therefore between the a tag of a link. This works well on the site. But if a PDF is made of it, the images with links will be placed behind the text.
We received the code, Robin immediately walked over to it and came back with the house key.<img src="/images/pngegg64.png" alt="Receipt” title="click to view the bill" border="0" align="left"> After dinner to the apartment.
On the website: example HTML/PHP - result in html (pic)
On PDF via dompdf: example PDF - result in pdf (pic)
Does anyone know how this can be solved so that the image also appears between the text and not after the text?
Maybe you can set a z-index value for your image's CSS like this:
img {
z-index: 1;
position: relative;
}
Or try putting the
<img src="/images/pngegg64.png" alt="Receipt” title="click to view the bill" border="0" align="left">
in a block-level element. Wrap a <div></div> around it.
Hope it helps!
I am using laravel and trying to make it possible for users to change the background image of their page using an update form. They upload a pic and the pic is displayed using twig. My code below for getting the user image used for the background pic
$this['userprofile'] = User::with('background_pic')->where('id', $slug)->first();
The background pic is to be rendered in a div using the code below
<div align="center" style="height: 30px; background-image: url('{{ userprofile.avater.path }}');"></d>
the image uploads fine to the backend but not sure how to display it in twig. using the above background-image: url('{{ userprofile.avater.path}}') does not work
In order to render the background-image url from a variable you need to use the asset function.
This twig function resolves the path of your image to a publicly accessible URL.
Example usage:
<div style="background-image: url('{{ asset(userprofile.avater.path) }}');"></d>
I've removed all post centered markup from my Tumblr theme and instead I'm using ajax to fetch the data. So far, so good. Now I want to add a like button to each post, but I can't seem to find any documents on how to do this (without resorting to their api, which needs oauth to work).
Are there no way to include like buttons when you use ajax to fetch the posts and you rather not go full fledge api with oauth?
Tumblr's new implementation of the "Like button" for individual posts uses an <iframe> element to function. The URL for this iframe is obtainable only through your Theme code.
For example:
{Block:Posts}
<div class="like-button">{LikeButton}{/div>
{/Block:Posts}
What is rendered for the {LikeButton} will look something like this:
<iframe id="like_iframe_84714330251" src="http://assets.tumblr.com/assets/html/like_iframe.html?_v=fa292ab73ee80893ffdf1edfabaa185a#name=blog-name-&post_id=84814329251&rk=reKNyFfj" scrolling="no" width="20" height="20" frameborder="0" class="like_toggle" allowtransparency="true"></iframe>
There does not seem to be any way to obtain this without including {LikeButton} inside of a {Block:Posts}
For using ajax, you could include a hidden element on the page that loads this information and parse it out when loading each page of posts using ajax.
So if in your theme you included something like:
<div id="posts-info" style="display: none;">
{Block:Posts}
<div class="post-info" data-postid="{PostID}">{LikeButton}</div>
{/Block:Posts}
</div>
When you load your posts with AJAX, you would also have to load the correct page of your Tumblr (with this code in the Theme).
You could then parse this information by matching the Post ID's to the posts you fetched with AJAX and insert that <ifame> code.
This is a really round-about solution but it should work.
I have added a picture to my webpage here http://www.backpacks4aussiekids.com.au/Home.html and it works just fine, but when I tried the same thing in an article here http://www.backpacks4aussiekids.com.au/Articles/what-is-needed.html the pix won't load, even though I followed the same proceedure.
I even tried changing the pix from .jpg to .png and back again. The only way the changes can be viewed is if I clear my site and browser cache before I attempt to view the site.
All the text is able to be viewed but there are either empty boxes where the pix should be or nothing at all.
thanks in advance, des
The image definitely exists as I have checked.
The reason why it's not showing is because the picture on the homepage is within an <img> tag where as the picture on the second link you provided is for some reason within an <input> tag as shown below:
<input type="image" style="width: 511px; height: 684px; float: left;" src="http://backpacks4aussiekids.com.au/images/what we need now/clipboard 1.png" alt="">
Open the article in the article manager, click on the little html button which will open a window, find the code above and change to the following:
<img style="width: 511px; height: 684px; float: left;" src="http://backpacks4aussiekids.com.au/images/what we need now/clipboard 1.png" alt="" />
Hope this helps
I've got a gallery of images, and I'd like users to be able to share those images to their social network.
When a thumbnail is clicked, an lightbox opens using colorbox, and ajax's in the images main view /images/view/<id> rendered as HTML, with an AddThis widget beneath it.
However I'm finding that because I'm loading the widget in using an ajax query there is obviously no event handler for it to catch and load it's bits. It's also, quite rightly, sharing the main url, seeing as it's been loaded in a lightbox.
Is there any way to overwrite this functionality or another sharing widget which will allow this kind of functionality? Or do I need to create my own sharing widget?
I have found a solution to this problem now, although it is more of a hack then anything else.
The basic principle is that you need to reinitialise the widget every time you load it back in.
The simple premise is that you include a ?domready=1 when loading the javascript.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?domready=1#pubid=/*Your pubid*/"></script>
Then when you complete loading your ajax, you need to run,
window.addthis.ost = 0;
window.addthis.ready();
Which will reinitialise the widget. My code is thus. I cheated, and attached it to the global ajax handler, because of my php framework </aside>
$('.content').ajaxComplete(function(event, request, settings){
// We need to reinitialise the addthis box every time we ajax a lightbox in
// Apologies for using regex to read html when javascript can parse html!
// http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags
if(request.responseText.match(/gallery-lightbox/i)){
window.addthis.ost = 0;
window.addthis.ready();
}
});
Once you've done this, the addThis widget will now load properly. Onto the second problem, of specifying the lightbox content as the sharing item.
This was much simpler, in that you can add the url into the button element. So you end up with widget markup like the following.
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_2" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_3" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_4" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_compact" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?domready=1#pubid=/*Your pubid*/"></script>
<!-- AddThis Button END -->