Skip to content

STRF-4527: Fix amp image sizes#1192

Merged
mattolson merged 1 commit intobigcommerce:masterfrom
mattolson:STRF-4527
Mar 13, 2018
Merged

STRF-4527: Fix amp image sizes#1192
mattolson merged 1 commit intobigcommerce:masterfrom
mattolson:STRF-4527

Conversation

@mattolson
Copy link
Contributor

What?

  • Instead of hardcoding 300x300, use the actual image dimensions
    for product images on the product list

Screenshots

Before

screen shot 2018-03-12 at 5 29 09 pm

After

screen shot 2018-03-12 at 5 28 14 pm

@bigbot
Copy link

bigbot commented Mar 13, 2018

Autotagging @bigcommerce/storefront-team @davidchin

@mattolson
Copy link
Contributor Author

@bigcommerce/storefront-team

@ghost
Copy link

ghost commented Mar 13, 2018

interesting, I wonder why was that hardcoded? Oh well, glad it was a quick fix

{{/or}}
<a data-vars-product-link="{{url}}" data-vars-product-id="{{id}}" data-vars-product-name="{{name}}" href="{{url}}">
<amp-img class="card-image" src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" width="300" height="300" layout="responsive" alt="{{image.alt}}"></amp-img>
<amp-img class="card-image" src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" width="{{first (split theme_settings.productgallery_size 'x')}}" height="{{last (split theme_settings.productgallery_size 'x')}}" layout="responsive" alt="{{image.alt}}"></amp-img>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not familiar with this template language.
width="{{first (split theme_settings.productgallery_size 'x')}}" height="{{last (split theme_settings.productgallery_size 'x')}}"

not sure what these are doing but is it guaranteed to have a 'first'/'last'? otherwise would you end up with a 0 default height and image wouldn't display?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we are. This code is pulling values out of the theme configuration, and they are formatted as ${width}x${height}. For example: https://github.com/bigcommerce/cornerstone/blob/master/config.json#L80

* Instead of hardcoding 300x300, use the actual image dimensions
  for product images on the product list
@mattolson mattolson merged commit 9a54b8b into bigcommerce:master Mar 13, 2018
@mattolson mattolson deleted the STRF-4527 branch March 13, 2018 19:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants