Loading ...
Sorry, an error occurred while loading the content.

help with "Images to HTML" clip needed

Expand Messages
  • Mike Breiding
    Greetings, I am using a modified version of the Images to HTML clip from the Utilities Lib. Here is the modified version:
    Message 1 of 15 , Jan 2, 2007
    • 0 Attachment
      Greetings,
      I am using a modified version of the Images to HTML clip from the Utilities
      Lib.
      Here is the modified version: http://mbreiding.us/clip/images2HTML.txt

      I use it to generate photo pages like this one:
      http://mbreiding.us/clip/resize/

      What I would like to be able to accomplish is automatically adding linked
      files to the images.

      The clip currently adds all images from the selected directory. I would
      also like the clip to add the linked files from a specific directory
      automatically.

      The HTML generated would then be:
      <a href="silver_rvrhrez01.jpg">
      <img src="silver_rvr01.jpg" width="466" height="311" title=" Bald
      Cypress knees and roots " alt="Bald Cypress kness and roots" />
      </a>

      And so on, for each image added there would be a link to the high
      resolution image.

      Make sense? Possible?

      TIA

      -Mike

      [Non-text portions of this message have been removed]
    • Mike Breiding
      I had no feed back this so I am resending in hopes of some. Thanks, -Mike =============== Greetings, I am using a modified version of the Images to HTML clip
      Message 2 of 15 , Jan 14, 2007
      • 0 Attachment
        I had no feed back this so I am resending in hopes of some.
        Thanks,
        -Mike

        ===============
        Greetings,
        I am using a modified version of the Images to HTML clip from the Utilities
        Lib.
        Here is the modified version: http://mbreiding.us/clip/images2HTML.txt

        I use it to generate photo pages like this one:
        http://mbreiding.us/clip/resize/

        What I would like to be able to accomplish is automatically adding linked
        files to the images.

        The clip currently adds all images from the selected directory. I would
        also like the clip to add the linked files from a specific directory
        automatically.

        The HTML generated would then be:
        <a href="silver_rvrhrez01.jpg">
        <img src="silver_rvr01.jpg" width="466" height="311" title=" Bald
        Cypress knees and roots " alt="Bald Cypress kness and roots" />
        </a>

        And so on, for each image added there would be a link to the high
        resolution image.

        Make sense? Possible?

        TIA

        -Mike

        [Non-text portions of this message have been removed]
      • Alan_C
        On Sunday 14 January 2007 13:22, Mike Breiding wrote: [ . . ] ... This adds complexity if you want to source yet another folder of jpg that you re not
        Message 3 of 15 , Jan 14, 2007
        • 0 Attachment
          On Sunday 14 January 2007 13:22, Mike Breiding wrote:
          [ . . ]
          > What I would like to be able to accomplish is automatically adding linked
          > files to the images.
          >
          > The clip currently adds all images from the selected directory. I would
          > also like the clip to add the linked files from a specific directory
          > automatically.

          This adds complexity if you want to source yet another folder of jpg that
          you're not currently sourcing.
          >
          > The HTML generated would then be:
          > <a href="silver_rvrhrez01.jpg">
          > <img src="silver_rvr01.jpg" width="466" height="311" title=" Bald
          > Cypress knees and roots " alt="Bald Cypress kness and roots" />
          > </a>
          >
          > And so on, for each image added there would be a link to the high
          > resolution image.

          ; your current clip gets the file name here
          ; after file name is got, before put the name into the html markup
          ; do next stuff prior to put the name into the html
          ; next is an example based on silver_rvr01.jpg

          ^!Set %hirezimagename%=^%imagename%

          ; ^!Info shows: silver_rvr01.jpg in ^%hirezimagename%

          ; here, use the strformat funtion on ^%hirezimagename% to lop off the .jpg

          ; ^!Info shows: silver_rvr01 in ^%hirezimagename%

          ^!Set %hirezimagename%=^%hirezimagename%_hrez.jpg

          ; ^!Info shows: silver_rvr01_hrez.jpg in ^%hirezimagename%

          ; clips fomer image insertion into html
          ;Insert image tag and information into document
          ^!InsertHtml <img src="^$StrLower("^%imagename%")$" width="^%ImgWidth%"
          height="^%ImgHeight%" title="^%TITLE%" alt="^%ALT%" />^p<p
          style="text-align: center;">^%ImageName% (^%ImgWidth%x^%ImgHeight%;
          ^$GetFileSize(^%ImageFullName%)$ bytes)</p>^P^p

          ; new, replacement image insertion into html
          ;Insert image tag and information into document
          ^!InsertHtml <a href="^%hirezimagename%"> <img
          src="^$StrLower("^%imagename%")$" width="^%ImgWidth%" height="^%ImgHeight%"
          title="^%TITLE%" alt="^%ALT%" /></a>^p<p style="text-align:
          center;">^%ImageName% (^%ImgWidth%x^%ImgHeight%;
          ^$GetFileSize(^%ImageFullName%)$ bytes)</p>^P^p

          --

          Instead of silver_rvrhrez01.jpg you'd need silver_rvr01_hrez.jpg

          for naming method/way for the hi rez images.

          But in so doing, you could do just as above (create a hirez variable and then
          modify that variable so that it then *becomes* the hi rez variable.

          Unless you have other need to source the hi rez images then this is easy it
          eliminates the need to source hi rez folder into the clip. Source them could
          be done but it adds complexity.

          I did not test any code.

          --
          Alan.
        • Don - HtmlFixIt.com
          ... Mike, Very easy if the only change is to add hrez to the image name for the link. Is there always a high res image? They are in the same directory
          Message 4 of 15 , Jan 15, 2007
          • 0 Attachment
            Mike Breiding wrote:
            > I had no feed back this so I am resending in hopes of some.
            > Thanks,
            > -Mike
            >
            > The HTML generated would then be:
            > <a href="silver_rvrhrez01.jpg">
            > <img src="silver_rvr01.jpg" width="466" height="311" title=" Bald
            > Cypress knees and roots " alt="Bald Cypress kness and roots" />
            > </a>

            Mike,

            Very easy if the only change is to add hrez to the image name for the
            link. Is there always a high res image?
            They are in the same directory apparently as well?

            Someone can easily do the regex probably ... replace [##].jpg with
            hrez\1 it seems to me. Are they ever .gif's or other image types?
            Can you do regex with variables? I assume the answer is yes.

            I'll try to look at the actual clip tomorrow.

            Don
          • Sheri
            ... Mike, Don, Assuming all that is needed is to prepend like-named links for each img src (with hrez inserted before the digits in the file name) adding
            Message 5 of 15 , Jan 15, 2007
            • 0 Attachment
              --- In ntb-clips@yahoogroups.com, "Don - HtmlFixIt.com" <don@...> wrote:

              >
              >
              > Mike,
              >
              > Very easy if the only change is to add hrez to the
              > image name for the link. Is there always a high res
              > image? They are in the same directory apparently as
              > well?
              >
              > Someone can easily do the regex probably ... replace
              > [##].jpg with hrez\1 it seems to me. Are they ever
              > .gif's or other image types? Can you do regex with
              > variables? I assume the answer is yes.
              >
              > I'll try to look at the actual clip tomorrow.
              >
              > Don


              Mike, Don,

              Assuming all that is needed is to prepend like-named links for each
              img src (with "hrez" inserted before the digits in the file name)
              adding this replace command (NoteTab version 5.1) to the bottom of the
              clip should do the job.

              ;next is one long line
              ^!Replace "^<img src=(\x22[^\d]+)(\d+\.jpg\x22)" >> "<a
              href=$1hrez$2>\r\n$0" RASW0

              Regards,
              Sheri
            • Mike Breiding
              ... Thanks, Alan. I will give this a try. -Mike [Non-text portions of this message have been removed]
              Message 6 of 15 , Jan 15, 2007
              • 0 Attachment
                At 01:31 AM 1/15/2007 , you wrote:

                >On Sunday 14 January 2007 13:22, Mike Breiding wrote:
                ><trimmed>
                >--
                >
                >Instead of silver_rvrhrez01.jpg you'd need silver_rvr01_hrez.jpg
                >
                >for naming method/way for the hi rez images.
                >
                >But in so doing, you could do just as above (create a hirez variable and then
                >modify that variable so that it then *becomes* the hi rez variable.
                >
                >Unless you have other need to source the hi rez images then this is easy it
                >eliminates the need to source hi rez folder into the clip. Source them could
                >be done but it adds complexity.
                >
                >I did not test any code. Alan.

                Thanks, Alan. I will give this a try.
                -Mike


                [Non-text portions of this message have been removed]
              • Don - HtmlFixIt.com
                ... Exactly where I was heading with my off-list email. Even better pre-pend it: hrez_silver_rvr01.jpg If you are using ezthumbnails you can easily do that
                Message 7 of 15 , Jan 15, 2007
                • 0 Attachment
                  Mike Breiding wrote:
                  >>
                  >> Instead of silver_rvrhrez01.jpg you'd need silver_rvr01_hrez.jpg
                  >>
                  >> for naming method/way for the hi rez images.
                  >>
                  >> But in so doing, you could do just as above (create a hirez variable and then
                  >> modify that variable so that it then *becomes* the hi rez variable.
                  >>
                  > Thanks, Alan. I will give this a try.
                  > -Mike

                  Exactly where I was heading with my off-list email. Even better
                  pre-pend it:
                  hrez_silver_rvr01.jpg

                  If you are using ezthumbnails you can easily do that when making the
                  high res and the thumbnail.
                • Alan_C
                  ... ... Gots to check out possibilities when doing this. Or else if you are like me you ll do it the hard way only to realize later that gee, if I
                  Message 8 of 15 , Jan 15, 2007
                  • 0 Attachment
                    On Monday 15 January 2007 09:31, Don - HtmlFixIt.com wrote:
                    > Mike Breiding wrote:
                    > >> Instead of silver_rvrhrez01.jpg you'd need silver_rvr01_hrez.jpg
                    > >>
                    > >> for naming method/way for the hi rez images.
                    <snip>
                    >
                    > Exactly where I was heading with my off-list email. Even better
                    > pre-pend it:
                    > hrez_silver_rvr01.jpg
                    >
                    > If you are using ezthumbnails you can easily do that when making the
                    > high res and the thumbnail.

                    Gots to check out possibilities when doing this. Or else if you are like me
                    you'll do it the hard way only to realize later that "gee, if I would have
                    done this instead" then my (clip writing) would have been so much
                    faster/easier.

                    Approximations/musings of/on the idea or regex capture come next.

                    Don's idea of prepend is easy/easiest though -- no regex needed -- just:

                    ^!InsertHtml <a href="hrez_^%imagename%"> <img
                    src="^$StrLower("^%imagename%")$"

                    (notice the hrez_ part above). You don't even need the work of modifying a
                    variable like I earlier mentioned. Easy. (too easy as in "I'll have to look
                    for a harder way to do it" :-) )
                    --

                    Or, (more work to code it, the next?):

                    ;Insert image tag and information into document
                    ^!InsertHtml <a href="^%imagename%"> <img
                    src="^$StrLower("^%imagename%")$" width="^%ImgWidth%" height="^%ImgHeight%"  
                    title="^%TITLE%" alt="^%ALT%" /></a>^p<p style="text-align:
                    center;">^%ImageName% (^%ImgWidth%x^%ImgHeight%;
                    ^$GetFileSize(^%ImageFullName%)$ bytes)</p>^P^p

                    Or, you can do like in the above (notice in above the) <a href="^%imagename%">
                    (with </a> too)

                    Then, after the html markup is created, run a regex replace on the

                    <a href="silver_rvr01.jpg">

                    (Sheri's regex on this is *way_much* better)

                    ^!Replace "(<a href=.+)\." >> "$1hrez" RIWAS

                    That probably won't work -- I think it's missing a look ahead option. If 4.95
                    Notetab then use curly brackets instead of parenthesis and use /1 instead of
                    $1

                    But the idea is to capture up to but not the dot in the filename. Then the
                    right side of the replace puts the captured stuff back in and also adds hrez.
                    Like so:

                    <a href="silver_rvr01hrez.jpg">

                    --
                    Alan.
                  • Mike Breiding
                    ... Yes, I can do that with the batch re-naming utility in ImageViewer. -Mike www.EpicRoadTrips.us [Non-text portions of this message have been removed]
                    Message 9 of 15 , Jan 15, 2007
                    • 0 Attachment
                      At 12:31 PM 1/15/2007 , you wrote:
                      >Mike Breiding wrote:
                      > >>
                      > >> Instead of silver_rvrhrez01.jpg you'd need silver_rvr01_hrez.jpg
                      > >>
                      > >> for naming method/way for the hi rez images.
                      > >>
                      > >> But in so doing, you could do just as above (create a hirez variable
                      > and then
                      > >> modify that variable so that it then *becomes* the hi rez variable.
                      > >>
                      > > Thanks, Alan. I will give this a try.
                      > > -Mike
                      >
                      >Exactly where I was heading with my off-list email. Even better
                      >pre-pend it:
                      >hrez_silver_rvr01.jpg
                      >
                      >If you are using ezthumbnails you can easily do that when making the
                      >high res and the thumbnail.

                      Yes, I can do that with the batch re-naming utility in ImageViewer.
                      -Mike

                      www.EpicRoadTrips.us







                      [Non-text portions of this message have been removed]
                    • Don - HtmlFixIt.com
                      If I am understanding you right, you are simply creating a low res image in an image directory (I d call them thumbnails even though they are larger than your
                      Message 10 of 15 , Jan 15, 2007
                      • 0 Attachment
                        If I am understanding you right, you are simply creating a low res image
                        in an image directory (I'd call them thumbnails even though they are
                        larger than your thumb, or we could call them the preview images or
                        whatever). Now presumably you have a subdirectory inside of that called
                        hres (or whatever). Assuming you always use the same subdirectory name
                        for the high res images, and that you make a high res image for each of
                        them, it is simple. Simply add the additional language:
                        ;Insert image tag and information into document
                        ;now includes to high res images
                        ^!InsertHtml <a href="hres/^%ImageFullName%"><img
                        src="^$StrLower("^%imagename%")$" width="^%ImgWidth%"
                        height="^%ImgHeight%" title="^%TITLE%" alt="^%ALT%" /></a>^p<p
                        style="text-align: center;">^%ImageName% (^%ImgWidth%x^%ImgHeight%;
                        ^$GetFileSize(^%ImageFullName%)$ bytes)</p>^P^p

                        Note, do not change the name for the high res, use the very same names,
                        but put them in the high res folder (named hres in my example).
                      • Mike Breiding
                        ... This is the way I have it set up. ... I replaced my code with yours and below is the HTML output for one of the files and the linked file
                        Message 11 of 15 , Jan 16, 2007
                        • 0 Attachment
                          At 03:38 PM 1/15/2007 , you wrote:

                          >If I am understanding you right, you are simply creating a low res image
                          >in an image directory (I'd call them thumbnails even though they are
                          >larger than your thumb, or we could call them the preview images or
                          >whatever). Now presumably you have a subdirectory inside of that called
                          >hres (or whatever). Assuming you always use the same subdirectory name
                          >for the high res images, and that you make a high res image for each of
                          >them, it is simple.

                          This is the way I have it set up.

                          >Simply add the additional language:
                          >;Insert image tag and information into document
                          >;now includes to high res images
                          >^!InsertHtml <a href="hres/^%ImageFullName%"><img
                          >src="^$StrLower("^%imagename%")$" width="^%ImgWidth%"
                          >height="^%ImgHeight%" title="^%TITLE%" alt="^%ALT%" /></a>^p<p
                          >style="text-align: center;">^%ImageName% (^%ImgWidth%x^%ImgHeight%;
                          >^$GetFileSize(^%ImageFullName%)$ bytes)</p>^P^p
                          >
                          >Note, do not change the name for the high res, use the very same names,
                          >but put them in the high res folder (named hres in my example).
                          >

                          I replaced my code with yours and below is the HTML output for one of the
                          files and the linked file

                          <a
                          href="hres/C:\BU\mydocs_new\WEBPAGES\ERTs\2006\winter\december\silver_river\
                          silver_rvr02.jpg"><img src="silver_rvr02.jpg" width="466" height="311"
                          title="" alt="" /></a>
                          <p style="text-align: center;">silver_rvr02.jpg (466x311; 55859 bytes)</p>

                          What did I do wrong?

                          Below is the clip with your code:
                          http://mbreiding.us/clip/hres_images2HTML.txt

                          Thanks for the help!

                          -Mike


                          [Non-text portions of this message have been removed]
                        • Mike Breiding
                          At 03:38 PM 1/15/2007 , you wrote: See additional note at bottom. ... This is the way I have it set up. ... I replaced my code with yours and below is the HTML
                          Message 12 of 15 , Jan 16, 2007
                          • 0 Attachment
                            At 03:38 PM 1/15/2007 , you wrote:

                            See additional note at bottom.

                            >If I am understanding you right, you are simply creating a low res image
                            >in an image directory (I'd call them thumbnails even though they are
                            >larger than your thumb, or we could call them the preview images or
                            >whatever). Now presumably you have a subdirectory inside of that called
                            >hres (or whatever). Assuming you always use the same subdirectory name
                            >for the high res images, and that you make a high res image for each of
                            >them, it is simple.

                            This is the way I have it set up.

                            >Simply add the additional language:
                            >;Insert image tag and information into document
                            >;now includes to high res images
                            >^!InsertHtml <a href="hres/^%ImageFullName%"><img
                            >src="^$StrLower("^%imagename%")$" width="^%ImgWidth%"
                            >height="^%ImgHeight%" title="^%TITLE%" alt="^%ALT%" /></a>^p<p
                            >style="text-align: center;">^%ImageName% (^%ImgWidth%x^%ImgHeight%;
                            >^$GetFileSize(^%ImageFullName%)$ bytes)</p>^P^p
                            >
                            >Note, do not change the name for the high res, use the very same names,
                            >but put them in the high res folder (named hres in my example).
                            >

                            I replaced my code with yours and below is the HTML output for one of the
                            files and the linked file

                            <a
                            href="hres/C:\BU\mydocs_new\WEBPAGES\ERTs\2006\winter\december\silver_river\
                            silver_rvr02.jpg"><img src="silver_rvr02.jpg" width="466" height="311"
                            title="" alt="" /></a>
                            <p style="text-align: center;">silver_rvr02.jpg (466x311; 55859 bytes)</p>

                            ====
                            I forgot to mention, the link to hirez needs to be relative such as:

                            <a href="hirez/silver_rvrhrez02.jpg">
                            <img src="silver_rvr02.jpg" width="466" height="311" title="" alt="" />
                            </a>
                            <p style="text-align: center;">silver_rvr02.jpg (466x311; 55859 bytes)</p>

                            -mb





                            [Non-text portions of this message have been removed]
                          • Don - HtmlFixIt.com
                            I grabbed the wrong variable apparently. It appears I included the path by mistake. Use this instead: ;Insert image tag and information into document ;now
                            Message 13 of 15 , Jan 17, 2007
                            • 0 Attachment
                              I grabbed the wrong variable apparently. It appears I included the path
                              by mistake.
                              Use this instead:
                              ;Insert image tag and information into document
                              ;now includes to high res images
                              ^!InsertHtml <a href="hres/^$StrLower("^%imagename%")$"><img
                              src="^$StrLower("^%imagename%")$" width="^%ImgWidth%"
                              height="^%ImgHeight%" title="^%TITLE%" alt="^%ALT%" /></a>^p<p
                              style="text-align: center;">^%ImageName% (^%ImgWidth%x^%ImgHeight%;
                              ^$GetFileSize(^%ImageFullName%)$ bytes)</p>^P^p

                              The change is just using this:
                              ^$StrLower("^%imagename%")$
                              in the ahref.
                            • Don - HtmlFixIt.com
                              ... also the hres/... part of that ahref should match what you actually name your subdirectory containing the hi resolution photos. I said hres, but you
                              Message 14 of 15 , Jan 17, 2007
                              • 0 Attachment
                                Don - HtmlFixIt.com wrote:
                                > I grabbed the wrong variable apparently. It appears I included the path
                                > by mistake.
                                > Use this instead:
                                > ;Insert image tag and information into document
                                > ;now includes to high res images
                                > ^!InsertHtml <a href="hres/^$StrLower("^%imagename%")$"><img
                                > src="^$StrLower("^%imagename%")$" width="^%ImgWidth%"
                                > height="^%ImgHeight%" title="^%TITLE%" alt="^%ALT%" /></a>^p<p
                                > style="text-align: center;">^%ImageName% (^%ImgWidth%x^%ImgHeight%;
                                > ^$GetFileSize(^%ImageFullName%)$ bytes)</p>^P^p
                                >
                                > The change is just using this:
                                > ^$StrLower("^%imagename%")$
                                > in the ahref.

                                also the "hres/..." part of that ahref should match what you actually
                                name your subdirectory containing the hi resolution photos. I said
                                hres, but you said hrez. It really doesn't matter as long as you are
                                consistent and it matches the code.
                              • Mike Breiding
                                AWESOME! What a time saver this will be. Thanks so much. -Mike ===================== ... ~~ [Non-text portions of this message have been removed]
                                Message 15 of 15 , Jan 17, 2007
                                • 0 Attachment
                                  AWESOME!
                                  What a time saver this will be.
                                  Thanks so much.
                                  -Mike
                                  =====================
                                  At 10:59 AM 1/17/2007 , you wrote:
                                  >Don - HtmlFixIt.com wrote:
                                  > > I grabbed the wrong variable apparently. It appears I included the path
                                  > > by mistake.
                                  > > Use this instead:
                                  > > ;Insert image tag and information into document
                                  > > ;now includes to high res images
                                  > > ^!InsertHtml <a href="hres/^$StrLower("^%imagename%")$"><img
                                  > > src="^$StrLower("^%imagename%")$" width="^%ImgWidth%"
                                  > > height="^%ImgHeight%" title="^%TITLE%" alt="^%ALT%" /></a>^p<p
                                  > > style="text-align: center;">^%ImageName% (^%ImgWidth%x^%ImgHeight%;
                                  > > ^$GetFileSize(^%ImageFullName%)$ bytes)</p>^P^p
                                  > >
                                  > > The change is just using this:
                                  > > ^$StrLower("^%imagename%")$
                                  > > in the ahref.
                                  >
                                  >also the "hres/..." part of that ahref should match what you actually
                                  >name your subdirectory containing the hi resolution photos. I said
                                  >hres, but you said hrez. It really doesn't matter as long as you are
                                  >consistent and it matches the code.



                                  ~~



                                  [Non-text portions of this message have been removed]
                                Your message has been successfully submitted and would be delivered to recipients shortly.