Project

General

Profile

Actions

Feature #34954

closed

Make image rendering retina display compatible (as an option)

Added by Tobias Timpe over 12 years ago. Updated about 6 years ago.

Status:
Closed
Priority:
Could have
Assignee:
-
Category:
Image Cropping
Target version:
-
Start date:
2012-03-17
Due date:
% Done:

0%

Estimated time:
PHP Version:
Tags:
Complexity:
medium
Sprint Focus:

Description

Hello guys,

With yesterday's release of the new iPad from Apple, we have to change how images are rendered. We need to provide 2x graphics and also automatically create those. We also need to add a line of JS in order to replace the original images since we can't just rely on the user agent.

This should be simple to add, as it only needs to do these things:

- Render every content image in normal and 2x resolution, preferably just create "@2x" versions in the temp.

- Replace the original images with the higher resolution ones, if applicable

Yours

Tobias Timpe

Actions #1

Updated by Georg Ringer over 12 years ago

  • Complexity changed from easy to medium

IMO it would be bad to make vendor specific things inside the core. Such rendering is not as simple if you wanna solve other problems with it too, like having multiple images for responsive design as well

wanna take a look at http://git.typo3.org/TYPO3v4/Extensions/responsive_typo3.git maybe?

maybe you can provide a patch as well for the feature?

Actions #2

Updated by Jigal van Hemert over 12 years ago

  • Priority changed from Should have to Could have
  • Estimated time deleted (1.00 h)

This has indeed more to do with the rendering of the frontend of a website. Devices using a reference pixel which is not equal to a physical pixel can use other resolution images, but mobile devices also need to take bandwidth into consideration.
What if a device with an 1.7 ratio (reference vs physical pixel) is produced? Should the core create also those images by default?

Actions #3

Updated by Oliver Hader over 12 years ago

  • Status changed from New to Needs Feedback

I agree that this feature is rather specific for the user's device and not the be considered as a general core feature.
Tobias, what do you think about reporting/moving this issue to the project Responsive TYPO3

Actions #4

Updated by Tobias Timpe over 12 years ago

Yeah, that would be great! I know that this is not that important. I'm trying to edit class.t3lib_stdgraphic.php right now to always create 2x images as well for my own websites.

Actions #5

Updated by Uwe Michelfelder over 12 years ago

Tobias Timpe wrote:

Yeah, that would be great! I know that this is not that important. I'm trying to edit class.t3lib_stdgraphic.php right now to always create 2x images as well for my own websites.

Did you succeed in doing so?
I would be interested in testing this approach also.

Actions #6

Updated by Tom Kleijkers over 12 years ago

I would really like to see this feature, now the macbook pro retina is available. All rendered images on typo3 websites are in bad resolution.

Actions #7

Updated by Matthew Hill over 12 years ago

BUMP!

As High Pixel Density displays continue to roll out on new platforms (Android too, now) we can not brush this off as a vendor-specific feature. This functionality would go a long way toward keeping TYPO3 ahead of the competition.

I’m willing to help with development or testing, but it would be my first rodeo into TYPO3 core code modification, so I could use an experienced partner!

What do you say?

(See http://www.wvfbc.org/ on a high pixel density (Retina) display to see how bad a standard resolution image looks inside of a Retina-enhanced design.)

/\/\___

Actions #8

Updated by Tom Kleijkers about 12 years ago

Please, what should we do to get this option? I'm willing to help development.

Actions #9

Updated by Tobias Timpe almost 12 years ago

UPDATE: I just upgraded my system(s) to version 6.0. Since most of the file structuring changed, my previous custom retina patch no longer works. Can somebody tell me where exactly I need to implement the retina patch and how?

Actions #10

Updated by Tom Kleijkers almost 12 years ago

Tobias Timpe wrote:

UPDATE: I just upgraded my system(s) to version 6.0. Since most of the file structuring changed, my previous custom retina patch no longer works. Can somebody tell me where exactly I need to implement the retina patch and how?

Tobias, I have the same problem. It could be a simple addition to create an extension which renders all images in normal and @2x resolution. Also this could easily be a core feature, because it only needs a switch to enable it and it affects all websites nowadays (retina macbooks, ipad 4, ipad 3, iphone 4, iphone 4s, iphone 5, some new android phones etc!)

Actions #11

Updated by Matthew Hill almost 12 years ago

BUMP!

Actions #12

Updated by Sebastian over 11 years ago

Looking for this feature, too. Anything new?
I did a workaround by using doublesized images and scale them to 50% by css ... just a workaround ;-)

Actions #13

Updated by Stefan Galinski over 11 years ago

  • Status changed from Needs Feedback to New
  • TYPO3 Version changed from 4.6 to 4.5
Actions #14

Updated by Tobias Timpe over 11 years ago

So basically here's what we have to do:

Build an extension that:
  • simply renders all images two times (one normal, one with a @2x suffix).
  • includes the latest version of retina.js
  • has an option to automatically go through all CSS includes and add @media-queries for @2x background images.

If we get it working correctly, then maybe we can make a default extension just like CSS styled content.

Any skilled extension developer that wants to work on this, let me know.

Tobias

Actions #15

Updated by Tom Kleijkers over 11 years ago

Tobias Timpe wrote:

Any skilled extension developer that wants to work on this, let me know.

Count me in. I have a lot (5+ years) of professional PHP experience, but rather limited Typo3 Extensions experience.

-- Tom

Actions #16

Updated by Tobias Timpe over 11 years ago

  • Assignee set to Andreas Wolf
  • Target version set to 6.1.0

We really need to implement this into TYPO3 in general. Apple has already got "retina displays" on most of their products, so I guess we'll see the full transition of their product line this year.

I have been digging through the 6.1 source but haven't found the place where the actual images are rendered (I tried some stuff in GraphicalFunctions but I doesn't work).

I'm assigning this to Andreas Wolf (the person who wrote the new LocalImageProcessor) in the hope of getting a response. I want to at least know all the places that need to be changed/duplicated in order make TYPO3 render images as normal and @2x.

-- Tobias Timpe

Actions #17

Updated by Wouter Wolters over 11 years ago

  • Assignee deleted (Andreas Wolf)
  • Target version deleted (6.1.0)

Please do not set an Assignee. This is only if someone is really working on it. Furthermore this can not make it into 6.1. We are already in Feature Freeze.

Actions #18

Updated by Sascha Egerer about 11 years ago

This is fixed with the Responsive image rendering feature in 6.2, isn't it?

Actions #19

Updated by Stefan Neufeind almost 11 years ago

Could somebody (maybe of the ones who asked for the feature?) please look into this and give some feedback? As Sascha mentioned this might be resolved already, right?

Actions #20

Updated by Mathias Schreiber almost 10 years ago

  • Status changed from New to Resolved

fixed with Responsive Image Rendering

Actions #21

Updated by Benni Mack about 6 years ago

  • Status changed from Resolved to Closed
Actions

Also available in: Atom PDF