Tell us what you are trying to do?
The images I have looped in a custom UIKit slider need to be set to lazy load.
hidden link
UIKit does this by replacing src with data-src and adding the attribute uk-img.
EX: <img data-src="images/dark.jpg" width="1800" height="1200" alt="" uk-cover uk-img="target: !.uk-slideshow-items">
Either I need a way to alter the shortcode or get the individual bits of meta from a custom image.
Something like...
<img data-src="[types field='gallery-img' size='full' url='true'][/types]"
alt="[types field='gallery-img' alt='%%ALT%%' ][/types]"
title="[types field='gallery-img' title='%%TITLE%%' ][/types]"
uk-cover
uk-img="target: !.uk-slideshow-items">
I am of course open to any suggestions.
Is there any documentation that you are following?
I read through some other forum posts, but didn't see exactly this issue.
Is there a similar example that we can see?
N/A
What is the link to your site?
N/A
Hello,
I assume we are talking about repeating image field (Multiple instances image field), if it is, you can use [wpv-for-each] to setup your custom HTML codes, see our document:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-for-each
Iterate through multiple items in a post meta field and output the enclosed text for each item. Including Types repeating fields.
No, I already have my [wpv-for-each] set up in the sliders and they render fine. I'll post the full slider below to eliminate confusion.
For UIKit, I need to add attributes to each image in the loop.
hidden link
Replace src with data-src
Add uk-img attribute
Is there a way to make the changes to the shortcode?
OR
Is there a way to get the title and alt text of the image added to the custom img tag?
TOOLSET STANDARD
[types field='gallery-img' title='%%TITLE%%' alt='%%ALT%%' size='full' separator=', '][/types]
Needs data-src and uk-img attributes in the shortcode.
<div class="uk-position-relative" index="1" tabindex="-1" uk-slider="center: true" aria-roledescription="carousel">
<ul class="uk-slider-items uk-grid uk-grid-match" uk-lightbox aria-label="product images for [wpv-post-title output='sanitize']">
[wpv-for-each field="wpcf-gallery-img"]
<li class="uk-width-2-5@s">
<div class="uk-cover-container">
<a href="[types field='gallery-img' size='full' separator=', ' url='true'][/types]" aria-label="Open Gallery Image in Lightbox">
[types field='gallery-img' title='%%TITLE%%' alt='%%ALT%%' size='full' separator=', '][/types]
</a>
</div>
</li>
[/wpv-for-each]
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous" aria-label="Previous Gallery Image" title="Previous Slide Button"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next" aria-label="Next Gallery Image" title="Next Slide Button"></a>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin" aria-label="individual icons for each nav element"></ul>
</div>
DEFERRED IMAGES
<img data-src="[types field='gallery-img' size='full' separator=', ' url='true'][/types]" uk-img="target: !.uk-slideshow-items">
Needs Alt and Title associated with the custom image.
<div class="uk-position-relative" index="1" tabindex="-1" uk-slider="center: true" aria-roledescription="carousel">
<ul class="uk-slider-items uk-grid uk-grid-match" uk-lightbox aria-label="product images for [wpv-post-title output='sanitize']">
[wpv-for-each field="wpcf-gallery-img"]
<li class="uk-width-2-5@s">
<div class="uk-cover-container">
<a href="[types field='gallery-img' size='full' separator=', ' url='true'][/types]" aria-label="Open Gallery Image in Lightbox">
<img data-src="[types field='gallery-img' size='full' separator=', ' url='true'][/types]" uk-img="target: !.uk-slideshow-items">
</a>
</div>
</li>
[/wpv-for-each]
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous" aria-label="Previous Gallery Image" title="Previous Slide Button"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next" aria-label="Next Gallery Image" title="Next Slide Button"></a>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin" aria-label="individual icons for each nav element"></ul>
</div>
And of course, other ideas and suggestions are welcome.
Hello,
Please check our document the "%%TITLE%%, %%ALT%%, %%CAPTION %%" placeholders work only in Types shortcode [types] ... [/types], and Types shortcode can not output the attachment Alt and Title fields independently.
https://toolset.com/documentation/customizing-sites-using-php/functions/#image
so you will need to consider custom codes, for example:
https://toolset.com/forums/topic/alt-text-output-for-images-from-custom-field/
For your reference.
I thought this issue seemed familiar.
EDIT: Closed the ticket too soon.
I'll escalate this to our 2nd Tier as a feature request. It will be evaluated and hopefully will make it to the developer's list.
In the meantime, I built a custom shortcode that pulls the information from the image of the custom field.
It is not suited for repeatable image fields, but it explains how we can get those pieces of information from the image.
Is this being worked on as a built-in feature currenlty?
Since this solution isn't suitable for repeating images, do you have a function that is suitable for repeating images?
Please see edited remarks in the above post.
No, as I mentioned above, there isn't such kind of built-in feature.
For repeatable image fields, you can try the solution of this thread:
https://toolset.com/forums/topic/how-to-retrieve-image-caption-alt-text-and-description/#post-227840
If you need more assistance for it, please provide a test site with the same problem, also point out the problem page URL, and where I can edit your custom PHP codes. I need a live website to test and debug, thanks
You're good to go. The Template to look at on the backend is "Series Model Set Prime Content Template" (the slider html is at the top) and the function can be found in Toolset Settings -> Custom Code -> specialrepeatingimageinfo.
Thanks
I can login into your website, but do not see the "Toolset" menu item, unable to modify the PHP codes, please check it, make sure your website is valid to debug with user "Toolset Support", then update here, thanks
Hi, please try it now. I think there was one other security exclusion.
I assume you are going to display same full image size in front-end, so I have done below modifications in your website, edit the content template "Series Model Set Prime Content Template":
hidden link
Change the shortcode from:
[get_media_info field='gallery-img']
To:
[get_media_info field='gallery-img' display_size='full']
Please test again, check if it is what you want, thanks
Thanks, I wouldn't have thought to include that! The issue should be resolved, if I run into a new complication I'll start a new ticket. Thanks again.
I tried to close this ticket and give you a positive review, but I keep getting "ERROR: Are you sure you wanted to do that?"
Hi,
Thanks for writing back and glad that Luo was able to help.
He is on vacation and will be back tomorrow, but have you tried to set the ticket as resolved after logging off and then logging in again?
regards,
Waqar
