Martijn Geerts

Or if you have the PageArray result in the variable $yourMatchedPages, just count($yourMatchedPages);

Also I want to add. My JS depends on settings set in the script. It's better that the script would read them from the meta data from the images it self. I don't think it is a bad idea to have our own flexible element, by shim/shiv our own, say <wireimage></wireimage>. That when it is easier to implement and more logical for the things we want to achieve. Diogo & Soma and others who are good with Javascript. What do they have to say about the Javascript backup/solution

The trickiest part is the uniqueness of the person who triggers the action. I don't know how to do that, something that should work in 80% of the times. Sometimes I think you've to do it with Social Media, but thats probably a to big dependancy. Double opt-in is not the way to go. Browser sniffing & cookie methoses maybe. Really I'm just guessing here.

Responding to your points, duplicating what you're saying in most cases. 1. PageimageAdaptive->getConfigInputfields() is the place I think. (inputfield settings) 2. Agree 3. Indeed we need a adaptiveRender() methode or something. And a FilenameArray, from low -> hight 4. Request with PageImage options, defaulting from point 1, but overwriting possibility per PageImage. 5. As this should work with ProCache. Maybe we can find a way that works native in one or more modern browsers with a js fallback for the others. Basically I tell drop my idea and find a way to show deafult image if JS is disabled and picture element is not supported. ps, Other members, it's open for discussion

@SiNNuT & Horst I didn't forget your post about bandwidth checking. But to be honest, I don't know where to start to implement it as a solution as I don't know which steps we should take to make it work. I lack the javascript skills. I lack general knowledge about requests and the time to build or borrow code from an existing plug-in. However, I do think that bandwidth checking theory is great. I assume bandwidth checking is done with a test, but bandwidth on cellular network can be very fluctuating. We don't want to end up with a very positive test on a resource heavy page, forcing the browser to load all heavy images while the connection speed is dropped. We can't do a test for every single image because of the extra requests. Max parallel http connections from the same (sub)domain is really limited as you already know. If you hook your Retina MacBookPro to your handy with a bad cellular connection, what to do now? I can't get a complete picture of the whole adaptive image game.

Logical thinking has nothing to do with a language. jQuery solves compatibility issues ( can be solved without ). It's more obvious how to use. But requires jQuery & the plug-in to be loaded. ( extra requests ) On the other hand I don't know a project where I don't use jQuery (other people ?) And calling the jQuery plugin is so much easier for your eyes.

A tricky part is eventually the behaviour in the dom. IE8 support should be not a real problem. ( only some JS fight over there )

Nope, clever ! Do you think a jQuery plugin suits better, basically more like this ? // calling like this $(".adaptive").adaptive({ sizes: { 'tiny': 0, // from 0 till 399 'small': 400, // from 400 till 699 'tablet': 700, 'desktop': 1200 }, delay: 400 }); // or calling like this or something $(".adaptive").adaptive(<?= $wireAdaptiveImage->settings() ?>);

@Horst, Maybe it's a little bit clumsy but I was playing around with my <div> & <noscript> adaptive image. I don't think it's fully compatible yet with old IE. I just post this as a rough idea. The image: $image = $page->images->first(); //thumbs $tiny = $image->width(100); $small = $image->width(200); $tablet = $image->width(400); $desktop = $image->width(800); // adaptive-image $img .= "<div class='adaptive'>"; $img .= "<img src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' "; $img .= "data-tiny='$tiny->url' "; $img .= "data-small='$small->url' "; $img .= "data-tablet='$tablet->url' "; $img .= "data-desktop='$desktop->url' "; $img .= "alt='$desktop->description' "; $img .= "/>"; $img .= "<noscript>"; $img .= "<img src='$desktop->url' alt='$desktop->description' />"; $img .= "</noscript>"; $img .= "</div>"; echo $img; The Javascript: //javascript var adaptive = { /** * The widths should be in an ascending order * Names can be changed but should match the datac attribute * */ sizes: { 'tiny': 0, // from 0 till 399 'small': 400, // from 400 till 699 'tablet': 700, 'desktop': 1200 }, // After window resize delay ( Change if you wish ) delay: 300, // Width of the viewport screen: 0, // Name of the current size sizeName: null, // Timeout for the window resize timeOut: null, // Calculate viewport width calcScreenWidth: function () { adaptive.screen = window.innerWidth > 0 ? window.innerWidth : screen.width; }, // Get the current size name (breakpoint) calcSizeName: function () { for (var sizeName in adaptive.sizes) { if (adaptive.screen > adaptive.sizes[sizeName]) { adaptive.sizeName = sizeName; } } }, init: function () { adaptive.calcScreenWidth(); adaptive.calcSizeName(); var containers = document.getElementsByClassName('adaptive'); for (var container in containers) { var container = containers[container]; var img = container.firstChild; if ( typeof img != 'undefined' ) { img.src = img.getAttribute("data-" + adaptive.sizeName); } } // do it again after resize end window.onresize = function() { window.clearTimeout(adaptive.timeOut); adaptive.timeOut = window.setTimeout(adaptive.init(), adaptive.delay); } } } // DOM ready $(function() { adaptive.init(); });

Maybe I'm old fashion for class names. But I do like the ' ul ul ul ' way Soma suggested. I see a few advantages in doing it the Soma way: Portability ( you don't rely on 'variable' class names, so you could drop that code to an other project without problems ) It's apparent from the CSS how the DOM looks like. It doesn't clutter the DOM with classes as CSS can handle it self on element level. Where I do use classes in menu's is for the last-child. :first-child is widely supported if elements are already in the DOM from the beginning. But :last-child, is only supported from IE9 and up.

This Module didn't have it's real own thread, now it has Markup RSS Enhanced This Module is the enhanced version of Ryan's Markup RSS Module and is completely compatible with it. In addition, this enhanced module supports the usage of enclosures a way of attaching multimedia content to RSS feeds. Give the RSS enhanced module a PageArray of pages and it will render a RSS feed from it. The Module should be used directly from your template file. In the examples the $rss variable is used for as instance of the module. $rss = $modules->get("MarkupRSSEnhanced"); Basic usage In case you only need 1 feed for your site, you need to setup the defaults in the Modules config. then you can use the code below. $items = $pages->find("limit=10, sort=-modified"); // $items, PageArray of Pages $rss = $modules->get("MarkupRSSEnhanced"); // load the module $rss->render($items); // render the feed Setup channel elements The channel element describes the RSS feed. There are 3 required channel elements: title $rss->title link $rss->url description $rss->description $rss->title = ''; // (string) Title of the feed. $rss->url = ''; // (string) URL of the website this feed lives. Example: http://www.your-domain.com/ $rss->description = ''; // (string) Phrase or sentence describing the channel. $rss->copyright = ''; // (string) Copyright notice for content in the channel. $rss->ttl = ''; // (string/integer) Number of minutes that how long it can be cached. Setup item elements Every page from the PageArray use the item element. $rss->itemTitleField = ''; // Fieldname to get value from $rss->itemDescriptionField = ''; // Fieldname to get value from $rss->itemDescriptionLength = ''; // Default 1024 $rss->itemEnclosureField = ''; // Fieldname to get file/image from $rss->itemDateField = ''; // Fieldname to get data from $rss->itemLinkField = ''; // Fieldname to get URL from or don't set to use $page->httpUrl $rss->itemAuthorField = ''; // If email address is used, itemAuthorElement should be set to author $rss->itemAuthorElement = 'dc:creator' // may be 'dc:creator' or 'author' Item element enclosure RSS enclosures are a way of attaching multimedia content to RSS feeds. All files with proper mime types are supported. If you asign an image field to the itemEnclosureField there are 3 extra options you could set. width The width of the image. height The height of the image. boundingbox Checking boundingbox will scale the image so that the whole image will fit in the specified width & height. This prevents cropping the image $rss->boundingbox = 1 // (integer) 1 or 0, on or off $rss->width = 400; // (integer) Max width of the image, 0 for proportional $rss->height = 300; // (integer) Max height of the image, 0 for proportional Prettify the feed Prettifying the feed is not supported by all clients. $rss->xsl = ''; // path to xls file $rss->css = ''; // path to css Download on GitHub View on the modules directory

@Horst, I was just thinking loud there, so I don't have a real test case & no js. But I have a site where I swap a transparent pixel, with no fallback if js is disabled. Nothing special there. After you posted your code I instantly thought about a module as the extra markup I don't want to type manually every time. Adaptive images must be easy to use. And should work without Javascript. After That I searched the net for the <picture> element, ( not that I'm keen with those HTML5 tags for those things ) Then the baby starts crying. Will come back to this.

@ivan see Macrura's post that Module is doing exactly that. ( and you should remove the if template statement ) The URL get indexed with search engines and are shared on social media & mail etc. Then changing the title will result in a 301 or in worse case a 404. There are situations where it is desirable that the url changes and thus trowing a 404, but to make this the default behaviour is bad practise in my opinion.

One thing that should be possible is to create your 'own image' format. I do think there are opensource solutions for this. But to lazy to search one But basically it looks like this: <?php $phone = $image->size(40,15); $tablet = $image->size(200,75); $desktop = $image->size(400,150); $image = "<div class='my-adaptive-image'>" . " <img src='/path/to/transparent.png' " . " data-phone='$phone->url' " . " data-tablet='$tablet->url' " . " data-desktop='$desktop->url' " . " style='display: block; height: 0 width: 0;'" . " />" . " <noscript><img src='$desktop->url' /></noscript>" . "<div>"; echo $image; You can us Javascript to replace the transparent.png with the URL matches the data attribute. And use javascript to remove the style information. At that point there a fully adaptive image. If there's no Javascript active, then the inline style of the first image prevents displaying it. And the Image inside the <noscript> takes over. There are downsides to this methode. 1. It forces the browser to repaint your page every time it finds an image. 2 It needs 1 extra request for every page where the transparent pixel is used. (but this one get cached, so not really a big deal)

@Nico You used date(DATE_RFC2822) you're better of with date(DATE_RSS). It's a W3c recomendation, some RSS clients have issues with DATE_RFC2822. DATE_RFC2822 uses differences in Greenwich time and DATE_RSS uses time zone abbreviations. So far I understand it depends on where you live if the client accepts the feed. info: http://www.electrictoolbox.com/php-date-constants/ https://pear.php.net/reference/PHP_Compat-latest/PHP_Compat/_PHP_Compat-1.6.0a3---Compat---Constant---DATE.php.html

Steve this is awesome. Great work !

In mailChimp you can use a debug service. ( I Forget the name of this service ) You can [x] check email clients. From those results a screendump is created and the result is send back to MailChimp. This process takes from 20 minutes till 7 hours and everything in between. Some screenshots only contain the viewport, others the whole newsletter. And there's no way to see the rendered source. Responsive email can it be done? Yes it can. ( for some clients ) But you need time, lot's of time and more time. Debugging newsletters is a big big hell if you asked me.

The dot concatenates the right and left variables (strings), no matter when you use spaces or not. oftopic: // 'concatenating numbers' echo 6 . 6; //echo's the string 66 echo 6.6; //echo's the float 6.6

Can you tell what a huge amount of pages is?

Fixed a rendering bug when using this field in FieldsetTabs Fixed a SQL State bug that could occur in some circumstances when deleting pages using this fieldtype

Silly question: Do you have this code on multiple pages running, say on the basic-page template? And you have populated all those pages ? The FALSE returning is a little bit weird, as it should be an integer. ( Sometimes I use the homepage for storing slideshow images. And I have a variable name for the home named $home. Then I pull it from $home->homepage_slideshow. ) Or maybe you're just putting it in the wrong template or editing a different install ( been there, done that ). BTW, you code looks fine.

And a meetup in Köln ? Is that option ?

It's a guess here, maybe it's helpfull. Looks like it has something to do with encodings. Did you copy & paste in some codes as that could leave some artefacts. If you're on the mac, use TextWrangler/BBedit and use the command 'Zap Gremlins'. Or what is also worth trying: 1. copy the code to a textarea. 2. create a new document. 3. copy the code from the textarea to the new document.

Read your post several times but I haven't the foggiest idea what you want to accomplice.

This is exactly what I use BBEdit for, haven't found any editor that does this better then TextWrangler/BBEdit.