Hey team,

I have a question if it is possible to add the clickable links (that would forward user to the full gallery for said project) when using the Serano Carousel element or any other gallery. On the preview of theme it is labeled as Content Looped Carrousel.

http://preview.themeforest.net/item/serano-creative-portfolio-theme/full_screen_preview/47412371

Tried adding the link manually via html into the code for each carrousel item/gallery item but it never saves with the <a href="..."> gallery element </a> and overwrite into the defaul html code on save.

Is there a workaround please so images are clickable for forwarding into subpage/other page in this theme?

<div class="wp-block-serano-gutenberg-carousel clapat-slider-wrapper content-slider light-cursor small-looped-carousel autocenter has-animation" data-delay="0"><div class="clapat-slider"><div class="clapat-slider-viewport"><!-- wp:serano-gutenberg/carousel-image {"img_url":"http://radekmusil.com/wp-content/uploads/2023/10/Svatba-201-scaled.jpeg","img_id":2896} -->
[carousel_slide img_url="http://radekmusil.com/wp-content/uploads/2023/10/Svatba-201-scaled.jpeg" alt=""][/carousel_slide]
<!-- /wp:serano-gutenberg/carousel-image -->
<!-- wp:serano-gutenberg/carousel-image {"img_url":"http://radekmusil.com/wp-content/uploads/2023/10/my-35-scaled.jpeg","img_id":2900} -->
[carousel_slide img_url="http://radekmusil.com/wp-content/uploads/2023/10/my-35-scaled.jpeg" alt=""][/carousel_slide]
<!-- /wp:serano-gutenberg/carousel-image -->
<!-- wp:serano-gutenberg/carousel-image {"img_url":"http://radekmusil.com/wp-content/uploads/2023/10/square-e1698429397313.png","img_id":2906} -->
[carousel_slide img_url="http://radekmusil.com/wp-content/uploads/2023/10/square-e1698429397313.png" alt=""][/carousel_slide]
<!-- /wp:serano-gutenberg/carousel-image -->
<!-- wp:serano-gutenberg/carousel-image {"img_url":"http://radekmusil.com/wp-content/uploads/2023/08/image04.jpg","img_id":2782} -->
[carousel_slide img_url="http://radekmusil.com/wp-content/uploads/2023/08/image04.jpg" alt=""][/carousel_slide]
<!-- /wp:serano-gutenberg/carousel-image --></div></div><div class="clapat-controls"><div class="clapat-button-next slider-button-next"></div><div class="clapat-button-prev slider-button-prev"></div><div class="clapat-pagination"></div></div></div>

Lets say this is the default code of carrousel gallery. Should I place the <a href="link to full gallery on click"> xyz </a> in before and after the below line??

[carousel_slide img_url="http://radekmusil.com/wp-content/uploads/2023/10/Svatba-201-scaled.jpeg" alt=""][/carousel_slide]

If so I tried to "update" the page after modifyin the html code of that element and it saves as default code, so the <a> links werent saved properly?
Thank you for guidance, I have very little experience in html so apologize if newbie mistake, but never encountered the [carousel slide img_url=souce...] kind of coding.

Tom

Oh now I undestand! The more simple method than I thought, to edit whole page at the end and copy paste the html into editor. We will try, thank you for help during the weekend.

Cheers

Hey team,

Editing the code as below and pasting into the gallery works great for <a> links. Firstly I noticed the picture got saved twice into carrousel scroll items (4 uploads, 8items to scroll) and only the first one had the link? Also the formating for fillin the space as gallery item properly is no longer working.

<div class="light-section-container content-max-width">
   <div class="wp-block-serano-gutenberg-container content-row light-section full row_padding_top row_padding_bottom change-header-color has-animation animated" data-bgcolor="#ffffff" style="text-align: left; translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1;">
      <div class="wp-block-serano-gutenberg-carousel clapat-slider-wrapper content-slider light-cursor small-looped-carousel autocenter has-animation fw animated" data-delay="0" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1;">
         <div class="clapat-slider">
            <div class="clapat-slider-viewport">
               
               <a href="http://www.google.com" target="_blank">
               <div class="clapat-slide clapat-slide-clone" style="left: -400%; transform: translate(0px, 0px);">
               <img src="http://radekmusil.com/wp-content/uploads/2023/10/Svatba-201-scaled.jpeg" alt="">
               </div>
               </a>
               
               <a href="http://www.seznamzpravy.cz" target="_blank">
               <div class="clapat-slide clapat-slide-clone clapat-slide-prev-three" style="left: -300%; transform: translate(0px, 0px);"><img src="http://radekmusil.com/wp-content/uploads/2023/10/my-35-scaled.jpeg" alt=""></div>
               </a>
               
               <a href="http://www.google.sk" target="_blank">
               <div class="clapat-slide clapat-slide-clone clapat-slide-prev-two clapat-slide-visible" style="left: -200%; transform: translate(0px, 0px);"><img src="http://radekmusil.com/wp-content/uploads/2023/10/square-e1698429397313.png" alt=""></div>
               </a>
               
               <a href="http://www.google.cz" target="_blank">
               <div class="clapat-slide clapat-slide-clone clapat-slide-visible clapat-slide-prev" style="left: -100%; transform: translate(0px, 0px);"><img src="http://radekmusil.com/wp-content/uploads/2023/08/image04.jpg" alt=""></div>
               </a>
               
               
            </div>
         </div>
         <div class="clapat-controls">
            <div class="clapat-button-next slider-button-next"></div>
            <div class="clapat-button-prev slider-button-prev"></div>
            <div class="clapat-pagination" style="opacity: 1;">
               <div class="clapat-pagination-bullet clapat-pagination-bullet-active">
                  <div class="parallax-wrap" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">
                     <div class="parallax-element" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">
                        <svg class="fp-arc-loader" width="20" height="20" viewBox="0 0 20 20">
                           <circle class="path" cx="10" cy="10" r="5.5" fill="none" transform="rotate(-90 10 10)" stroke="#FFF" stroke-opacity="1" stroke-width="2px"></circle>
                           <circle class="solid-fill" cx="10" cy="10" r="3" fill="#FFF"></circle>
                        </svg>
                     </div>
                  </div>
               </div>
               <div class="clapat-pagination-bullet clapat-pagination-bullet-next">
                  <div class="parallax-wrap">
                     <div class="parallax-element">
                        <svg class="fp-arc-loader" width="20" height="20" viewBox="0 0 20 20">
                           <circle class="path" cx="10" cy="10" r="5.5" fill="none" transform="rotate(-90 10 10)" stroke="#FFF" stroke-opacity="1" stroke-width="2px"></circle>
                           <circle class="solid-fill" cx="10" cy="10" r="3" fill="#FFF"></circle>
                        </svg>
                     </div>
                  </div>
               </div>
               <div class="clapat-pagination-bullet">
                  <div class="parallax-wrap">
                     <div class="parallax-element">
                        <svg class="fp-arc-loader" width="20" height="20" viewBox="0 0 20 20">
                           <circle class="path" cx="10" cy="10" r="5.5" fill="none" transform="rotate(-90 10 10)" stroke="#FFF" stroke-opacity="1" stroke-width="2px"></circle>
                           <circle class="solid-fill" cx="10" cy="10" r="3" fill="#FFF"></circle>
                        </svg>
                     </div>
                  </div>
               </div>
               <div class="clapat-pagination-bullet clapat-pagination-bullet-prev">
                  <div class="parallax-wrap">
                     <div class="parallax-element">
                        <svg class="fp-arc-loader" width="20" height="20" viewBox="0 0 20 20">
                           <circle class="path" cx="10" cy="10" r="5.5" fill="none" transform="rotate(-90 10 10)" stroke="#FFF" stroke-opacity="1" stroke-width="2px"></circle>
                           <circle class="solid-fill" cx="10" cy="10" r="3" fill="#FFF"></circle>
                        </svg>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Or should I edit and paste the entire <html> ...... </html> page into editor? Or whole <div class="cd_index cd-main-content">...<div> ?

In the original code of element when switched to html view of wordpress editor? Adding <a> before [clapat_slowed_text_pin_image img_url="http://rad.....][/clapat_slowed_text_pin_image] and </a> here doesnt save the element with the links for me. It always default to the below code.

<!-- wp:serano-gutenberg/slowed-text-pin-gallery-image {"gallery_image":"http://radekmusil.com/wp-content/uploads/2023/10/Marcell-117-scaled.jpeg","gallery_image_id":2901} -->
[clapat_slowed_text_pin_image img_url="http://radekmusil.com/wp-content/uploads/2023/10/Marcell-117-scaled.jpeg" img_id="2901"][/clapat_slowed_text_pin_image]
<!-- /wp:serano-gutenberg/slowed-text-pin-gallery-image -->

That would be the code from 40minutes ago? If I add link there it doesnt work properly for formating or duplicates of images? It works great on single image and user gets to new tab/page, but formating and duplicates arent workin that way.

Tried now and it only works on the very center of the "picture frame" and not on duplicates?

<div class="clapat-slide clapat-slide-clone" style="left: -400%; transform: translate(0px, 0px);">
               <a href="http://www.google.com" target="_blank">
               <img src="http://radekmusil.com/wp-content/uploads/2023/10/Svatba-201-scaled.jpeg" alt="">
               </a>
               </div>

current test code page:

http://radekmusil.com/about-3/

center with a link

<div class="clapat-slide clapat-slide-clone" style="left: -400%; transform: translate(0px, 0px);">
               <a href="http://www.google.com" target="_blank">
               <div height="200px">
               <img src="http://radekmusil.com/wp-content/uploads/2023/10/Svatba-201-scaled.jpeg" alt="">
               </div>
               </a>
               </div>

works okay for link over whole picture clickable, but breaks the functionality of scrolling sadly