mediaOutput src attribute short and easy to understand value

[rcordoba]

Hi,

   I´m using a4j:mediaOutput to generate images dinamically from BLOB fields in database. This is working perfectly to me, so I can display the images in my site.

The problem is that I want go one step further:

I need to put all the images in a gallery. So, I´m trying to use some JQuery plugins (such as JFlow Plus slider or Fancybox gallery). They work more or less the same way. The problem is that all these plugins uses images in a format like <img src="images/image1.png">. I mean, the images are in the server, and have a name and an image extension.

Example of generated HTML code that works:

<!-- Slider -->

                    <div id="sliderContainer">

                        <div id="mySlides">

                            <div id="slide1" class="slide">   

                                <img src="images/jflow/carrusel1.png" alt="Slide 1 jFlow Plus" class="slidePicture" />                      

                            </div>                 

                             <div id="slide2" class="slide">

                                <img src="images/jflow/carrusel2.png" alt="Slide 2 jFlow Plus" class="slidePicture" />      

                            </div>      

                    </div>

                    <!--end: sliderContainer -->

My problem is when I use mediaOutput to create my img element the value of src attribute is something very long and without extension. I don´t know exactly why, but the plugings doesn´t work with this kind of URL. For sure, I have asked in these plugins support for a solution. But, anyway, I would like to know if it is possible to generate the img element with an understandable value like above.

Example of generated HTML using mediaOutput code:

<!-- Slider -->

                    <div id="sliderContainerEmpresas">

                        <div id="mySlides">

                                      <div id="slide1" class="slide"><img id="misEmpresasForm:j_id99:0:foto" src="/perrisyatchs/a4j/s/3_3_3.Finalorg.ajax4jsf.resource.UserResource/n/n/-879264467/DATA/eAF1Us9rE0EUfgkW6y!QRBSRQo1FQXQWfxSUWpBoqoE0haZR1NPL7stmwuzOdGY2XawKHlTQo3rzIOixnvwvBC-9ehE9iIgXEcSbs5tqbcG5veF73!e9772VbzBiNByTOmTYx!RM33SZJiMT7RNrG9Lza8VEW!NLaBGyV578WoQtDdjla0JLF2VsKbYWSo0-DtATGIfeXKdPvp1qwFZKFXeci3AXCg0YjWTAu5yCtXpkgCKhvEiV83Iko0hZF30yzJeRkrHjZi3rhK5IEZBu4YD09bdvpp88fzdbhGIDtvkCjWliRBs9tKzmceg8bDeuJ8g5LOwbuuTSa5HmKPgt7AiaSlUmf9RJMpPEuQFB1jASbAHDWbI9GdRS5SYxXMZ5DgCFnQCphgND0w66GYelHxPVT4u2mOPKf3HrTC!vP2p9v7F6PkNkDir5MhT6Pcq0NxPWIyXqv!C9OHn7UCaeJTe6dBD2H16e4YLaSkgMqoQxU8hjewcg0VC-mc!Mss24KPNUXq9e!fxlbPlyruvGKVrYm9ljXLK5xKrEOiBhZGF3!p33DreqVLq0APPetVr1RL0541kMjeej1okhUYuyjJClPRuJ8QunTh-fPDe-4VCmK!!xWhnuYM-6Xt1dVki69PHFq5!3Hp4tQqEOw4txqf!jq5lEHdIPVp6N7Xj64fGfkeA3JmP7iA__.jsf?time=1368547159202" class="fotoMiniatura" />                                                                                                 

                                      </div>

                                      <div id="slide2" class="slide"><img id="misEmpresasForm:j_id99:1:foto" src="/perrisyatchs/a4j/s/3_3_3.Finalorg.ajax4jsf.resource.UserResource/n/n/-879264467/DATA/eAF1Us9rE0EUfgkW6y!QRBSRQo1FQXQWfxSUWpBoqoE0haZR1NPL7stmwuzOdGY2XawKHlTQo3rzIOixnvwvBC-9ehE9iIgXEcSbs5tqbcG5veF73!e9772VbzBiNByTOmTYx!RM33SZJiMT7RNrG9Lza8VEW!NLaBGyV578WoQtDdjla0JLF2VsKbYWSo0-DtATGIfeXKdPvp1qwFZKFXeci3AXCg0YjWTAu5yCtXpkgCKhvEiV83Iko0hZF30yzJeRkrHjZi3rhK5IEZBu4YD09bdvpp88fzdbhGIDtvkCjWliRBs9tKzmceg8bDeuJ8g5LOwbuuTSa5HmKPgt7AiaSlUmf9RJMpPEuQFB1jASbAHDWbI9GdRS5SYxXMZ5DgCFnQCphgND0w66GYelHxPVT4u2mOPKf3HrTC!vP2p9v7F6PkNkDir5MhT6Pcq0NxPWIyXqv!C9OHn7UCaeJTe6dBD2H16e4YLaSkgMqoQxU8hjewcg0VC-mc!Mss24KPNUXq9e!fxlbPlyruvGKVrYm9ljXLK5xKrEOiBhZGF3!p33DreqVLq0APPetVr1RL0541kMjeej1okhUYuyjJClPRuJ8QunTh-fPDe-4VCmK!!xWhnuYM-6Xt1dVki69PHFq5!3Hp4tQqEOw4txqf!jq5lEHdIPVp6N7Xj64fGfkQq!ASZk-4k_.jsf?time=1368547159212" class="fotoMiniatura" />                                                                                                 

                                      </div>                 

                              </div>

                    </div>

                    <!--end: sliderContainer -->  

I attach my mediaOutput code:

<!-- Slider -->

                    <div id="sliderContainerEmpresas">

                        <div id="mySlides">

                                  <a4j:repeat value="#{FileUploadBean.fotos}" var="foto" rowKeyVar="row">

                                      <div id="slide#{row + 1}" class="slide">                                                

                                                <a4j:mediaOutput id="foto#{row}"

                                                                                                        element="img"

                                                                                                      mimeType="#{foto.mime}"

                                                                   createContent="#{FileUploadBean.paint}" value="#{row}"

                                                                   cacheable="false"                                                                                                                                                                                                                                

                                                                   styleClass="fotoMiniatura"

                                                                   archive="prueba">

                                           <f:param value="#{FileUploadBean.timeStamp}" name="time"/>                                                     

                                                               </a4j:mediaOutput>                                                                                                 

                                      </div>

                            </a4j:repeat>                 

                              </div>

                    </div>

                    <!--end: sliderContainer -->

I would really appreaciate an answer.

Thank you so much.

Roberto.

[stupserich]

Hi Roberto,

I've had a similar issue. I suspect that the length of the request attribute (or whatever the exact terminology is here) causes the issue. I guess you have to find a way to create shorter URLs("src=......"). My solution was to create a UUID for each such URLs and only pass that UUID to mediaoutput. When the UUID comes back to the server I decode it (via some key/value store like "Map") and send the real stuff back.

I hope that gave you some clue.

Good luck!