Hi there. I have been trying to get a simple shortcode to work, but have been unable. The shortcode is to output html to show an image in a lightbox modal, in bootstrap 4. That is, it uses bootstrap 4 classes. Here is my code:

Code: Select all

$FUNCS->register_shortcode( 'bsmodal', 'bsmodal_handler' );
   function bsmodal_handler( $params, $content=null ){
      global $FUNCS;
      extract( $FUNCS->get_named_vars(array(
   'imgsrc' => '',
   'imgalt' => '',
   'myid' => '',
   'maxwidth' => '300'
      ), $params) );
   $imgsrc = str_replace("\xc2\xa0", " ", $imgsrc);
   $imgalt = str_replace("\xc2\xa0", " ", $imgalt);
      $imgsrc = htmlspecialchars( $imgsrc, ENT_QUOTES );
      $imgalt = htmlspecialchars( $imgalt, ENT_QUOTES );
      $maxwidth = (int)$maxwidth;
   if ($maxwidth) $maxwidth=";max-width:${maxwidth}px";
      $html =<<<EOS2
<div class="modal bd-example-modal-lg" id='modal-$myid' role="dialog">
    <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="dynamic-content">
                    <img src='$imgsrc' class="img-fluid" alt="$imgalt"/>
                </div>
            </div>
       </div>
   <a><img class='modal-img' src='$imgsrc' alt='$imgalt' style='width:100%${maxwidth}' data-toggle="modal" data-target="#modal-$myid"></a>
</div>
EOS2;
    return $html;
}

I'm calling the shortcode like this, in my page:

Code: Select all

[bsmodal imgsrc='/path/to/image with spaces.jpg' imgalt='Image description' myid='id1']

The problem is that the parameters are not parsed into the different variables, but rather all appear in "imgscr".

This must be something simple that I just can't see. Can someone help please?

[KK]

Hi Lloyd,

I tested your code and it seems to be working just fine for me.

Just to confirm - are you sure you are using <cms:do_shortcodes></cms:do_shortcodes> to actually execute the shortcode on the frontend? For example, if the shortcode is inputted in a region named 'my_textarea', the code on the frontend would be this -

Code: Select all

<cms:do_shortcodes><cms:show my_textarea /></cms:do_shortcodes>

Please let me know.

Hi KK. Thanks for looking at this.

I should have been more specific. I do wrap the output clause with <cms:do_shortcodes></cms:do_shortcodes>. And the shortcode is processed by couch. I see the shortcode-generated html in the source code of the page.

After reading your message this morning, I tried opening my page with the shortcode that was non-working last night, and it worked! It was exactly the same code as the night before! But it wouldn't work for TWO of these shortcodes on the same page, so I tweaked it some, looking for the problem, and then it quit working again.

I think it may help for me to provide the shortcode invocation as I am entering it in my page, and the resultant html I see in the source code. The shortcode itself is exactly the same as in my last post.

Code: Select all

[bsmodal imgsrc='/couch1538/uploads/image/Lab report Dr. Landau 11-2-09 002.jpg' imgalt='Blood Test, before carao' myid='id1']

In the html output by the shortcode I see:

Code: Select all

<a><img class='modal-img' src=' imgsrc='/couch1618/uploads/image/Lab' alt='Blood Test, before carao' style='width:100%0' data-toggle="modal" data-target="#modal-id1"></a>

Apparently the variable 'src' gets fed the wrong data. It also choked on the space after "Lab."

[KK]

That is quite strange I inputted the same string and got the following output (which appears to be the intended one) -

Code: Select all

<img class='modal-img' src='/couch1538/uploads/image/Lab report Dr. Landau 11-2-09 002.jpg' alt='Blood Test, before carao' style='width:100%;max-width:300px' data-toggle="modal" data-target="#modal-id1">

So, are you consistently getting the same mangled output for the specific string in question? Or, is the occurrence erratic - works on occasion and not on others?

Also, please check the output by doing a view-source of the page.

Do let me know.

The line of data I posted showing strange values for the parsed variables (especially the "src" variable) was taken from the source view of the outputted page.

I plan to try getting rid of all my other shortcodes to see if that helps. And try on a fresh, empty couch site. I'll let you know what I find.

By the way, the following alternate shortcode to show an image in a lightbox works fine, including for 2 lightboxes on a single page. It doesn't reference bootstrap classes and javascript, which is a clue:

Code: Select all

$FUNCS->register_shortcode( 'modallb', 'modallb_handler' );
   function modallb_handler( $params, $content=null ){
      global $FUNCS, $CTX;

      extract( $FUNCS->get_named_vars(array( 
         'imgsrc' => '',
         'imgalt' => '',
   'myid' => 'id1',
   'maxwidth' => '300'
      ), $params) );
   $imgsrc = str_replace("\xc2\xa0", " ", $imgsrc);
   $imgalt = str_replace("\xc2\xa0", " ", $imgalt);
//      $imgsrc = htmlspecialchars( $imgsrc, ENT_QUOTES );
//      $imgalt = htmlspecialchars( $imgalt, ENT_QUOTES );
      $myid = htmlspecialchars( $myid, ENT_QUOTES );
      $maxwidth = (int)$maxwidth;
   if ($maxwidth) $maxwidth=";max-width:${maxwidth}px";

      $html =<<<EOS2
<img class='modal-img' id='$myid' src='$imgsrc' alt='$imgalt' style='width:100%${maxwidth}'>
<!-- The Modal -->
<div id="modal-$myid" class="modal-bg">
  <span class="modclose" id='modclose-$myid'>&times;</span>
  <img class="modal-content" id="modimg-$myid">
  <div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById('modal-$myid');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('$myid');
var modalImg = document.getElementById('modimg-$myid');
var captionText = document.getElementById('caption');
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementById('modclose-$myid');

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
window.addEventListener('keydown', function (event) {
  if (event.key === 'Escape') {
    modal.style.display = 'none'
  }
})
</script>
EOS2;
    return $html;
}

Here's the css required for this shortcode:

Code: Select all

/* lightbox modal css*/
.modal-img {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.modal-img:hover {opacity: 0.7;}

/* The Modal (background) */
.modal-bg {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
.modal-caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, .modal-caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.modclose {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.modclose:hover,
.modclose:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

[KK]

Had PMed you a while back; please take a look.