I'm trying to customise the default functionality of the Wordpress media uploader. All I want to do is access the caption meta data for each image and overlay it on the thumbnail.
I've looked through the output and cant see where the image metadata is saved so i'm assuming it's AJAXed in on selection.
I've read a few articles about creating custom modals using wp.media() which i have got to work but i specifically need to hook into the default modal and then loop through each image, access meta data and then append this to the thumbnail.
Just a pointer on how to access the metadata when first opening the modal would be very helpful
EDIT+++
If i use the following code, when i select an image i can access all of the data i require
_media.on('select', function() {
var attachment = _media.state().get('selection').first().toJSON();
console.log(attachment);
});
I need the same output but from within _media.on('open'...) so i can loop through all images and access their metadata from within the modal
EDIT 2+++
So when the modal is opened, an AJAX request is sent which returns a JSON array of the meta data for the currently loaded images. The order isn't the same as the image order in the modal but this is promising. When you scroll, another request is sent andmore images are loaded, with metadata in another JSON array
I have used wp_prepare_attachment_for_js before for something similar from what I recall.
This will allow you to access the caption for your images which seems to be what you are looking for (I hope). You can find out more about it here in the Codex
Just use attachment.caption, for example if you want to grab the caption and put it as the value of a field:
_media.on('select', function() {
var attachment = _media.state().get('selection').first().toJSON();
console.log(attachment);
$('#field').val(attachment.caption);
});
You may see this webmaster-source.com article for further reference.
Related
I want to show the image of the corresponding user in my table. But when i do a v-for it only shows the image name in a string format in the table. How could i show the image rather than the text itself? Because in laravel blade i can do a foreach loop and it shows the image directly. What should I do? Thanks a lot
My table
My axios code and v-for
<tr v-for="teacher in teachers" :key="teacher.id">
<td>{{teacher.id}}</td>
<td>{{teacher.image}}</td>
</tr>
methods:{
getTeachers(){
axios.get('getTeachers')
.then((res)=>{
this.teachers = res.data
})
.catch((e)=>{
console.log(e)
})
}
}
You need to add an image tag and then provide the full path of the image as source. For example:
<img :src="'/path/to/images/folder/'+teacher.image">
If you are using Laravel's inbuilt storage, I recommend that you should return the full path of the image from your controller, i.e. use Storage::url() to get the full URL for the image.
You need to wrap the image url inside appropriate HTML tag.
Something in the lines of:
<img :src="teacher.image">
When doign this you are adding image into your HTML page and syntax ':src' is used to bind the html attribute 'src' with vue variable (in this case your image link/name).
If the image is not showing after that your link is invalid. Check the image url, and see if you can get it directly from the browser. If server is not returning appropriate image at that url than it will not work. Use 'alt' attribute to set text instead of image to see if this is happening.
The issue is the way you saved your image. you saved the only image name in database, not the path. whenever you upload something via form in laravel. it keeps the file in public/storage.
Run the command first
php artisan storage:link
heres what you can do. use below code to save your image in db when you submitting form( i assume you are registering teachers in the system )
after that your image column will contain the total path of your image.
if(!empty($request->file('image_file'))){
$path = storage_path('public/teacher-images/');
if(!File::isDirectory($path)){
File::makeDirectory($path, 0755, true, true);
}
$image_path = Storage::disk('public')->put('teacher-images', $request->file('image_file'));
$teacher->image = isset($image_path) ? "storage/".$image_path : "";
}
after that you can use that picture to show on your template by appending serverurl
You are trying to show an image, therefore, you should use:
<img v-bind:src="teacher.image" />
Your server cannot find your image only the file name. So I recommend you to pass full path of your image link from controller. using asset() / Storage::url() .
its good way.
I had a problem with Plone and Fancybox not playing nicely on News Items. So, for News Items, the image is uploaded directly with the content item and is stored at http://yoursite.com/the-news-item/image. The image is displayed with a default link to /the-news-item/image_view_fullscreen.
I have Fancybox working on most other images fine, but couldn't get the .js to work with this image. My .js call looked like:
<script type="text/javascript">
$(document).ready(function() {
/* Simple image gallery. Uses default settings */
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif'],a[href$='/image']").attr('rel', 'gallery').fancybox();
});
</script>
And I changed the default link to /the-news-item/image. With this method, the link remained as just a static link that opened up the image in a new page.
Nachtigall's proposal works, if the link hasn't been customized.
As you have customized it to '/image', add that to your href-selector-chain and additionally tell fancybox which MIME-Type it is dealing with, by applying the class 'fancybox.image' to the link in the news-item's template.
Quoting the docs:
"Script uses the href or data-fancybox-href attribute of the matched elements to obtain the location of the content and to figure out content type you want to display. You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc)"
Here is my scenario:
I am having a page with pagination and enhanced with infinite-scroll
The page has a list of items, where each item looks like this in smarty
<div id="link-{index}">
<div align="left"><a href={$url}></div><div alight="right"><img src="" id="{$url}"></div>
</div> <script>imager({$url});</script>
I am using a service to dynamically grab image src for a given URL and append it to the image by defining imager(x){ document.getElementById(x).src = service(x).image; }
Now this works, as in shows correct images along side URLs as long as normal pagination is used. Doesn't work for page 2 onwards with infinite scroll as it uses JQuery and that parses out the imager JS script for each item.
I am stuck with trying to create a callback function for infinite scroll that will do what imager does but after a page is loaded but I am unable to get it to work.
Any tips will be appreciated. Thank you
In the callback for when a new page is loaded, you can do something like this:
$('img:not([src])').each(function() {
$(this).attr('src', service($(this).attr('id')).image);
});
This assumes that the only images without a source are those that were just loaded by the infinite scroller. If the widget provides parameters to the callback that tells it which parts of the DOM were just paged in, you may be able to use that to narrow down further; the second argument to a jQuery selector is the context to search.
This is probably a really simple one but I couldn't find the answer.
I have the following JavaScript/jQuery code where I am trying to create loading messages:
// preload an image to use for dynamic loading icon whenever requested
$(document).ready(function() {
var loadingIcon = document.createElement('img');
loadingIcon.src = '../images/ajax-loader.gif';
window.loadingIcon = loadingIcon; // chache in global var
});
I wanted to cache the image on load so I'm not requesting it each time I want a loading message. Am I actually acheiving this with the above code?
The idea is that there's a lot of dynamic content on the page, and at any time I might have several different loading icons active.
I add the loading icon wherever with:
$('#myElem').appendChild(window.loadingIcon);
This doesn't actually work though, when I try to show a new loading icon, it just moves the previous one, so I can't have more than one on the page at a time.
I'm assuming I need to clone the element?
I tried to wrap the element in a jQuery object to use clone with $(window.loadingIcon).clone() but that didn't work (the function errored).
You could clone the element, yes. But you can just as well create a new <img> element. If the image src has already been loaded by the browser, the image data will be cached and no further network-load will occur. You don't need to cache the element itself to cache the resource it's pointed at.
Try creating the image as a jQuery object:
var $loadingIcon = $('<img src="../images/ajax-loader.gif" />');
And then you should be able to clone it when you need to use it:
$('#myElem').append( $loadingIcon.clone() );
javascript has a native cloneNode method, at least in IE7, which is all I have at the moment. I'm pretty sure it's cross browser.
this should do what you want:
$('#myElem').appendChild(window.loadingIcon.cloneNode());
I'm trying to implement a simple rollover tooltip for images on a page where when you roll over an image, you get a little tooltip window and have the contents loaded from a database via AJAX.
I can hack this together quickly but I wanted an elegant way of doing this without using any inline JS.
So my question is: If I capture the rollover event inside my external .js file, how do I pass it the database ID?
I'm using jQuery so I would do something like this:
$('.item_roll').mouseover(function() {
//show tooltip and load ajax content
}
and my HTML would be something like this:
<img src="thumb.png" class="item_roll" />
Without calling a function from the img tag, how do I send the JS call above the database id? I hope that makes sense.
Thanks.
I recommend having both a class and an id in the image tag:
<img src="thumb.png" id="id_28436379" class="item_roll" />
Then in your jQuery event, you can access that like so:
$(".item_roll").mouseover(function(event){
alert( event.target.id.split("_")[1] ); // displays 28436379
});
This should let you access the database id by making it the id of the image tag.
EDIT: After reading some helpful comments, I've changed my answer so that the id does not start with an integer, since this is nonstandard and might not work in all browsers. As you can see, the split/[] code extracts the id number from the id string.