We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 12262
    • 40 Posts
    Hi,

    probably not the first time... but I didn't find something suitable searching the forum.

    I'd like to do the following:

    1) Add an image using TinyMCE
    2) Mark the image with a special CSS-class (e.g. myThumbnail)

    Best would be an output filter that looks for those images and replaces the code to the following:
    <a href="given image source file"><img src="phpthumbof..." ...></a>

    So an automatic creation of thumbnails - easy to access for authors as they only have to change the CSS class.

    I didn't find something similar - but basically this should work like the NoSpam Package modifying mailto: addresses.


    Any idea?

    Thanks in advance

    Thomas

    This question has been answered by hochmohr. See the first response.

      • 4172
      • 5,888 Posts
      A possible solution could be to predefine the images and its outputformat with a MIGX-TV and put placholders tags into tinyMCE where you want to show the formated images.
      This way its also possible to add as many informations as you want to each image (class,size,descriptions,titles,links......)

      some time ago I made this Tutorial which does it that way:
      http://rtfm.modx.com/display/ADDON/MIGX.Fancybox-images+with+seperate+placeholders+in+Richtext-Content
        -------------------------------

        you can buy me a beer, if you like MIGX

        http://webcmsolutions.de/migx.html

        Thanks!
        • 12262
        • 40 Posts
        Thanks Bruno17 for your reply,

        but I don't want to limit the number and places of the images within the content.

        I'm just trying to create a php script for the OnLoadWebDocument event.

        See if I can create a prototype...


        Thomas
          • 4172
          • 5,888 Posts
          did you have seen directresize-revo?
            -------------------------------

            you can buy me a beer, if you like MIGX

            http://webcmsolutions.de/migx.html

            Thanks!
            • 12262
            • 40 Posts
            Thank you... I will take a closer look at it... but still would find the output modifier nice to have... it could create thumbs that will look the same on all pages.

            Thomas

            • discuss.answer
              • 12262
              • 40 Posts
              Hi,

              found a kind of solution by myself using the output modifier:

              A "quick and dirty" code that can (must) be improved... but basically it works fine.

              <?php
              function simpleStr($matches) {
                return $matches[0];
              }
              
              function encodeImg($matches) {
                $img = $matches[0];
              
                $cnt=preg_match_all('#src="[^"]*"#', $img, $srcarr);
                if ($cnt>0)
                {
                  $src = substr($srcarr[0][0],5,-1);
                  $thumb = "<a href=\"$src\" title=\"a bigger image\"  rel=\"lightbox-1\"><img src=\"[[phpthumbof? &input=`$src` &options=`&w=120&h=120&zc=1&fltr[]=gray`]]\" /></a>";
                  return $thumb;
                }
                else 
                {
                  return $img;
                }
              }
              
              $gallery = $modx->getService('gallery','Gallery',$modx->getOption('gallery.core_path',null,$modx->getOption('core_path').'components/gallery/').'model/gallery/',$scriptProperties);
              if (!($gallery instanceof Gallery)) return '';
              
              
              $output = $modx->resource->content;
              
              $output = preg_replace_callback('#<img class="thumb" src="[^"]*" .*/>#', 'encodeImg', $output);
              
              
              $modx->resource->content= $output;
              
              return;