Jahia DX > Image processing...

0 (0 Good)
0 (0 Bad)

Image processing within Jahia 6.5Beta

by  rvt »  2011/06/07 18:00

 

Hi,

I have created my template and such, and also created a little block where a user can select a title and a image. This will then be added to a page.

[jnt:homepageBlock] > jnt:content, mix:title, jmix:structuredContent, jmix:editorialContent

- background (weakreference, picker[type='image']) i18n

- cast (string, richtext) i18n

And my html looks like this (jnt_homepageBlock/html/homepageBlock.jsp ):

<jcr:nodeProperty node="${currentNode}" name="background" var="background"/>

    <div class="homepageBlock">

        <h2><jcr:nodeProperty node="${currentNode}" name="jcr:title"/></h2>

<img src="${background.node.url}" />

</div>

The above does work just fine when testing, but I want to re-scale the image to a specific width or hight or other type of image processing (overlays, borders, watermark etc...) to make sure that the image on the website is shown at the right size or does what it is suppose to do...

What is the method to do this within Jahia? I couldn't find a sample yet in the modules directory that does the same, but may be I overlooked something?

 

Ries

  • Image processing within Jahia 6.5Beta
    2011/07/04 08:32

    rvt <p> &nbsp;</p> <p> <title></title> </p> <p> Hi,</p> <p> I have created my template and such, and also created a little block where a user can select a title and a image. This will then be added to a page.</p> <pre> [jnt:homepageBlock] &gt; jnt:content, mix:title, jmix:structuredContent, jmix:editorialContent - background (weakreference, picker[type=&#39;image&#39;]) i18n - cast (string, richtext) i18n</pre> <p> And my html looks like this (jnt_homepageBlock/html/homepageBlock.jsp ):</p> <pre> &lt;jcr:nodeProperty node=&quot;${currentNode}&quot; name=&quot;background&quot; var=&quot;background&quot;/&gt; &lt;div class=&quot;homepageBlock&quot;&gt; &lt;h2&gt;&lt;jcr:nodeProperty node=&quot;${currentNode}&quot; name=&quot;jcr:title&quot;/&gt;&lt;/h2&gt; &lt;img src=&quot;${background.node.url}&quot; /&gt; &lt;/div&gt;</pre> <p> The above does work just fine when testing, but I want to re-scale the image to a specific width or hight or other type of image processing (overlays, borders, watermark etc...) to make sure that the image on the website is shown at the right size or does what it is suppose to do...</p> <p> What is the method to do this within Jahia? I couldn&#39;t find a sample yet in the modules directory that does the same, but may be I overlooked something?</p> <p> &nbsp;</p> <p> Ries</p>

  • Number of messages  185
    Registration date Jun 7, 2011
    0 (0 Good)
    0 (0 Bad)

    Re: Image processing within Jahia 6.5Beta

    by  pap@commaro.com »  2011/06/07 18:00

     

    Hello Ries,

    in the image picker you have the toolbar (and context menu) options to crop, resize and rotate an image. 

    You can also place images into richtext fields via the CKEditor, where you can also set widht, height, border, vspace, hspace,...

    For overlays and watermarks there is no direct support yet in Jahia. You could perhaps create your own modules, which do that ?

    Thinking about it, you may create a mixin definition with fields appearing in the Layout tab when creating/updating a component of your module.

    For instance for overlayable modules you create a jmix:overlayable and let your module inherit from that, like this:

    [jmix:overlayable] > jmix:templateMixin mixin
    
    itemtype = layout
    
    - zIndex (long) indexed=no
    
    [jnt:homepageBlock] > jnt:content, mix:title, jmix:structuredContent, jmix:editorialContent, jmix:overlayable
    
    ...

    Then you will see for instance the zIndex in the Layout tab of the homepageBlock component and then you would need to write code in your JSP with a <div> and using the value of the zIndex property in the currentNode.

    But perhaps there are more elegant ways to do that, which I don't know yet.

     

    Regards,

    Benjamin

    Benjamin Papez (pap@commaro.com)

    Number of messages  220
    Registration date
    0 (0 Good)
    0 (0 Bad)

    Re: Image processing within Jahia 6.5Beta

    by  rvt »  2011/06/07 18:00

    Hello Benjamin,

    The image picker indeed contains a these functions, however this creates (visible) duplicates on the Image Picker, the more you scale, the more duplicates you see.
    What I was curious at was after you 'load' teh image from the CMS, you apply a transformation to the image (usually re-scale) so you can force a template to always use the right sized, scaled down version of a image. This newly created image will be stored somewhere on a temporary place so it can always be deleted and re-created on request (using proper E-Tags etc etc yada yada).

    I will take a look at the 'mixin definition', I was actually thinking of a taglib that does all the dirty work and gives you a new URL of the images in a temporary storage.

    THinking out load:

     

    <jcr:nodeProperty node="${currentNode}" name="background" var="background"/>
    
        <div class="homepageBlock">
    
            <h2><jcr:nodeProperty node="${currentNode}" name="jcr:title"/></h2>
    
    <im:rescale image="${background.node.url}" width="200" />
    
    <im:cropscale   image="${background.node.url}" width="100" height="100" />
    
    <im:watermark image="${background.node.url}" image="${watermark.node.url}" opacity="10" />
    
    </div>

    I would have no idea how to chain that for example put two images on top of eachother and

    then scale that.

    The end result would be a a right sized image with the features needed for web-output.

    Does that make sense?

     

    Ries

  • Re: Image processing within Jahia 6.5Beta
    2011/07/04 08:37

    rvt <p> Hello Benjamin,<br /> <br /> The image picker indeed contains a these functions, however this creates (visible) duplicates on the Image Picker, the more you scale, the more duplicates you see.<br /> What I was curious at was after you &#39;load&#39; teh image from the CMS, you apply a transformation to the image (usually re-scale) so you can force a template to always use the right sized, scaled down version of a image. This newly created image will be stored somewhere on a temporary place so it can always be deleted and re-created on request (using proper E-Tags etc etc yada yada).<br /> <br /> I will take a look at the &#39;mixin definition&#39;, I was actually thinking of a taglib that does all the dirty work and gives you a new URL of the images in a temporary storage.<br /> <br /> THinking out load:</p> <p> &nbsp;</p> <p> <title></title> </p> <pre> &lt;jcr:nodeProperty node=&quot;${currentNode}&quot; name=&quot;background&quot; var=&quot;background&quot;/&gt; &lt;div class=&quot;homepageBlock&quot;&gt; &lt;h2&gt;&lt;jcr:nodeProperty node=&quot;${currentNode}&quot; name=&quot;jcr:title&quot;/&gt;&lt;/h2&gt; &lt;im:rescale image=&quot;${background.node.url}&quot; width=&quot;200&quot; /&gt; &lt;im:cropscale image=&quot;${background.node.url}&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt; &lt;im:watermark image=&quot;${background.node.url}&quot; image=&quot;${watermark.node.url}&quot; opacity=&quot;10&quot; /&gt; &lt;/div&gt;</pre> <p> I would have no idea how to chain that for example put two images on top of eachother and</p> <p> then scale that.</p> <p> The end result would be a a right sized image with the features needed for web-output.</p> <p> Does that make sense?</p> <p> &nbsp;</p> <p> Ries</p>

  • Number of messages  185
    Registration date Jun 7, 2011
    0 (0 Good)
    0 (0 Bad)

    Re: Image processing within Jahia 6.5Beta

    by  shuber »  2011/06/07 18:00

    Actually you might want to open a ticket for this, because it does seem interesting. I think this might be something also that could be done with rules, at upload time, in order to avoid slowing down the page rendering.

    Regards,
    Serge Huber.

    Serge Huber (shuber)

    Number of messages  271
    Registration date
    0 (0 Good)
    0 (0 Bad)

    Re: Image processing within Jahia 6.5Beta

    by  rvt »  2011/06/07 18:00

    Serge,


    I am still giving this a though...

    But this is what I have so far:

    There are 3 situations when you want to process an image:

    1) When adding a image to the document repository
    2) When rendering a image within a module
    3) When rendering a image that was added within the RTE.

    Why:
    1a) To limit resources on the server by making sure images are never to large. It's no point to have a image in teh uploaded repository of 4000x4000 pixels when the maximum image size ever used on the website is 1024x768.
    1b) To add meta tags to each and every image (add copyright info for example)

    2a) If a module needs to render images from a repository, or 'just' image files from a directory, they need to be processed to make them suitable for the website. Processing can include adding a watermark or rescaling them down to the requested size.

    3a) When rendering a image from a repository I noticed that the image get's always send on it's original format. However, when A uploaded image is 1024x768 in size, but the requested size for the website is 102x76, it would be best to make a copy of this image into a cache directory and process it into it's suitable size. Then this re-scaled version of the image will get send to the client.


    I believe that 1 is already possible with rules.
    Item 2 could be done using a cleaver tag library that will act as a helper to process images for developers of modules

    Item 3 could be done by processing and rewriting RTE content in a filter (thinking out-loud) where a filter processes RTE content and processes and re-writes the source for images.

    So, the RTE could store the image info like this:

    <jahia:img alt="Top Seller" src="/jahia/files/default/sites/testsite/files/websiteimages/en/bestsellingproducts.png" width="200" height="100" method="cropscale" positionX="0" positionY="100" />

    Using the namespace jahia it could process the img from the content repository and rewrite it to it'0s final format so it would become:

    <img alt="Top Seller" src="/jahia/files/default/sites/testsite/_cache/websiteimages/en/bestsellingproducts_somecacheid.png" width="200" height="100" />


    The newly generated image doesn't have to be tracked, but can be tracked. Since it's a cache the system would always check if a cache image exists, and if so not process the original.

    I hope I did bring over my thoughts :)

    Ries

     

  • Re: Image processing within Jahia 6.5Beta
    2011/07/04 08:40

    rvt <p> Serge,</p> <p> <br /> I am still giving this a though...<br /> <br /> But this is what I have so far:<br /> <br /> There are 3 situations when you want to process an image:<br /> <br /> 1) When adding a image to the document repository<br /> 2) When rendering a image within a module<br /> 3) When rendering a image that was added within the RTE.<br /> <br /> Why:<br /> <span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: bold; ">1a)</span> To limit resources on the server by making sure images are never to large. It&#39;s no point to have a image in teh uploaded repository of 4000x4000 pixels when the maximum image size ever used on the website is 1024x768.<br /> <span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: bold; ">1b)</span> To add meta tags to each and every image (add copyright info for example)<br /> <br /> <span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: bold; ">2a)</span> If a module needs to render images from a repository, or &#39;just&#39; image files from a directory, they need to be processed to make them suitable for the website. Processing can include adding a watermark or rescaling them down to the requested size.<br /> <br /> <span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: bold; ">3a)</span> When rendering a image from a repository I noticed that the image get&#39;s always send on it&#39;s original format. However, when A uploaded image is 1024x768 in size, but the requested size for the website is 102x76, it would be best to make a copy of this image into a cache directory and process it into it&#39;s suitable size. Then this re-scaled version of the image will get send to the client.<br /> <br /> <br /> I believe that 1 is already possible with rules.<br /> Item 2 could be done using a cleaver tag library that will act as a helper to process images for developers of modules<br /> <br /> Item 3 could be done by processing and rewriting RTE content in a filter (thinking out-loud) where a filter processes RTE content and processes and re-writes the source for images.<br /> <br /> So, the RTE could store the image info like this:<br /> <br /> &lt;jahia:img alt=&quot;Top Seller&quot; src=&quot;/jahia/files/default/sites/testsite/files/websiteimages/en/bestsellingproducts.png&quot; width=&quot;200&quot; height=&quot;100&quot; method=&quot;cropscale&quot; positionX=&quot;0&quot; positionY=&quot;100&quot; /&gt;<br /> <br /> Using the namespace jahia it could process the img from the content repository and rewrite it to it&#39;0s final format so it would become:<br /> <br /> &lt;img alt=&quot;Top Seller&quot; src=&quot;/jahia/files/default/sites/testsite/_cache/websiteimages/en/bestsellingproducts_somecacheid.png&quot; width=&quot;200&quot; height=&quot;100&quot; /&gt;<br /> <br /> <br /> The newly generated image doesn&#39;t have to be tracked, but can be tracked. Since it&#39;s a cache the system would always check if a cache image exists, and if so not process the original.<br /> <br /> I hope I did bring over my thoughts <img alt=":)" src="http://10.8.37.193/forum/images/smilies/icon_e_smile.gif" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " title="Smile" /><br /> <br /> Ries</p> <p> &nbsp;</p>

  • Number of messages  185
    Registration date Jun 7, 2011
    0 (0 Good)
    0 (0 Bad)

    Re: Image processing within Jahia 6.5Beta

    by  shuber »  2011/06/07 18:00

    That really sound like interesting ideas for a new image resizing module smiley

    Regards,
    Serge Huber.

    Serge Huber (shuber)

    Number of messages  271
    Registration date
    0 (0 Good)
    0 (0 Bad)

    Images

    by  Severals images don't upload properly »  2014/04/01 07:39

     

    Hello friends,

    I need upload several images in a list product but some of them don't upload properly.The imagen are *.jpg.Why?

     

    Please help me.

    Severals images don't upload properly
    Number of messages  1
    Not registered
    0 (0 Good)
    0 (0 Bad)

    Re: Images

    by  Rvt »  2014/04/01 12:43

    You need to check the logfile. If something isn't right, then the log will properly tell you what happened.

    ries van Twisk

    Rvt
    Number of messages  1
    Not registered
    Contact
    Share
    Feedback

    Get in touch

    Whether you are a current user or if you are just evaluating Jahia, we are here to help.

    Contact us

    Share this page