[NARRATIVE THEME] - Removing crop from Image+Text section

Shopify Partner
13 0 0

Basically,  I want remove image crop and have the images in the .feature-row section (Image+Text) resize and position automatically based on display size. I've tried to edit the code myself however have not had much luck finding the correct line of code. Currently the image is cut off on both desktop and mobile view. Image height does not matter so long as the entire image fits on the screen. Any Idea what I can change here to do that?

.feature-row {
  @include display-flexbox();
  @include align-items;

  @include media-query($small) {
    @include flex-direction(column);
  }

  .ie9 & {
    position: relative;
  }
}

.feature-row__item {
  @include flex(0 1 100%);

  @include media-query($small) {
    @include flex(1 1 auto);
  }

  .ie9 & {
    position: relative;
  }
}

.feature-row__image-crop--circle,
.feature-row__image-crop--square {
  @include media-query($small) {
    padding: $section-mobile-space 0;
  }
}

.feature-row__heading {
  @include media-query($small) {
    @include separator(center);
  }

  @include media-query($medium-up) {
    @include separator;
  }
}

.feature-row__image-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;

  @include media-query($small) {
    width: 100%;
    order: 0;

    .feature-row-mobile--bottom & {
      order: 1;
    }
  }

  .ie9 & {
    margin: 0 auto;
    width: 280px;
    height: 280px;

    @include media-query($medium-up) {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 100%;
    }
  }
}

.feature-row__image {
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;

  @include media-query($small) {
    margin-bottom: $gutter * 3;

    .feature-row-mobile--bottom & {
      margin-bottom: 0;
      margin-top: $section-mobile-space;
    }

    .feature-row__image-crop--none & {
      height: 250px;
    }
  }

  @include media-query($medium-up) {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
  }

  .ie9 & {
    height: 100%;
    width: 100%;
  }
}

.feature-row__image-crop {
  overflow: hidden;

  @include media-query($medium-up) {
    position: absolute;
    top: 50%;
    left: 100%;
    @include transform(translate(-50%, -50%));
  }

  .feature-row__image-crop--circle &,
  .feature-row__image-crop--square & {
    height: 200px;
    width: 200px;

    @include media-query($medium-up) {
      width: 320px;
      height: 320px;
    }
  }

  .feature-row__image-crop--circle & {
    border-radius: 50%;
  }

  .placeholder-svg {
    @include transform(scale(1.5));
  }
}

.feature-row__text {
  padding: ($gutter * 7) ($gutter * 2);
  margin: 0 auto;
  max-width: 500px;

  @include media-query($small) {
    text-align: center;
    padding: 0 $gutter;
    order: 1;

    .feature-row__image-crop--none & {
      padding-bottom: $section-mobile-space;
    }

    .feature-row__image-crop--none.feature-row-mobile--bottom & {
      padding-top: $section-mobile-space;
    }

    .feature-row-mobile--bottom & {
      order: 0;
      padding-bottom: 0;
    }


  }

  @include media-query($medium-up) {
    width: 50%;

    .feature-row--small & {
      padding: ($gutter * 3) ($gutter * 2);
    }

    .feature-row--large & {
      padding: ($gutter * 11) ($gutter * 2);
    }

    .feature-row--x-large & {
      padding: ($gutter * 15) ($gutter * 2);
    }
  }

  .ie9 & {
    display: inline-block;
    max-width: none;
  }
}

.feature-row__btn {
  margin-top: $gutter;
}

 

0 Likes
Shopify Partner
13 0 0

Anybody have luck with this?

0 Likes
Astronaut
1082 147 272

Go into your sections and open the featured-row.liquid

Scroll down to:

{% capture image_layout %}
  <div class="feature-row__item feature-row__image-wrapper">
    {% if section.settings.image != blank %}
      <div class="feature-row__image feature-row__image--{{ section.id }}{% if image_crop %} feature-row__image-crop{% endif %} lazyload" data-sizes="auto" data-bgset="{% include 'bgset', image: section.settings.image %}"></div>

      <noscript>
        <div class="feature-row__image feature-row__image--{{ section.id }}{% if image_crop %} feature-row__image-crop{% endif %}" style="background-image: {{ section.settings.image | img_url: 'master' }}"></div>
      </noscript>
    {% else %}
      <div class="feature-row__image feature-row__image--{{ section.id }}{% if image_crop %} feature-row__image-crop{% endif %}">{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}</div>
    {% endif %}
  </div>
{% endcapture %}

Then delete the if statements and their contents in the "class=" portions of the div tags.

{% capture image_layout %}
  <div class="feature-row__item feature-row__image-wrapper">
    {% if section.settings.image != blank %}
      <div class="feature-row__image feature-row__image--{{ section.id }} lazyload" data-sizes="auto" data-bgset="{% include 'bgset', image: section.settings.image %}"></div>

      <noscript>
        <div class="feature-row__image feature-row__image--{{ section.id }}" style="background-image: {{ section.settings.image | img_url: 'master' }}"></div>
      </noscript>
    {% else %}
      <div class="feature-row__image feature-row__image--{{ section.id }}">{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}</div>
    {% endif %}
  </div>
{% endcapture %}

Then at the top there are some style tags inbetween an if statement, change that to this:

{% if section.settings.image != blank %}
  <style>
    .feature-row__image--{{ section.id }} {
      background-position: center center;
      background-size:contain;
    }
  </style>
{% endif %}

Let me know if this helps.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Astronaut
1082 147 272

In addition to this you should make a media query in that style section too and give your image a height or it wont show up on mobile:

{% if section.settings.image != blank %}
  <style>
    .feature-row__image--{{ section.id }} {
      background-position: center center;
      background-size:contain;
    }
@media screen and (max-width:745px){
    .feature-row__image--{{ section.id }} {
     height:400px;
    }


}
  </style>
{% endif %}

Where height is whatever you want the height to be.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
3 0 0

Dude.

 

This is great! I have spent two days trying to get this right. Shopify support wouldn't help "that's how it is, all phones display it differently. Looks good on mine"


Well, this fixed it! My page looks awesome and you are awesome for sharing your knowledge.

 

You deserve a medal and a pint of cold beer.

 

Thanks for being a cool human. 

0 Likes