felix
-
Posts
214 -
Joined
-
Last visited
-
Days Won
8
Everything posted by felix
-
Hi ferraky, as I've mentioned: No matter if you set the image field to contain only one image. It will be an array of images (containing one image) in the backend. A post explaining this can be found here. Try using "first()" and see if it helps (you can ditch all those ".get()" calls, too): {% set data = data == null ? page : data %} <article class="c-component c-content-block" {% if data.color %} style="background-color: {{ data.color }}" {% endif %}> {% for column in data.content_columns %} <div class="c-content-block__column {{ data.collapse_mobile ? 'c-content-block__column--collapse' : '' }}" style="{{ column.width ? "width:" ~ column.width ~ "%;" : "width:50%;" }}"> {% if column.image %} <figure><img src="{{ column.image.first().url }}"></figure> {% endif %} {% if column.content %} {{ column.content }} {% endif %} {% if column.icon %} <span class="c-content-block__icon {{ column.icon }}"></span> {% endif %} </div> {% endfor %} </article>
-
RT @thomasfuchs: "Yes, finally a new UI paradigm I can learn for one single use case that I'll never do again! Awesome!"—No user, ever
-
Hi ferraky, Sorry for answering your post that late - I didn't see it before. We're using this combination a lot (as TemplateTwigReplace & TemplateDataProviders are developed by us). Could you post some code of your templates? I think it has to do with image fields always beeing a collection in the editor.
-
anybody could show an example of how to use $config->ajax ?
felix replied to adrianmak's topic in Getting Started
You're right: This is propably considered "bad practice". Therefore I've changed my post. -
anybody could show an example of how to use $config->ajax ?
felix replied to adrianmak's topic in Getting Started
In fact my example was very much simplified for this post. As we're using TemplateTwigReplace, we benefit from Twigs "extend" and "block" syntax. Regarding the Project named above there is one _base-template.twig that handles the "normal" output. It looks like this: <!DOCTYPE html> <html lang="de-DE" class="no-js"> <head> {% include 'includes/htmlhead.twig' %} {% block htmlHead %}{% endblock htmlHead %} </head> <body data-module="ajaxcontent,fallback" class="js-template-{{ page.get('template')}}" itemscope itemtype="http://schema.org/WebPage"> <div id="pt-main" class="pt-perspective"> <div class="pt-page pt-page-current js-pt-main"> {{ page.renderChunk('chunks/header.twig', config.ajax ) }} {% block header %}{% endblock header %} <!-- #### MAIN CONTENT START #### --> <main role="main"> {% block mainContent %}{% endblock mainContent %} </main> <!-- #### MAIN CONTENT END #### --> {{ page.renderChunk( 'chunks/footer.twig', config.ajax ) }} </div> <!-- ADDITIONAL CONTENT WILL BE PLACED HERE. --> <div class="pt-page ajaxcontent js-ajaxcontent" id="ajaxcontent"> <div class="ajaxcontent__inner"> <div class="ajaxcontent__content js-ajaxcontent-content"></div> </div> </div> <!-- 2nd LEVEL ADDITIONAL CONTENT WILL BE PLACED HERE. --> <div class="pt-additional-content ajaxcontent js-ajaxcontent-lvl2" id="ajaxcontent-lvl2"> <div class="ajaxcontent__inner"> <div class="ajaxcontent__content js-ajaxcontent-lvl2-content"></div> </div> </div> </div> {% include 'includes/javascript.twig' %} {% block beforeBodyEnd %}{% endblock beforeBodyEnd %} </body> </html> basically it contains the html wrapper plus some blocks that can or cannot be filled with further content. The _ajax-template.twig acts as a wrapper for pages that are displayed via ajax: {% block header %}{{ page.renderChunk('chunks/header-ajax.twig') }}{% endblock header %} {% block mainContent %}{% endblock mainContent %} {# block footer %}{{ page.renderChunk( 'chunks/footer.twig', config.ajax ) }}{% endblock footer #} As you can see it is missing all chrome and unneeded stuff plus it includes a special header (one without navigation elements other than a "close" button and the logo). ALL pages extend those two default wrapper-templates and add their content to the respective blocks. A (very simple) template for outputting pages like legal information with just a headline and content field would then look like this: {% set extendsVar = config.ajax ? '_ajax-template.twig' : '_base-template.twig' %} {% extends extendsVar %} {% block mainContent %} <div class="row"> <div class="small-12 columns editor"> <h1 class="headline headline--stage">{{ page.get('headline|title') }}</h1> {{ page.content }} </div> </div> {% endblock %} ... based on the config.ajax value the template chooses which layout file will be extended and then renders it's output to the mainContent area. simple as that -
anybody could show an example of how to use $config->ajax ?
felix replied to adrianmak's topic in Getting Started
you can use it in several scenarios: Progressive Enhancement of forms: Return json for inline form validation (using the same url for the "good old form roundtrip action" and json_encoded responses: $response = array( error => true, status => 'unsubmitted', msg => 'no valid form data given' ); do { if ($_SERVER['REQUEST_METHOD'] != 'POST') break; $response['status'] = 'submitted'; if(!$someValidator->validate($_POST)) break; // more validation logic here... $response['error'] = false; } while (false); if( $config->ajax ) { if (!headers_sent()) { header('Content-type: text/json'); header('Content-type: application/json'); } echo json_encode($response); return; } Rendering different templates when urls are accessed via ajax: $template = $config->ajax ? "ui/projects_ajax.php" : "ui/projects.php"; $content = wireRenderFile( $template, array( "title"=>$title, "CategoryData"=>$pages->find("/categories/,include=hidden"), "PageData"=>$page )); ... we use this technique here (in combination with pushstate/history.js): http://www.accom.kg/ - If templates are accessed via ajax they are rendered without footer and header. This way we only load the necessary parts to be displayed. If the user (or google) visits the "real" page, navigation and footer are rendered. Redirecting users that accidentally visit some api endpoint that should only be used via ajax: if( !$config->ajax ) { $session->redirect('/'); } // API-LOGIC HERE. .... plus a billion other examples -
RT @lukew: Yes, you can do this for "Web apps". Google Photos is mobile-first responsive design & highly performant. http://t.co/vwtM0Iol…
-
Offtopic: Has anyone tried react native yet? I'm curious if it is as good as i think it is.
-
RT @Locomalito: I think monotask is best for humans, just because we have feelings http://t.co/uLzwSZNS7O
-
For quicker "initial delivery": Try to do a flush() (or {% flush %} as you're using twig) where it makes sense ( see http://www.phpied.com/progressive-rendering-via-multiple-flushes/ ). There is also a setting to use twig cache in the module options of TemplateTwigReplace. If you haven't activated it yet now would be a great time to do it
-
RT @gurkendoktor: and as I was crafting a blog post, @adactio somehow read my thoughts https://t.co/PJ0Ep4DvjU -it’s our responsibility to …
-
RT @lukew: Explain to me how the Web "lost"?https://t.co/kFJZ9GNZkGStop thinking Web VS. native & it's all good: http://t.co/ryw62x2htC
-
They now are offering to install PW from the admin interface of your webspace: https://twitter.com/domainfactory/status/603131328826101760 (Fun fact: Almost all of our PW installations run there as we usually recommend DF as our preferred hosting company)
-
RT @domainfactory: #ProcessWire kann ab sofort mit nur wenigen Klicks über das domainFACTORY-Kundenmenü installiert werden: https://t.co/6A…
-
RT @gutjahr: Der Tod ist ein Arsch. http://t.co/KllF5jvXUX Followerpower: Ihr könnt helfen. Allein Euer RT wäre toll! http://t.co/eAfgqyTixh
-
#ACE_UES_HRS_CE_WRK_UES_APP_C_FIF_SBP .PSLEVEL1GRID .PSLEVEL1GRIDODDROW:nth-of-type(4) #sharepoint #legacycode #cssfromhell /o\
