Jump to content

Twig PageTableExtended (Flexible Content)


ferraky
 Share

Recommended Posts

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.

Link to comment
Share on other sites

  • 3 weeks later...

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...