d
Topic
Posts:
5
13 days ago

Debut Theme - Mobile vs. Desktop View for 'Image With Text'

Hi there,

Is there a specific size that would be right for it to display accurately across all devices? To display the entire image that is... without adjusting it to a specific height/width. (hence it cutting off from the actual essence of the image - either the sides or top/bottom)

If not, how would I adjust the theme liquid file to not dynamically display the image - but rather static across all devices?

Thanks a lot,

Brenda

i
Replies
Tira Shopify Employee
Posts:
14
Last edited 10 days ago

Hi, Brenda! Tira here, a Shopify Guru ready to help!

Have you tried to make any coding changes already? Could you post a screenshot of what it is specifically you're looking to adjust?

If you're looking to adjust the Slideshow, it's recommended to have a width of 1200px and the adjust the height according to image's size:

You can avoid cropping of the image by choosing "Adapt to first image" for your slide height in the Slideshow settings. Use an image with a width-to-height ratio of 2:1 and the recommended size of 1200px by 600px. Set all of your other slideshow images to the same ratio and size, and they should show up on device screens like this:

 

 

There's more information in our help doc here that you can take a look at: Debut Theme - Slideshow Guidelines.

We also have a guide here on Best Practices for Slideshows and Full Width Images. There are some great recommendations here on image sizing, positioning, how images appear on wide vs. tall screens and guidelines on adding text to your slideshow images.

Let me know if that helps!

Tira | Social Support Team | support@shopify.com
Ninthony Member
Posts:
32
10 days ago

Generally there isn't a set size for images that you can set that is effective for both mobile and desktop. However, if what you're trying to do is make it so that the image will always be displayed at it's original aspect ratio, you can certainly do that.

<img src = "yourimg.jpg" style="width:100%;height:auto;>

this image will always be it's full width, and if the screen is smaller than it's original width, it will shrink with the screen size and the height will adjust accordingly. With that in mind, if the image has more of a portrait landscape, then it's going to probably shrink quite a bit. Here's an example on w3schools website:

https://www.w3schools.com/howto/howto_css_image_responsive.asp

If you adjust the window of your browser you can see the effect. If that's what you're looking for anyway, else if you could give more information about what you specifically want to accomplish I'd be more than happy to help.

Posts:
5
10 days ago

(I think my response wasn't submitted earlier since I wasn't logged in, so here you go again)

Thanks Ninthony.

I'm not too familiar, but do I edit the existing code related to the 'image with text overlay' section? Or do I add a custom field with the code you mentioned? And if the latter, where should the actual image reside? Since I believe it's supposed to be accessible not just to me?

And if the former, first I'm not sure if I'm editing the right (image-bar.liquid) file. If this is in fact it, I'll paste the code I'm seeing below... Would you be able to tell me which code would need to be changed? Thanks so much.

 

<div class="grid grid--no-gutters image-bar image-bar--{{ section.settings.section_height }}">
  {% case section.blocks.size %}
    {% when 1 %}
      {%- assign column_size = '' -%}
    {% when 2 %}
      {%- assign column_size = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign column_size = 'medium-up--one-third' -%}
    {% else %}
      {%- assign column_size = 'medium-up--one-quarter' -%}
  {% endcase %}

  {% for block in section.blocks %}
    <div class="grid__item {{ column_size }} js" {{ block.shopify_attributes }}>
      {% if block.settings.link != blank %}
        <a class="image-bar__link" href="{{ block.settings.link }}">
          <div class="image-bar__item box ratio-container lazyload"
               data-bgset="{% include 'bgset', image: block.settings.image %}"
               data-sizes="auto"
               data-parent-fit="cover"
               style="background-position: {{ block.settings.alignment }}; background-image: url('{{ block.settings.image | img_url: '300x300' }});">
      {% elsif block.settings.image != blank %}
        <div class="image-bar__item image-bar__item--{{ block.id }} box ratio-container lazyload"
             data-bgset="{% include 'bgset', image: block.settings.image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-position: {{ block.settings.alignment }}; background-image: url('{{ block.settings.image | img_url: '300x300' }});">
      {% else %}
        <div class="image-bar__item">
      {% endif %}
      <div class="image-bar__content{% if block.settings.cta_label != blank or block.settings.link != blank %} image-bar__overlay{% endif %}">
        {% if block.settings.image == blank %}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}

        {% if block.settings.cta_label != blank %}
          <div class="image-bar__text">
            <h3 class="image-bar__caption">{{ block.settings.cta_label | escape }}</h3>
          </div>
        {% endif %}
      </div>
      {% if block.settings.link != blank %}
        </div></a>
      {% else %}
        </div>
      {% endif %}
    </div>
    <noscript>
      <div class="grid__item {{ column_size }}" {{ block.shopify_attributes }}>
        <div class="image-bar__item image-bar__item--{{ block.id }}" style="background-image: url({{ block.settings.image | img_url: '2048x' }});"></div>
      </div>
    </noscript>
  {% endfor %}
</div>

{% if section.blocks.size == 0 %}
  {% include 'no-blocks' %}
{% endif %}

Posts:
5
10 days ago

Thanks Tira.

Was wondering why I didn't see the 'adapt to first image' option. Based on the link provided, seems like that feature doesn't really exist on the Debut theme.

Good idea though, appreciate your response regardless. ;)

Ninthony Member
Posts:
32
9 days ago

I'm sorry I misunderstood your question, I didn't realize it was in reference to a specific section in your theme called "Image with text". However I'm still not entirely  sure on what it is you want to accomplish. I downloaded the Debut theme and am loading images into the Image With Text section, they do not seem to cut off for me at all. All the images I load in seem to be scaled to the original aspect ratio and then center the text on the side with the image. Are you saying you want the image to span the entire width of the page and the text to overlay it? Sorry I can't be of more help, I just dont think I'm understanding.

Posts:
5
6 days ago

Thanks so much for your effort... Do you mind taking a look at my website to get a better idea? It's the main image when visiting it... See the mobile and desktop version. Its' original image has more 'bed space' for a lack of better description.

URL: quiunum.com

Password: jiadro

 

Thanks!

Posts:
5
5 days ago

Hi Ninthony,

Wondering if you got a chance to check it out yet? Lemme know if there's any further info you need.

 

Thanks so much,

Brenda

Ninthony Member
Posts:
32
Last edited 4 days ago

Hey Brenda, I checked out your site. Do you know anything about HTML at all? It would be easier to explain. Anyway, if you're viewing your page in a browser you can right click and "inspect" on your banner. You can see all the styles that are being applied to it. It's in a container that only has 300px of height, so that's why you can't view the whole image. You can add a media query at the bottom of your theme.scss.liquid file to change that. 

 

@media only screen and (min-width: 768px){

.hero--small {

height: 1058px;

}

}

That should show you the full image for your banner on desktop, basically it's saying that any screen size above 768 pixels, show this. I don't think this will effect your mobile version. 

 

Edit: I noticed that after these changes are made, if you shrink the browser it could push the image down a little bit so some white is showing on the background. I don't know exactly how your hero image is loaded, but if you can set properties inline I would make the background-position:center center; and background-attachment:fixed. Even still, it cuts off a little bit of your page but adds a nice little paralax effect. If I were to do the hero image for my page, I would use an img element instead and set it's properties to width:100% and height:auto; if I wanted it to remain at full width, but you would have to redo how it handles mobile too. 

Tira Shopify Employee
Posts:
14
4 days ago

Hi Brenda, Tira here again from the Shopify Guru team.

The link I provided earlier was for the Debut theme, so everything in that help doc would apply to the theme.

The latest version of the Debut theme has the “Adapt to First Image” option located in the settings for the Slideshow. Themes typically update to the latest version automatically if no code changes were made. If you have had changes made to the code though, then you would have to update the theme manually.

I recommend making a backup copy of your theme by going to “Online Store > Themes > Actions > Duplicate” so that you can always go back to the theme you had before.

You can find the latest version of Debut here. Any customizations that you have had before would need to be added again to the latest version.

Gurus aren’t trained in coding, but I did want to provide clarification on what Ninthony mentioned in their last reply, about that code not affecting the mobile version. It will only apply to the tablet and desktop versions of your theme.

In the code that Ninthony pointed out, you could also try replacing the

@media only screen and

with

@include media-query($medium-down)

and keep everything else the same.

It would then look something like this:
 

@include media-query ($medium-down) (min-width: 768px){


.hero--small {


height: 1058px;


}


}



I also wanted to share our help doc here on how to roll-back your theme, so that you can revert code changes back to the last save point.

Hope that helps!

Tira | Social Support Team | support@shopify.com