I want to add a different attribute value to each image, So that Image one has an attribute of image-1, Image 2 has an attribute of image-2, and so on.
Any help would be appreciated.
I am new to Drupal and have no idea where to start.
I can add a single attribute to all the images.
This is how my image.html.twig currently looks like:
<img{{ attributes.addClass(classes) }}/>
This is what I am trying to achive:
<img src="path to image" onclick="currentSlide(1)"
<img src="path to image" onclick="currentSlide(2)"
<img src="path to image" onclick="currentSlide(3)"
I got as far as this:
<img src="path to image" onclick="currentSlide(1)"
<img src="path to image" onclick="currentSlide(1)"
<img src="path to image" onclick="currentSlide(1)"
This how you can add different attributes
<img{{ attributes.setAttribute('onclick', 'currentSlide(1)') }}/>
Related
I'm trying to get a thing work for a week and no success. Really need some tips.
I have an Wordpress website built with Elementor.
This site has 10 different images with different links (they are links to stores that sell my product).
I'm trying to do something automatic in GTM that when I click on one of the stores (image with link), it shows me the variable - that is, the name of the store - that I added as an attribute in Elementor.
My question is whether it's possible to make this variable value show automatically so I don't have to create 10 different tags. I say this because I have 5 more sites in the same type of construction that I imagine I will have to do manually.
I followed this example and it almost worked - : https://www.youtube.com/watch?v=MUyJeRDKt0kThe problem is that he has a class naming, but I don't. I have only link attribute.
Something like this:
Product > Sells in Walgreens, Walmart, Costco, etc .
Attribute name and value:clickstore - wallgreensclickstore - Walmartetc.
Why I'm trying to do that? To mark as a conversion in GA4.
Any tips?Thanks a lot!
#BNazaruk
please se the image of the html
The tag fired, but doesn't populate the values automaticcaly!
#BNazaruk, sorry about the delay.
Please see below :)
That's an example with 2 stores.
Thanks a lot for the support!
<div class="elementor-element elementor-element-6511396 e-container--column e-container" data-id="6511396" data-element_type="container"> <div class="elementor-element elementor-element-4ea1df3 elementor-widget elementor-widget-image" data-id="4ea1df3" data-element_type="widget" cliquefarma="Store1" data-widget_type="image.default">
<div class="elementor-widget-container">
<div class="elementor-image">
<a href="link for store 1" target="_blank" rel="nofollow noopener" cliquefarma1="Store1">
<img decoding="async" width="220" height="157" src="storeimage1.jpg" class="attachment-large size-large" alt="" loading="lazy" /> </a>
</div>
</div>
</div>
</div><div class="elementor-element elementor-element-715f6ca e-container--column e-container" data-id="715f6ca" data-element_type="container"> <div class="elementor-element elementor-element-92cd80b elementor-widget elementor-widget-image" data-id="92cd80b" data-element_type="widget" id="cfarmacia1" cliquefarma="Store 2" data-widget_type="image.default">
<div class="elementor-widget-container">
<div class="elementor-image">
<a href="store 2 link" target="_blank" rel="nofollow noopener" cliquefarma1="Store 2">
<img decoding="async" width="220" height="157" src="storeimage2.jpg" class="attachment-large size-large" alt="" loading="lazy" /> </a>
</div>
</div>
</div>
</div>
I am using the react-rating package in my Nextjs application and I want to use a custom icon both for the emptySymbol and fullSymbol of the Rating component.
The problem is when the rating is a decimal value like 3.7, the custom icon does not show up correctly.
<Rating
start={0}
stop={5}
step={1}
direction="ltr"
readonly={true}
initialRating={3.7}
emptySymbol={
<Image src={"/assets/empty-star.svg"} width={16} height={16} alt="" />
}
fullSymbol={
<Image src={"/assets/full-star.svg"} width={16} height={16} alt="" />
}
fractions={10}
/>
And the outcome is the picture below:
It seems that react-rating make the custom icon smaller instead of filling portion of it.
What I want to achieve is the same behavior as the default icons have: (below picture)
Thanks to #DBS 's comment which somehow led me to the answer.
I am also using tailwindcss in my project. so the style max-width: 100%; was being overridden by #tailwind base; which led to this incorrect display of the "half-filled star".
And also for this specific situation, i used HTML native tag instead of the Nextjs Image component.
The final solution was:
<div className="Custom-rating">
<Rating
start={0}
stop={5}
step={1}
direction="ltr"
readonly={true}
initialRating={3.7}
emptySymbol={
<img src={"/assets/empty-star.svg"} width={16} height={16} alt="" />
}
fullSymbol={
<img src={"/assets/full-star.svg"} width={16} height={16} alt="" />
}
fractions={10}
/>
</div>
And global.css file:
.Custom-rating img {
max-width: none !important;
}
I am using SwiperJS for some galleries in my custom build Wordpress website. I am also using a plugin for lazy loading all my images, so the SwiperJS' own lazy load is disabled. However, now when the images are swiped and loading, there isn't any spinner to indicate that something is happening. Question is, how can I add this spinner with javascript myself.
Lets say now there is this rendered in the DOM:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" role="group" aria-label="3 / 7" style="width: 624px;">
<img src="path/to/src.jog" alt="" class="lazyloaded" data-ll-status="loaded">
</div>
<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="2" role="group" aria-label="4 / 7" style="width: 624px;">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="//localhost:3000/wp-content/uploads/2021/04/K0924-900x1200.jpg">
</div>
</div>
</div>
Slide, that is currently showing has the class class="swiper-slide-active" and the next one has class="swiper-slide-next"
When I swipe (or press the next arrow), the class class="swiper-slide-next" changes to class="swiper-slide-active" and its child, img tag receives the class class="lazyloading" and data-ll-status="loading"
After the image is loaded it changes to class="lazyloaded" data-ll-status="loaded"
Now, how can I track with javascript the moment, when the img tag inside the div with the class class="swiper-slide-active" receives the class class="lazyloading" or data-ll-status="loading", when that happens render inside <div class="swiper-wrapper"> </div> a spinner and when the class="lazyloading" changes to class="lazyloaded" remove the spinner?
I would greatly appreciate any help! Thank you!
I'm not sure that i understood your problem right :
You need to get a spinner when the image is loading ?
Check on https://swiperjs.com/swiper-api#lazy-loading for the "swiper-lazy-preloader".
It should look like this :
<div class="swiper">
<div class="swiper-wrapper">
<!-- Lazy image -->
<div class="swiper-slide">
<img data-src="path/to/picture-1.jpg" class="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</div>
</div>
</div>
I am building a theme and I have images displaying on the site via ACF. I am trying to get the alt text that the client enters when they upload the image. I understand that the image return format should be set to image array or ID, but not URL. Mine were set to URL quite some time ago and I am having trouble revising my code to reflect the alt text when inspected. Here is my current function that displays staff repeater.
function meetOurTeamListing() {
if(have_rows('meet_our_team')):
while(have_rows('meet_our_team')): the_row();
$staffImage = get_sub_field('staff_image');
$staffName = get_sub_field('staff_name');
$staffTitle = get_sub_field('staff_title');
$staffBio = get_sub_field('staff_bio');
$html =
'
<div class="myBtn staff-item">
<img src="'.$staffImage.'" />
<p class="staff-name">'.$staffName.'</p>
<p class="staff-title">'.$staffTitle.'</p>
</div>
<!-- The Modal -->
<div class="myModal modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="modal-header-text">
<p class="modal-name">'.$staffName.'</p>
<p class="modal-pipe">|</p>
<p class="modal-title">'.$staffTitle.'</p>
</div>
</div>
<img src="'.$staffImage.'" />
<div class="modal-body">'.$staffBio.'</div>
</div>
</div>
';
echo $html;
endwhile;
endif;
}
Obviously the sub-field would need to be converted to an image array, however simply switching the radio selector from "image url" to "image array" breaks the images on the front end. Given this context, how can I implement alt text from the WP database dynamically?
Problem solved. Thanks Nicole!
My problem was that when set up the custom fields that took images, I set them to Image URL. This is good if you just want to quickly display an image because it just returns a string. It should be set to Image Array. This results in an itemized list of key/value pairs (ie. alt text) that are accessible in the theme template.
To display your image that is set to an Image Array, here's the syntax:
<img src="'.esc_url($image['url']).'" alt="'.esc_attr($image['alt']).'" />
This works only inside of my PHP function. Alternatively, the following can be used inside a template file among the HTML:
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
I am new to Onsen UI and Monaca. I really like it a lot. I am trying to build a carousel with small images (say 6em x 6em). Using ons-carousl and ons-carousel-items, I am able to achieve it. However, there is a wide gap between consecutive images. Like only 1 small image in the visible screen. The next becomes visible only after I slide full screen. I have tried margins and all but in vain.
Please Help !
My code :-
<ons-carousel width="auto" swipeable auto-scroll auto-scroll-ratio="0.2" animation="ease-in" overscrollable class="carousel1">
<ons-carousel-item>
<img class="car1" src="./images/banner4.png" />
</ons-carousel-item>
<ons-carousel-item>
<img class="car1 img-thumbnail" src="./images/banner4.png" />
</ons-carousel-item>
<ons-carousel-item>
<img class="car1 img-thumbnail" src="./images/banner4.png" />
</ons-carousel-item>
<ons-carousel-item>
<img class="car1 img-thumbnail" src="./images/banner4.png" />
</ons-carousel-item>
</ons-carousel>
Check out the Carousel below