Prestashop image not loaded properly after using cd

Question

I've recently tried to off load some of the HTTP request for images to a CDN (using S3).

my cdn is located at s3.mydomain.com

Once i've add media server everything looks okay (css, javascript). However, there is one problem. I'm getting missing picture for all of my product image.

I have tried the following:

• Turned off friendly URL --> then everything works like a charm. Product image can be displayed (but only when friendly URL is turned off.
• Regenerate thumbnails --> Still get missing image.
• Move image --> Still get missing image.

Full URL with "Friendly URL" turned on is: http://xx.bro.do/2579-product_list_default/langdon-parka-black.jpg (does-not-work)

With "Friendly URL" turned off, it becomes: http://xx.bro.do/img/p/2/5/7/9/2579-product_list_default.jpg

So, somehow the "Friendly URL' is not being redirected properly to the "Unfriendly URL"

Below is a snippets of my .htaccess

# Images
RewriteCond %{HTTP_HOST} ^xx.bro.do$ [OR]
RewriteCond %{HTTP_HOST} ^brodo.dev$
RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]
RewriteCond %{HTTP_HOST} ^xx.bro.do$ [OR]
RewriteCond %{HTTP_HOST} ^brodo.dev$
RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.jpg [L]
RewriteCond %{HTTP_HOST} ^xx.bro.do$ [OR]
RewriteCond %{HTTP_HOST} ^brodo.dev$
RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.jpg [L]
RewriteCond %{HTTP_HOST} ^xx.bro.do$ [OR]
RewriteCond %{HTTP_HOST} ^brodo.dev$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg [L]
RewriteCond %{HTTP_HOST} ^xx.bro.do$ [OR]
RewriteCond %{HTTP_HOST} ^brodo.dev$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg [L]
RewriteCond %{HTTP_HOST} ^xx.bro.do$ [OR]
RewriteCond %{HTTP_HOST} ^brodo.dev$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg [L]
RewriteCond %{HTTP_HOST} ^xx.bro.do$ [OR]
RewriteCond %{HTTP_HOST} ^brodo.dev$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg [L]
RewriteCond %{HTTP_HOST} ^xx.bro.do$ [OR]
RewriteCond %{HTTP_HOST} ^brodo.dev$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg [L]

Another solution that 100% will work is by changing the actual code on the following files:

• product.tpl
• product-list.tpl
• and pretty much the rest of the files that have missing product image.

This last effort, i am trying to avoid simply because should the template change in the future then someone will have to redo the work again.

So does anyone knows how to fix this ? I appreciate any help.

Answer 1

This method worked for me.

Step 1: Enable friendly url . check everything is working fine without media server. Make sure friendly is enabled and media server is disabled

when step 1 is working you will see url of your products as http://ec2.aws.XXXXXXXXX.com/1-large_default/faded-short-sleeves-tshirt.jpg

Step 2 : enable media server now . i,m using cloudfront as cdn and s3 as bucket

when media server is enabled

you will come across 2 scenarios

1.css and js wont load and even images wont load

2.images will load but css and js wont load

fix for this is: goto Advanced parameters -> Preformance -> CCC(combine compress and cache)

Smart cache for CSS -- select no if it is yes.

Smart cache for JavaScript -- select no if it is yes.

After this reload your page. the site appears to be fine..

but at this stage you might come across another 2 scenarios

1.css, js, images all loaded properly but product images wont load.

2.everything loads properly and your site is good to go. without any further changes.

if you counter the 1st scenario follow these steps.

step 1. open your ftp client and navigate to your apache folder generally it will be residing in rootofserver/etc/apache/

    in my case it is rootofserver/etc/httpd

in your case it might be same or it might be

     rootofserver/etc/apahce/   
     or rootofserver/etc/apahce2/

step 2. once your inside the folder open httpd.conf file in any editor u like..

again in my case

        its httpd.conf  it might be same or it will be
        apaceh2.conf or apache.conf

step 3. once you have opened the file in any of the text editor
find these below lines and Allowoverride set it to All if it is none.(make sure 'a' is Capital)

        DocumentRoot "/var/www/html"

        #
        # Each directory to which Apache has access can be configured with respect
        # to which services and features are allowed and/or disabled in that
        # directory (and its subdirectories). 
        #
        # First, we configure the "default" to be a very restrictive set of 
        # features.  
        #
        <Directory />
            Options FollowSymLinks
            AllowOverride All
        </Directory>

next find these set of lines and set Allowoverride to All (make sure 'a' is Capital)

        <Directory "/var/www/html">

        #
        # Possible values for the Options directive are "None", "All",
        # or any combination of:
        #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
        #
        # Note that "MultiViews" must be named *explicitly* --- "Options All"
        # doesn't give it to you.
        #
        # The Options directive is both complicated and important.  Please see
        # http://httpd.apache.org/docs/2.2/mod/core.html#options
        # for more information.
        #
            Options Indexes FollowSymLinks

        #
        # AllowOverride controls what directives may be placed in .htaccess files.
        # It can be "All", "None", or any combination of the keywords:
        #   Options FileInfo AuthConfig Limit
        #
            AllowOverride All       

Once you have finished editing this file.. upload it back to the server or if you can save it in the server itself do it. after uploading back to the server make sure to check this file again .if it has the edited changes. if not open putty or any command line tool your using and set

 chmod 0666 to the file 

the command is

"sudo chmod 0666 /etc/httpd/httpd.conf" 

copy paste and hit enter in command line interface.make sure the file name is as it is in your server. and also the route.

If even after all these changes your product images are still not loading then

Goto your cdn console and set the origin as your webserver itself. dont use s3 bucket.

ex if your site domain name (while development) may be

 ec2.userxxxxxxxx.aws.com (if amazon ec2) 

or any other service if your using provide that name as the origin for your cdn. as this will keep the files in sync between your server and the cdn where as the s3 bucket you have to manually update the master copy of your site.(there are methods to achieve sync between s3 and server but i have not tried it yet)

follow these steps and it might get your site working properly.. this worked out great for me and the site is now url friendly and media server enabled.