Announcement

Collapse
No announcement yet.

Image Captions

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Image Captions

    I found this request by someone back in 2013 and 2015. It's still a big weakness. It seems like it would be a simple fix. We just need the ability add captions to product photos, especially when we add multiple images to a product and can't let the customer know what it is. With Google demanding that no text be included in product images, this is a must. If you need an example of this, I'd be happy to provide.

    Thanks!

  • Not sure of exactly what you are trying to achieve, but it would be rather easy to
    1) add a <div></div> for an image caption and populate it with a custom field.
    2) use jQuery to pull the alt or title parameter and display it as an overlay on the image. (A bit tricky if you want to do this with the image machine images as you'd have to resort to javascript and place the code directly in the image machine script--ok, maybe you could get away with not doing that--but its not going to be a forum post. :)
    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
    phosphormedia.com

    Comment


    • Yeah, I'm looking for something easier and that doesn't include coding for people that I'm paying just to add products/images. Upload photo and insert caption into the "caption" field. Then we can take that and manipulate with code.

      Comment


      • We do have plans to build in captions into Image Machine. However you can accomplish this now using custom product fields and some custom JavaScript. You would create custom fields for imageCaption1, imageCaption2, etc for as many additional images as you have.

        Then on page load, you would output the caption data as JavaScript and hook into the additional images being written to the page via Image Machine.

        Its probably a 2 to 3 hours task to accomplish.

        We've done it in the past of other clients, I'll see if I can dig up some code samples.
        Brennan Heyde
        VP Developer Relations
        Miva, Inc.
        [email protected]
        https://www.miva.com

        Comment


        • I'd have to see how this works. It sounds clunky compared to what I was thinking. We used to use ADSImages module to manage our images which had a caption feature but moved to Image Machine and lost that and some other very handy features... Captioning was by far the biggest loss though.

          Comment


          • Originally posted by schoolsin View Post
            Yeah, I'm looking for something easier and that doesn't include coding for people that I'm paying just to add products/images. Upload photo and insert caption into the "caption" field. Then we can take that and manipulate with code.
            BTW: I'd recommend using the caption in the image's "title" field as it will roast two birds with one fire...
            Bruce Golub
            Phosphor Media - "Your Success is our Business"

            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
            phosphormedia.com

            Comment


            • Originally posted by Brennan View Post
              We do have plans to build in captions into Image Machine. However you can accomplish this now using custom product fields and some custom JavaScript. You would create custom fields for imageCaption1, imageCaption2, etc for as many additional images as you have.

              Then on page load, you would output the caption data as JavaScript and hook into the additional images being written to the page via Image Machine.

              Its probably a 2 to 3 hours task to accomplish.

              We've done it in the past of other clients, I'll see if I can dig up some code samples.
              that'd be nice code to have...and to have added by default
              Bruce Golub
              Phosphor Media - "Your Success is our Business"

              Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
              phosphormedia.com

              Comment


              • Originally posted by Bruce - PhosphorMedia View Post

                BTW: I'd recommend using the caption in the image's "title" field as it will roast two birds with one fire...
                Unless I'm missing something, I don't see a way of adding an image title in the Image Machine. Unless that was a suggestion for Miva...

                Comment


                • Originally posted by schoolsin View Post
                  ...skip... I'm paying just to add products/images ...skip...
                  You aware that all products and images may be imported as a batch, right? and it takes like... 15 seconds to do so

                  Comment


                  • Originally posted by AHerb View Post

                    You aware that all products and images may be imported as a batch, right? and it takes like... 15 seconds to do so
                    Yeah, after spending hours to build the spreadsheet....
                    Leslie Kirk (aka Leslie Nord leslienord)
                    Miva Merchant Certified Developer
                    Miva Merchant Specialist since 1998
                    Previously of Webs Your Way

                    Email me: [email protected]
                    www.lesliekirk.com

                    Follow me: Twitter Twitter Twitter Twitter | Facebook | FourSquare | Pinterest | Flickr

                    Comment


                    • Yes. I'm aware. Not sure what that has to do with product images having Titles or Captions though.

                      Comment



                      • Well, alternatively you can save your attributes in the image name

                        Code:
                         <div class="my_img_container">    <img src="//www.domain.com/img/20170714aksdjkasdljaldkjs--alt-My_Test_Image_Alt--title-My_Test_Image_Title--caption-CAPTIONN-HERE.jpg"> </div>   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script>    $(function(){       $(".my_img_container img").each(function(){          var src = $(this).attr('src');          var r = src.match(/\/([^\/]+)\.[a-zA-Z]{3,4}$/);          var substrs = r[1].split('--');          for (var i = 0, len = substrs.length; i < len; i++) {             var attrs = substrs[i].match(/([a-z]+)\-(.*)/i);             if (attrs !== null) {                console.log(attrs[2]);                if (attrs[1] == 'alt' || attrs[1] == 'title' || attrs[1] == 'caption') {                   $(this).attr(attrs[1],attrs[2].replace(/_/g, ' '));                }             }          }       })    }); </script>
                        should take parts of the string from image name and populate attributes

                        Code:
                         <img src="//www.domain.com/img/20170714aksdjkasdljaldkjs--alt-My_Test_Image_Alt--title-My_Test_Image_Title--caption-CAPTIONN-HERE.jpg" alt="My Test Image Alt" title="My Test Image Title" caption="CAPTIONN-HERE">
                        OMG, looks like block code does not put indents anymore for me and trying to display the entire script as a single line...
                        Indented code can be found here: https://pastebin.com/m5ZvQQk3

                        Comment

                        Working...
                        X