Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Requested: Retina support and compression


Reply

4 Posts   584 Views

Avatar
borriej

17 November 2012 at 3:19am Community Member, 267 Posts

Hello everyone,

For SS 3 to compete with the competition it should add this feature, now it lacks the best feature of the "HTML5 age".

-> A retina feature in SilverStripe 3
--> .htaccess rules in the default .htaccess
--> javascript code in the default page.ss

What should it do?
--> User uploads high quality image in a image slot in the CMS. SilverStripe should automatically create a @1x and a @2x file for this image in the assets folder.
--> the htaccess + javascript should determine if front-end visitor should see/load the image.

to make it even more beautifull there should be a compression on the images. There are good compression tools that don't affect the image quality with lesser filesize.

Avatar
kinglozzer

19 November 2012 at 10:27pm Community Member, 146 Posts

Personally, I don't think this is a good idea.

For a start, you don't want to be forcing people trying to build a website in SilverStripe to use Javascript. Second, the methods for detecting if a user needs a 'retina' image are still pretty buggy.

When you say "SilverStripe should automatically create a @1x and a @2x file for this image in the assets folder." - SilverStripe can do this already. When you upload an image, it uploads it at full resolution. If you want a 'retina' image, you can use the built in SetWidth(), SetHeight() etc functions, then set the image width/height to be half of the width/height of the requested image, using css/html.

Avatar
borriej

20 November 2012 at 10:54pm (Last edited: 20 November 2012 10:56pm), Community Member, 267 Posts

I understand your concerns.. maybe not a forced feature, but an option then.

Using SetWidth/height in your template will create different sizes, but it will force to load both small and large size. We dont want this, because we want to save bandwidth. Template should just have the @1x version in the source code. E.g $RetinaImage.SetWith(400) ... the class should then create an @1x which is 400px width and an @2x which is 800px width. The .htaccess should then decide which file to load.

--> Does any one know how to make such an image class/ code?
So in the template you set the size for the @1x image, and the retina image class should create an @2x automatically.

--> How do you rewrite the htaccess?

http://shauninman.com/tmp/retina/

how do you merge this:

<IfModule mod_rewrite.c>
   Options -MultiViews
   RewriteEngine on
   RewriteCond %{HTTP_COOKIE} HTTP_IS_RETINA [NC]
   RewriteCond %{REQUEST_FILENAME} !@2x
   RewriteRule ^(.*)\.(gif|jpg|png)$ $1@2x.$2
   # if @2x isn't available fulfill the original request
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^(.*)@2x\.(gif|jpg|png)$ $1.$2
</IfModule>

with this:

### SILVERSTRIPE START ###
<Files *.ss>
   Order deny,allow
   Deny from all
   Allow from 127.0.0.1
</Files>

<Files web.config>
   Order deny,allow
   Deny from all
</Files>

ErrorDocument 404 /assets/error-404.html
ErrorDocument 500 /assets/error-500.html

<IfModule mod_alias.c>
   RedirectMatch 403 /silverstripe-cache(/|$)
</IfModule>

<IfModule mod_rewrite.c>
   SetEnv HTTP_MOD_REWRITE On
   RewriteEngine On
   RewriteBase '/'

   RewriteCond %{REQUEST_URI} ^(.*)$
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule .* framework/main.php?url=%1&%{QUERY_STRING} [L]
</IfModule>
### SILVERSTRIPE END ###

Avatar
IOTI

30 November 2012 at 7:40am Community Member, 189 Posts

Would be better as a module then built into the core imo.