Ticket #18653 - AMP version doesn't display images in BLOG (error.js:201 The "height" attribute is missing:)

Hi,

I have checked that in AMP version, recents blog are not displayed because images have attribute missings

The “height” attribute is missing:
<amp-carousel height width layout=​”responsive” type=​”slides” class=​”amp-posts i-amphtml-element i-amphtml-error” controls data-next-button-aria-label=​”Next” data-previous-button-aria-label=​”Previous”>​…​</amp-carousel>​

Please go to AMP version in following URL:
https://www.ordeparis.com/mobile

Open browser console and see the issue.

Best regards!

Comments

Fred 17 Jul 2020, 13:32

I need access to your server through FTP, for now I'm able to connect but see no content there https://take.ms/cz9J6

Joaquín Bosch Molina 17 Jul 2020, 13:46

Hi,

tell me the way to give you new FTP and BO access with private mode to avoid share this information.

Fred 18 Jul 2020, 14:47

Please fill out all necessary fields in your profile https://support.promokit.eu/index.php?do=myprofile

Joaquín Bosch Molina 19 Jul 2020, 20:00

Just updated, please you can access into shop.

Fred 20 Jul 2020, 12:21

I just added a fix into the file /httpdocs/modules/pspagebuilder/views/templates/front/widgets/widget_ampblogposts.tpl but no charge front page. Maybe you have some cache enabled?

Joaquín Bosch Molina 20 Jul 2020, 13:20

Hi,

It is very strange because the modification date of this file was not changed...so maybe the changes into file code source was not effective.

In anyway, please can you make the changes overriding this module file into alysum-child theme?. That is the better way to do it to avoid lost changes when theme updates.

Best rergards!

Fred 20 Jul 2020, 13:36

I see it's updated https://take.ms/fkzlU

Joaquín Bosch Molina 20 Jul 2020, 13:49

Hi,

your code is:

**<amp-carousel height="{if isset($posts.0.banner_thumb_size)}{$posts.0.banner_thumb_size.1}{/if}" width="{if isset($posts.0.banner_thumb_size)}{$posts.0.banner_thumb_size.0}{/if}" layout="responsive" type="slides" class="amp-posts" controls data-next-button-aria-label="{l s='Next' mod='pspagebuilder'}"
  data-previous-button-aria-label="{l s='Previous' mod='pspagebuilder'}">
  {foreach from=$posts item=post name=item_name}
  <div id="post-{$post.id_simpleblog_post}">
    <div class="ampstart-card m1 blog">
      {if isset($post.banner_thumb) && !empty($post.banner_thumb)}
      <amp-img src="{$post.banner_thumb}" layout="responsive" {if isset($posts.0.banner_thumb_size)}{$post.banner_thumb_size.3}{/if} class="m15"></amp-img>
      {/if}
      <a href="{$post.url}" class="title m15 ellipsis db">{$post.title}</a>

      <a href="{$post.url}" class="button">{l s='Read more' mod='pspagebuilder'}</a>

    </div>
  </div>
  {/foreach}
</amp-carousel>**

In this code you didn't indicate height and width value in amp-img tag. Also in amp-carousel, the attrbiute heigh and width only has value if $posts.0.banner_thumb_size.

Browser console errors are:

error.js:201 The "height" attribute is missing:
<amp-carousel height width layout=​"responsive" type=​"slides" class=​"amp-posts i-amphtml-element i-amphtml-notbuilt amp-notbuilt i-amphtml-error amp-unresolved i-amphtml-unresolved" controls data-next-button-aria-label=​"Next" data-previous-button-aria-label=​"Previous">​…​</amp-carousel>​

error.js:201 The "height" attribute is missing:
<amp-img src=​"/​modules/​ph_simpleblog/​covers/​12-thumb.jpg" layout=​"responsive" class=​"m15 i-amphtml-element i-amphtml-error">​</amp-img>​

error.js:201 The "height" attribute is missing:
<amp-img src=​"/​modules/​ph_simpleblog/​covers/​9-thumb.jpg" layout=​"responsive" class=​"m15 i-amphtml-element i-amphtml-error">​</amp-img>​

Best regards!

Fred 20 Jul 2020, 14:09

width and height are available in this variable {if isset($posts.0.banner_thumb_size)}{$post.banner_thumb_size.3}{/if}

Joaquín Bosch Molina 20 Jul 2020, 17:54

Hi Fred,

Can you check browser console errors before confirming previous message?.

Where are you setting heigh and width in amp-img tag?

YOUR CODE

<amp-img src=​"/​modules/​ph_simpleblog/​covers/​9-thumb.jpg" layout=​"responsive" class=​"m15 i-amphtml-element i-amphtml-error">​</amp-img>​

No height and Width attributes in this code.

YOUR CODE

<amp-carousel height="" width="" layout="responsive" type="slides" class="amp-posts i-amphtml-element i-amphtml-error" controls="" data-next-button-aria-label="Next" data-previous-button-aria-label="Previous">

Can you tell me where is the value of heigh and width in previous code?

those are the errors that browser console is launched.

In this code:

{if isset($posts.0.banner_thumb_size)}{$post.banner_thumb_size.3}{/if}

Are you sure that it gives true?. I think not, because height and width values are null.

Fred 20 Jul 2020, 23:07

I need to see what's inside "blog's" variable. I have added it to the file https://take.ms/MhgSs but there is no any result. There is seems a cache issue
Please also make sure you added cover images in the posts settings

Joaquín Bosch Molina 21 Jul 2020, 13:33

When you change some code, you should clean Prestashop cache, otherwise the changes will not be visible.

Please check now.

you have BO access, so you can clean Prestashop cache (Performance) each time you modify code.

Best regards!

Fred 21 Jul 2020, 17:10

blog images works fine as I can see https://take.ms/2Qq6B

Joaquín Bosch Molina 21 Jul 2020, 23:29

Yes, It is fixed.

Could you tell me the name of the files and location that you have modified?. I will save it into child theme to keep these modifications.

Best regards

Fred 22 Jul 2020, 11:24

I didn't modify any files, I just opened your home page and it was ok
Before that I have modified the file /httpdocs/modules/pspagebuilder/views/templates/front/widgets/widget_ampblogposts.tpl