I am getting image from clipboard and putting in img tag.
So when user click on a button, image from the clipboard is copied into img tag in one div tag. So I have list of img tags within one div.
I want to save that images on server, So I have to send that images to server side.
How can I send that images on server side ?
Please guide. Thanks.
=== Code Sample ===
<div id="imageContainer">
<img src="..."/>
<img src="..."/>
<img src="..."/>
</div>
this is the structure and want to upload this images on server.
Related
i have an share button on my page and have too the op:image, op:width: and op:height on my meta tags.
When user's share the page, sometimes images get an crop of top left and not take the full image. In the box when user's preview what will share the image is fine, but when in the wall the image is get the crop.
I google it but not had any solid answer. Someone can help me ?
This is my code in symfony framework:
$response = $this->getResponse();
$response->addMeta("og:image", "http://www.mydomain/upload/noticias/". $this->tbnews[0]->getImagem());
$response->addMeta("og:title", $this->tbnews[0]->getTitulo());
$response->addMeta("og:description", $this->tbnews[0]->getApoio());
$response->addMeta("og:image:width", "400px");
$response->addMeta("og:image:height", "209px");
<div class="col-md-1">
<a href="http://www.facebook.com/share.php?u=http://www.mydomain/noticias/index/<?php echo $noticia[0]->getId()?>&title=<?php echo $noticia[0]->getTitulo()?>">
<img class="fb-share-button" src="/images/fb.png" with='48px' height='48px' alt="Compartilhe essa notÃcia no seu Facebook.">
</a>
</div>
the first image is on box before share, when you confirm that.
the second image is the shared on facebook feed news, is how appear to users.
I am using a script, blazy, to change my page's images as the user scrolls down. It works fine, and I would like the user to have the possibility to share each image to his friends on Facebook. I managed to link the url to an anchor to the image. When sharing a link, a little thumbnail is displayed with the link with a short description of the image. My problem is that only the logo of my website is displayed and not the image the user wants to share.
<a class="facebook_share" href="actualites.php#237" onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href.split(location.hash||'#')[0] + '#237'),
'facebook-share-dialog',
'width=626,height=436');
return false;">
</a>
<div id="237">
<a href="content/posts/237/449.jpg" title="Voir en taille réelle">
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="content/posts/237/449_thumb.png" alt="image" width="700px">
</a>
</div>
Looking at The Open Graph protocol, I tried to create a meta tag when clicking on the Facebook share button. The result is the same -- the image I want to share is not displayed, this is because Facebook linter only looks at the HTML in the response and does not run any scripts. The content of my page always changes, I cannot write the meta tags "by hand".
<a class="facebook_share" href="actualites.php#237" onclick="
$('meta[name=og:image]').remove();
$('head').append('<meta name=\'og:image\' content=\'***/content/posts/237/449_thumb.png\'>');
window.open(...[see above]);
I have many documents on my server that are available for my visitors to download. I have a display set up like so:
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320X200" alt="ALT NAME">
<div class="caption">
<h3>Header Name</h3>
<p>Description</p>
<p align="center">Download</p>
</div>
</div>
</li>
</ul>
Now within this I currently have a image as the main display for each document. I am wanting to display a preview of the document in that space. Maybe a screenshot completed by the browser on page load of just the first page of the document.
I have tried <iframe src="assets/documents/NHSHandbook1314.doc" width="230" height="144"></iframe> instead of the image but that resulted in nothing being displayed in the iframe and the document downloading as soon as the page loads.
I would like to do this using javascript or php on page load. I basically want the browser to take a "screenshot" of the external document and then display it for the visitor to preview. I don't want them to be able to interact "read" the document from the preview, just see what they are downloading. (at least the first page)
I hope that makes sense on what I am wanting to do!
Browsers cannot render Microsoft Word documents. You will need to generate some sort of thumbnail on the server and display that.
I am using the jQueryUI dialog modal like this:
<div id="dialog-modal" title="Basic modal dialog">
<img src="#" alt="Pictures" />
</div>
I have a PHP foreach loop that displays three image icons at any given moment. The image urls are in a MySQL database. The images themselves are contained inside anchor tags, and shown as a thumbnail. The <a> contains a class called "theLink". jQuery knows to open up the dialog when you click on "theLink" (in essence, clicking on the pic).
My hope is to allow the image to be shown much larger than a thumbnail by clicking on it. And then it will dynamically transfer the image link to the modal dialog where it will be shown. So again, one modal dialog div (as seen above) just under the <body> tag. This is what I am looking for:
When you click on "theLink" it will take the PHP generated image link from the img and use it to replace the "#" in the modal div.
<a> <img src="PHP GENERATED" /> </a>
I figured out the answer by getting jQuery basics down.
I had to create a class called ImageLink in the image that is php generated. I had to use a class, not an ID because this class would be repeated three times as I have three thumbnails displayed at a time.
Keyword 'this' was important so I can point to the specific imageLink class.
<a><img src="PHP GENERATED" class="imageLink" /></a>
Then, in jQuery:
var realImage = $(this).find('.imageLink').attr("src");
$('#popUpImage').attr('src', realImage);
$('#dialog-modal').dialog('open');
I was wondering...if any coding expert out there could spare a few minutes to help me out with a tiny problem? It's something to do with the alt image text.
You see, whenever I upload an image, the alt text for it doesn't display properly. You can have a look here --> http://buywerewolfcostume.com/. This is how it's displaying in the source code:
alt="Female-vampire-small.jpg"
alt="side_farm_trap_1.jpg"
How do I get it to display like this -
alt="Female Vampire" and alt="Side Farm Trap"
I tried installing a special Alt image plugin, (the site is built on a Wordpress platform) but that didn't work. I also tried editing the image settings but that didn't work either. Is there a special line of code I should add to the CSS stylesheet?
Btw, here is the image code in my stylesheet:
.images img {padding:0 13px 0 0;}
.images img.last {padding-right:0;}
I'd really appreciate it if anyone out there could please offer some advice...
in your index file where is says
<div class="images" style="padding-top:10px; "><?php get_images(); ?></div>
You might as well just replace with your images and then you can make the alt tags what ever you want.
<div class="images" style="padding-top: 10px;">
<img alt="Female Vampire" src="http://buywerewolfcostume.com/wp-content/uploads/Female-vampire-small.jpg">
<img class="last" alt="Side Farm Trap" src="http://buywerewolfcostume.com/wp-content/uploads/side_farm_trap_1.jpg">
</div>
This is a simple matter in html:
<img src="side_farm_trap_1.jpg" alt="Side Farm Trap" >
Edit after retagging: Does Wordpress hide the option to add alt text or a title to images?
Not sure I totally follow, but does this work for you?
<img src="Female-vampire-small.jpg" alt="Female Vampire" title="Female Vampire" />
The Alt tag is for when the image is for some reason NOT there. The alt text will show up in it's place
The Title tag is displayed as a tooltip in the browser
Note: IE used to display the Alt tag as a tooltip as well, but it no longer does.
When you upload an image via WordPress, put the text you want to show up as 'alt text' both in the "Title" field and in the "Alternative Text" fields. Then click the "Insert Into Post" button.
Here's a video about uploading an image via the WordPress interface. In this video the "alternative text" field is called "caption". In newer versions of WordPress, "caption" and "alternative text" are separated out into different fields. The "caption" field shows up as a caption underneath your image; the 'alternative text' (or 'title') field is what shows up on hover/mouseover. Experiment to see what works best for you.
http://wordpress.tv/2009/01/05/embedding-photos-video-audio-into-your-posts/
Best of luck!