4 Replies Latest reply on Jun 10, 2013 9:19 AM by Artifex32

    Loading saved images from code

    Artifex32 Level 1

           I'm creating a single-page application with CQ and AngularJS, and the nature of my app is requiring that I pull my images from code rather than into a paragraph system via the UI. Does anyone know how to accomplish this? Does CQ have some built-in methods for pulling that resource from an image name or something?

        • 1. Re: Loading saved images from code
          orotas Level 4

          I am not sure I understand the question. Is this an author managed image? If the author doesn't point to it in the DAM are they entering an image name? Or is this a static image that the authors don't manage? If it's a static image that author's don't manage then the solution is easy - you store it in a client library directory and you just reference it by hard coding that path.


          If its an authored image you have to get the author to give you and ID somehow, so most likely what you'd do is include an image component in your template where image appears and then the author will be able to drag the image to that location.

          • 2. Re: Loading saved images from code
            Artifex32 Level 1

            I've done some more digging and found a potential solution, though I'm still groping my way towards a best practice.


            All I did was add an image to the DAM, then "open"ed the image from the DAM tool, which gave me the path in the address bar. I hard-coded that path in one of my component pages and the image appears properly. The only reservation I have is that the name of that image is now hard coded in my component. It's simply:


            <img src="/content/dam/projectname/xyz.jpg" alt="" />


            What' I'd prefer is some kind of code-based solution that used an id or something.

            • 3. Re: Loading saved images from code
              orotas Level 4

              I am still struggling to understand you business use case. Why is the image in the DAM to begin with - do you expect and author to change this image at some point?


              From a CQ perspective the path to the image in the DAM is the unique identifer of the asset - there is no ID based solution that's going to be available out of the box.


              The best practice in this scenario would be to use a component for this - for exampe put <cq:include path="someuniqueidentifier" resourceType="apps/mysite/staticimage"/> -  then copy the /libs/foundation/components/logo component. This component let's you manage an image in the design page so it is the same across all instances of the template. This avoids you needing to make sure the image is in the same place in every instance you deploy your code on.


              The other best practice would be to not put the image in the DAM. You have a client lib somewhere I imagine that has your CSS and JS right - so something like /etc/clientlibs/mysite/main - in there you probably already have a /images directory where your CSS references background images - that sort of thing. Put the image in there and deploy it with your code, and then reference it in your template with a path.


              If neither of those options work then you would have to build out a custom solution. You could for example create a custom template that would that would let you drag a custom image reference component onto the page. This custom component would like to point to the image in the DAM and then enter a code for the image. You would create a page based on this template in /etc somewhere - maybe /etc/staticimage/myimages. Then you create references and codes for all the images you care about. You would also create scripting servelt within your template similar to /libs/foundation/components/parbase/img.GET.java - for example static.GET.java. Then on your other templates you put a image references like <img src="/etc/staticimage/myimages.static.codeyourenteredincomponent.jpg" alt="" />. Your servlet would then pull the code from the selector, find the right image reference, and stream the image. That's just one idea (not one I'd recommend) you'd have to look at your business case and try and understand what you are trying to acheive and decide on the right solution.   

              • 4. Re: Loading saved images from code
                Artifex32 Level 1

                Your reply has a lot of good info in it, thanks. I'm not using a clientlib anywhere, though it sounds like I should be. Let me describe a little better where I'm at, and maybe you can make some suggestions. I've been using CQ for about two months now.


                I have a roughly 8-page application that I'm working on. Adobe CQ is being used only for the UI side. All persistence and business logic is being done on a completely separate server that I'm connecting to via RESTful services using a single, master JSON string which contains all the information I need at all steps of the process. The navigation is essentially a wizard-style sequence where each step results in a round trip of the JSON to and from the server. I have four separate brandings that I'll have to do, based on that which is associated with a particular user.


                My solution so far is a single-page application based on AngularJS. This means I have a "main" page in CQ which uses "maintemplate" attached to a "maintemplate.jsp" component that includes a parsys where I drop an "angularview" component.


                This page renders out the header and footer of my app to the browser, with an empty div where the Angular view will be placed. Each of the pages in my app I have created in pages underneath "main", pointing to another template called "partialtemplate", which does nothing to the component each page calls (no header, footer, etc.).


                Each of these partial page components contain a mix of text, images, and form elements. The images in these partial pages are what I'm concerned about. There's no way to edit these in the authoring view, since I'm not using CQ's full-page-refresh navigation model. So, I have to hard code all the images, text and other content into each partial component.


                I have all my components in /apps/project/components, and the partials underneath that in /components/partials. Javascript files I have in /components/js (this is probably where I need to use a clientlib) and I'm using relative URLs from the maintemplate component to pull them. I'm also using /etc/designs/project as a location for all my css.


                My idea for the branding will be to programmatically adjust the current design path depending on user data (I haven't verified this will work) and create a new design path for each, with sling:superResourceType pointing to the master design so I don't have to have multiple copies of global css files.


                The images in question are inside each of the partials. Since they might change based on marketing goals, I need these to remain exposed to the page authors, so putting them in the DAM is the only choice I see; indeed, isn't that what the DAM is for?


                I'm still fumbling through CQ, trying to find out the best way to do things. If you can make any recommendations, I'd be grateful. Time is precious, so I don't have a lot of time to rewrite the architecture, but if you see some way I can make a small change and save myself some work later, I'm all ears.