Pardon my knowledge. I wanted to make a slider via AFC pro, so what i did is:
I made a repeater field with image and url fields.
Am trying to insert the image url and the url field into a slider like this:
<div class="mySlides fade">
<img src="<?php the_sub_field('imagefield'); ?>" style="width:100%">
</div>
I think am doing thing wrong so many ways. Any help would be appreciated.
Make sure you are returning 'URL' and not an 'ARRAY' for image and URL fields in ACF.
Related
Good morning to everyone,
After a series of attempts and research I was able to find this example that definitively solves the possibility of creating a multimedia gallery (images, selfhosted or not videos, iframe and so on).
https://codepen.io/makshh/pen/ONMVMm
It's based on photoswipe then I should insert a description in the image. I read the documentation and inserted the tag correctly but it's previewed below the thumbnail and not in the slider.
Eg:
<div class="col-md-3">
<div class="photoswipe-item">
<a href="https://www.w3schools.com/css/img_fjords.jpg">
<img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Image description" class="img-responsive">
</a>
<figcaption>dummy description</figcaption>
</div>
</div>
At this point I tried to encapsulate (as per documentation https://photoswipe.com/documentation/getting-started.html) the image in the tag but nothing to do.
Do you have any idea how to correctly insert the caption for each image / video?
Thank You in advance anyone who can help me
Regards
Ale
When trying to load my image on laravel, the image is loaded in back-end fine. But not showing on the web page.
This is my code:
<figure class="c-card__image c-card__image--arrow c-searchresult__image"style="background-image: url('{{$image}}?{{\Carbon\Carbon::now()->timestamp}}')"></figure>
This is the code in browser:
<figure class="c-card__image c-card__image--arrow c-searchresult__image" style="background-image: url('/vendors/57/horse-11.png?1554287941')"></figure>
In my Console & Network tab (from browser) I can see the image is loaded correctly.. but it's not shown on screen..
In the code above you are not specifying any file type that may be the issue, it should be something like this horse-11.png?1554287941.png or horse-11?1554287941.png.Your $image var should only save the name, that way you can do something like this:
<figure class="c-card__image c-card__image--arrow c-searchresult__image"style="background-image: url('{{$image}}?{{\Carbon\Carbon::now()->timestamp}}'.'png')"></figure>
and the output will be something like this
<figure class="c-card__image c-card__image--arrow c-searchresult__image" style="background-image: url('/vendors/57/horse-11?1554287941.png')"></figure>
I am working in an Angular Application,In this application I am using images.Image path is getting from database through API .
When a user clicked on a product the product name is passed to the API and the Images related to the product is get as response .In my application I have maximum of five images for a specific product.
If I hover on the images it will display the big size image of it.
My HTML
<div class="row">
<img id="sm001" (mouseenter)="mouseEnter($event)" src="{{smallImages['0']['small_Images']}}" alt="img1" class="img-thumbnail" [attr.ref]="bigImages['0']['big_Images']">
<img id="sm005" (mouseenter)="mouseEnter($event)" src="{{smallImages['1']['small_Images']}}" alt="img2" class="img-thumbnail" [attr.ref]="bigImages['1']['big_Images']">
<img id="sm002" (mouseenter)="mouseEnter($event)" src="{{smallImages['2']['small_Images']}}" alt="img3" class="img-thumbnail" [attr.ref]="bigImages['2']['big_Images']">
<img id="sm003" (mouseenter)="mouseEnter($event)" src="{{smallImages['3']['small_Images']}}" alt="img4" class="img-thumbnail" [attr.ref]="bigImages['3']['big_Images']">
<img id="sm004" (mouseenter)="mouseEnter($event)" src="{{smallImages['4']['small_Images']}}" alt="img5" class="img-thumbnail" [attr.ref]="bigImages['4']['big_Images']">
</div>
What I want to do is ...
1, If the API returns only 3 images(max is 5) ,I want to hide the remaining 2 img tags (I don't want to show any alt tag contents just want totally disable the img tag).
2,if the API returned image path is not(not present in assets folder )loaded in img tag ,I want to disable that img tag.(empty or null or " " or undefined).
is it possible please guide me to solve this . Thanks
In regards to issue 1:
<div *ngFor="let image of smallImages">
<img [src]="image.small_Images" (mouseenter)="...">
</div>
The ngFor gives you access to the let <value> within that. This makes it automatically add the amount of images as are available in the array.
In regards to issue 2:
This is a little bit more difficult because this means you will have to preload the images.
You can lookup some ways to do this but I think you're talking two very different issues here, so normally you would turn it into two different questions.
In regards to an easy (JavaScript in TypeScript) way of preloading images:
const img = new Image();
img.onload = () => {
console.log('Images is loaded and exists!');
}
img.onerror = () => {
console.log('Image could not be loaded for whatever reason.');
}
img.src = 'blabla'
Of course you will need to figure out how to run this code on your results. So you're talking a big difference between component logic and template logic; therefore: This should be a different issue and a different StackOverflow question.
Rather than controlling the image display purely in HTML, you should be using "ngFor" to loop through the set of images returned by a query against your API, something like this:
<div class="row">
<ng-template *ngFor="let image of images">
<img id="{{image.id}}" (mouseenter)="mouseEnter($event)" src="{{image.url_small}}" alt="{{image.alt}}" class="img-thumbnail" [attr.ref]="{{image.url_big}}">
</ng-template>
</div>
You would then construct the images array as a property of your controller in your Typescript code when you process the results of the API that returns you the image data.
The "Tour of Heroes" covers this on their page about displaying data, here.
I could provide a more focused answer if you provided more details of the API you're making your requests against, and the actual code that is making those requests, but hopefully you can take it from here.
I have some problem with an <img> tag not working as I expect it. Here is my code:
<div *ngFor="let familyPerson of userDataModel.family" class="col-md-6 col-lg-4 family-member">
<div class="fm-wrapper">
<div class="round-frame-bg">
<div class="round-frame wow animated">
<img [src] = 'familyPerson.image'>
</div><!-- /.round-frame -->
</div><!-- /.round-frame-bg -->
<p>{{familyPerson.qualities}}</p>
</div><!-- /.hide -->
</div><!-- /.col-md-4-->
userDataModel.family is an object containing some properties of family members in json format.
This is working as expected and the value of src is correct but the image is not getting displayed in the browser.
I even checked the network activity and the image is loaded but it's still not getting displayed.
However if I replace the <img> tag with one wheresrc is harcoded, the image is getting displayed just fine.
What is going wrong and how can I fix that?
<img [src] = "familyPerson.image">
the Code above should work on my opinion. You have to use double quotes to get the value from a var.
<img src = "{{ familyPerson.image }}">
This should also work on my opinion.
http://localhost:4200/assets/images/{{familyPerson.image}} This is working because you might have saved the image with the same name in your assets/images directory. You are only getting the name of the image from server and not the whole url. You should get full image url from server like
http://localhost:3000/assets/images/abc.png
or you can get "abc.png" only and change the server path yourself.
You should keep the images to server side so that it should be available when you try to access it
I'm building a website for a school project. In a page i need a link to another page (profile.jsp) with params, because I need to do a query in that page. I've tried forward in JSP but it opens the page right away, I need to activate this with a link, or also with a button. Here I'm using windows.location but it doesn't allow me to give params as far as i now.
<div class="mask_container">
<h2><%out.println(title);%></h2>
<p onClick="JavaScript:window.location='profile.jsp';"><%out.println(autor);%></p>
<img src="img/like-white.png" class="social">
<img src="img/comment-white.png" class="social">
<img src="img/download-white.png" class="social">
</div>
how about passing your parameter values in query string as shown below, instead of <p> tag put below <a> tag to redirect to another page
<%out.println(autor);%>
You can get value of parameter on other page using request.getParameter("param") this will gives you parameter value.
May this will help you.