So fkrauthan (in #symfony on freenode) ran up against an interesting issue w/ regard to generating paths to other bundles assets.
I don’t personally know much about the problem area specifically, but I worked with fkrauthan to develop a hack that got around the problem.
So, please, take a look at the github repository and chime in your two cents. I’m almost positive there is a more elegant way to do this, but we had no idea what that was.
UPDATE: it looks like Scott Jehl has already beaten me to the punch, so check out his github project!
So, I was almost asleep, and this idea popped into my head. I want to write it down for two reasons:
<image data-alt="Some image" data-width="300px" data-height="300px"
id="my_image" class="some_class">
<source src="/images/high-dpi/image.jpg"
media="screen and (-webkit-device-pixel-ratio: 2.0)" />
<source src="/images/print-dpi/image.jpg" media="print" />
<source src="/images/regular-dpi/image.jpg" />
<img src="/images/regular-dpi/image.jpg" width="300"
height="300" alt="Some image" />
</image> |
With no javascript, nothing but the <img> tag is displayed, and everything is happy.
With javascript, we run a system which turns it into the following (this becomes easier if we can evaluate media queries in JS, but I’m not sure if we can do that, so I’m showing an alternate way):
<style>
#my_image {
background-image: url('/images/regular-dpi/image.jpg');
background-repeat: no-repeat;
background-size: 300px 300px;
}
@media print {
#my_image {
background-image: url('/images/print-dpi/image.jpg');
}
}
@media screen and (-webkit-device-pixel-ratio: 2.0) {
#my_image {
background-image: url('/images/high-dpi/image.jpg');
}
}
</style>
<image data-alt="Some image" data-width="300px" data-height="300px"
id="my_image" style="width: 300px; height: 300px;">
</image> |
And now for the fun part – we can use document.getElementById(‘my_image’).style.backgroundImage to get the right image!
This means that the last and final step then turns into:
<image data-alt="Some image" data-width="300px" data-height="300px" id="my_image">
<img style="width: 300px; height: 300px;" src="/images/high-dpi/image.jpg"
alt="Some image" width="300" height="300" />
</image> |
Which should make it happy with screen readers and other similar systems.
This approach has a few distinct advantages:
So that’s it. That’s my master plan. What do you think?
In case you were having trouble getting a many-to-many relationship to filter properly in Sonata AdminBundle, here’s how I did it:
So, in the never ending endeavor to make things as easy as possible for people to work with, I have a new mini project (actually two!).
majaxInstallerPlugin for symfony (only tested on 1.4.x)
and
MajaxInstaller for everyone else!
MajaxInstaller takes an XML configuration and prompts users interactive questions about the files you describe, to get easy configuration details.
The symfony plugin is just designed to be better integrated into symfony, accepting a yaml config file, and adding a majax:install task
There are no phpunit tests yet in the repository for MajaxInstaller, though I have one or two in majaxInstallerPlugin that actually test the base framework.
I look forward to hearing what people think!
I just wanted to make a quick post to update everyone on the progress I’ve been making on my symfony plugins.
majaxDoctrineMediaPlugin (github repository and symfony plugin)
A number of things have happened here:
majaxPheanstalk (github repository and symfony plugin)
It is now in the symfony plugin repository!
majaxJqueryPlugin (github repository and symfony plugin)
It is now in the symfony plugin repository!
majaxMarkdownPlugin (github repository and symfony plugin)
It is now in the symfony plugin repository!