Twig PageTableExtended (Flexible Content)

[ferraky]

Hey guys,

I am a long WP user and have recently been moving to PW for all my client sites and am LOVING it. Great work on the CMS guys.

I am using the flexible content strategy with the PageTableExtended module along with the Twig and Dataproviders modules. I am running into an issue on the backend, when viewing a page that has various "page components/page tables" built up, the images show as broken links and any image methods ( like size ) will blow up the page.

Once I open the page table and close it everything is good and the images show up. 

Below are a couple screenshots.

This is a shot of when I first go into the page:

https://www.dropbox.com/s/siixtkhe1qpgc3p/Screenshot%202015-06-06%2011.03.07.png?dl=0

This is a shot after I have clicked to edit the page and have exited out.

https://www.dropbox.com/s/q9xjmp3fagcwig2/Screenshot%202015-06-06%2011.03.47.png?dl=0

You can see how it loads up the images like it has finally instantiated the page object or something.

Hopefully this makes sense and I am explaining it well enough. 

Thanks in advance for any input as it is greatly appreciated.

[ferraky]

I must be doing something wrong to not get a single response. Any help is greatly appreciated.

[LostKobrakai]

The lack of response is most likely because there are most likely just a few people, who are using the same or similar combination of module you're using. Also this seems to be an issue with PageTableExtended and it's rendering mechanism, so you could maybe post in the support thread of the module. 

[ferraky]

Thanks LostKobraki for the response. I will try posting on their thread like you suggested.

Thanks again!

[felix]

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.

[ferraky]

Hey felix,

Here is some code from a couple of the templates that are used as page table page chunks. This is my image gallery template that is one of the templates that is having the issue.

This template is loaded in a repeater on the front end hence the "data" var, but when on the backend I grab the current page. 

Let me know if you need more info and I can give read access to the bitbucket account I use.

Thanks for your time!

{% if data is null %} {% set data = page %} {% endif %}
<article class="c-component  c-image-gallery">
	<h4 class="c-image-gallery__heading">{{ data.heading }}</h4>
	<ul class="c-image-gallery__list  js-image-gallery">
	{% for image in data.images %}		
		<li class="c-image-gallery__item">
			<a href="{{ image.url }}" data-effect="mfp-zoom-in" title="{{ image.description }}">
				<img src="{{ image.size(120, 120).url }}">
			</a>
		</li>
	{% endfor %}
	</ul>
</article>

[ferraky]

After posting the above I realized that that page component actually isn't one thats having the issue. It looks like it is when I have a repeater on the page template.

The below template/component is one that has the issue of not loading up the images initially when viewing the page in the dashboard.

{% if data is null %} {% set data = page %} {% endif %}
	
<article class="c-component  c-content-block" {% if data.color %} style="background-color: {{ data.color }}" {% endif %}>
	{% for column in data.get('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.get('image') %} <figure><img src="{{ column.get('image').get('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>

[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>

[ferraky]

That did the trick!

Thank you so much man, and thanks for the tip on ditching the get() calls. Never sure when and when not to use the get method.

Thanks again, you're a life saver.