6 Replies Latest reply on Oct 25, 2012 11:24 PM by kasq

    Need to capture multiple image paths for responsive design when only one will be displayed at a time

    sodhouse

      I'm new to CQ and am having enough trouble following the documentation on image components as it is (why is there no master reference for all this?). I have a requirement where we need to capture three versions of an image and put the URLs into three attributes of a tag. The appropriately sized image will be selected via JavaScript based on the browser/device capabilities. I need to know how to capture those images when seemingly only one at a time can be dropped onto the page. Or perhaps there is a more CQ solution to this.

        • 1. Re: Need to capture multiple image paths for responsive design when only one will be displayed at a time
          kasq Level 3

          Hi,

           

          You need to customize image component. I mean selected image is a asset in the repository and each asset by default has 3 rendtion generated when the image is uploaded in the dam.

           

          For example when you upload image.jpg file into the DAM, standard workflow is launched and after a while inside the repository (see paths) are created following renditions:

           

          /content/dam/project/image/image.jpg/jcr:content/renditions/cq5dam.thumbnail.140.100.png

          /content/dam/project/image/image.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png

          /content/dam/project/image/image.jpg/jcr:content/renditions/cq5dam.thumbnail.48.48.png

           

          This process can be customized by changing /etc/workflow/models/dam/update_asset.html workflow and modifing "Thumbnail creation" step by adding in the Process tab -> Arguments field new values for new rendition. So for example if you add there [400,400] new rendition will be created in the path

           

          /content/dam/project/image/image.jpg/jcr:content/renditions/cq5dam.thumbnail.400.400.png

           

          Next step is to customize jsp for image component. Using path to the drag and dropped image from a component attributes you can easily take all renditions iterating on the /content/dam/project/image/yourimage.jpg/jcr:content/renditions node and then set paths to all renditions in the tag attributes. Then like you wrote using js you can select proper rendition.

           

          I hope that it hepls you.

           

          Regards,

          Adam

          • 2. Re: Need to capture multiple image paths for responsive design when only one will be displayed at a time
            sodhouse Level 1

            That's not exactly what we need. We don't want the alternate images to be auto-generated because they are cut manually by graphics folks. I need to drop all three. I guess we could still follow a similar approach so long as they use a naming convention.

            • 3. Re: Need to capture multiple image paths for responsive design when only one will be displayed at a time
              Owain Llewellyn

              I've added a new rendition [190:70] when I add new images I can see they have the new rendition applied. But when I view the image it's size is just 77px wide.

               

              Any idea why the image size does not match my rendition size and is there a way to apply this new rendition/work flow to all images in the DAM in one go rather than to go back and upload all the images again?

              • 4. Re: Need to capture multiple image paths for responsive design when only one will be displayed at a time
                kasq Level 3

                Hi,

                 

                if you want create a new rendition for all images, first off all please verify for sure if in the default workflow for assets:

                 

                /etc/workflow/models/dam/update_asset.html

                 

                in the THUMBNAIL CREATION step you defined new size of new rendition.

                 

                Then you can create a package which will contains all images from your DAM. In the next step you can delete the all images from dam and in the last step install a package. Then the default workflow should be started for all images from package and if you defined size for new rendition it should be created for each single image file.

                 

                This is one solution but maybe somebody knows some shorter way - "magic button" Description: http://forums.adobe.com/4.5.6/images/emoticons/happy.gif

                 

                Regards,

                kasq

                • 5. Re: Need to capture multiple image paths for responsive design when only one will be displayed at a time
                  Owain Llewellyn Level 1

                  The THUMBNAIL CREATION was set up to include my image dimensions (190x70), the reason it was producing smaller images was the ratio was not correct, I bumped up the height, the correct image ratio was 190X172

                   

                  I tried your method for applying the work flow to all images, I started by creating the package deleteing the images in the dam and re uploading the package. The workflow was not applied.

                   

                  Any ideas?

                  • 6. Re: Need to capture multiple image paths for responsive design when only one will be displayed at a time
                    kasq Level 3

                    Please try to do it for one folder with images from DAM for a test. I just tried to do this again and in my local repository when I created and build package, then deleted folder with images and save a changes and finally install package once again the DAM UPDATE ASSEST workflow has been started for each single image from a package. Try to see in the workflow console in the Archive tab, if for sure the workflow has not been started for all images. Please also check the logs, maybe you are receiving some specific error.

                     

                    If it is not working still you can create a custom workflow with two step - "Coninue updating" (standard step from DAM UPDATE ASSET) -> "Thumbnail creation" (standard step but only with configuration in the arguments with image dimensions needed by you, I mean 190X172), then you can create a launcher which will call this custom image for event type = "Node created" and specific path like "/content/dam/itaturk(/.*/)renditions/original". then try to do the same , I mean build package, delete image and install a package and verify if the custom workflow will be started.

                     

                    At this moment I know only about this kind of possibility to recreate a rendition for some packages of images. Maybe like I said there is other solution, but just wait for other answer in the forum.

                     

                    I hope that this helps you somehow.

                     

                    Regards,

                    kasq