htmlsassjekyllyaml-front-matter

Is there any way to apply object-position to a div (without using <img>)?

I'm trying to adjust an image in a <div> on a jenkyll template minimal-mistakes. Because the default html uses div for both images and video (I think?) it does not use the appropriate tags to be able to implement object-position. The part I'm editing is the Header Image Overlay as I want a specific part of the image to be visible on mobile.

The original code:

{% capture overlay_img_path %}{{ page.header.overlay_image | relative_url }}{% endcapture %}

{% if page.header.overlay_filter contains "gradient" %}
  {% capture overlay_filter %}{{ page.header.overlay_filter }}{% endcapture %}
{% elsif page.header.overlay_filter contains "rgba" %}
  {% capture overlay_filter %}{{ page.header.overlay_filter }}{% endcapture %}
  {% capture overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}){% endcapture %}
{% elsif page.header.overlay_filter %}
  {% capture overlay_filter %}rgba(0, 0, 0, {{ page.header.overlay_filter }}){% endcapture %}
  {% capture overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}){% endcapture %}
{% endif %}

{% if page.header.image_description %}
  {% assign image_description = page.header.image_description %}
{% else %}
  {% assign image_description = page.title %}
{% endif %}

{% assign image_description = image_description | markdownify | strip_html | strip_newlines | escape_once %}

<div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}"
  style="{% if page.header.overlay_color %}background-color: {{ page.header.overlay_color | default: 'transparent' }};{% endif %} {% if overlay_img_path %}background-image: {% if overlay_filter %}{{ overlay_filter }}, {% endif %}url('{{ overlay_img_path }}');{% endif %}"
>
  {% if page.header.overlay_color or page.header.overlay_image %}
    <div class="wrapper">
      <h1 id="page-title" class="page__title" itemprop="headline">
        {% if paginator and site.paginate_show_page_num %}
          {{ site.title }}{% unless paginator.page == 1 %} {{ site.data.ui-text[site.locale].page | default: "Page" }} {{ paginator.page }}{% endunless %}
        {% else %}
          {{ page.title | default: site.title | markdownify | remove: "<p>" | remove: "</p>" }}
        {% endif %}
      </h1>
      {% if page.tagline %}
        <p class="page__lead">{{ page.tagline | markdownify | remove: "<p>" | remove: "</p>" }}</p>
      {% elsif page.header.show_overlay_excerpt != false and page.excerpt %}
        <p class="page__lead">{{ page.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</p>
      {% endif %}
      {% include page__meta.html %}
      {% if page.header.cta_url %}
        <p><a href="{{ page.header.cta_url | relative_url }}" class="btn btn--light-outline btn--large">{{ page.header.cta_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a></p>
      {% endif %}
      {% if page.header.actions %}
        <p>
        {% for action in page.header.actions %}
          <a href="{{ action.url | relative_url }}" class="btn btn--light-outline btn--large">{{ action.label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a>
        {% endfor %}
      {% endif %}
    </div>
  {% else %}
    <img src="{{ page.header.image | relative_url }}" alt="{{ image_description }}" class="page__hero-image">
  {% endif %}
  {% if page.header.caption %}
    <span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
  {% endif %}
</div>

My edits:

<div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}" {% if page.header.overlay_position %}data-object-position="{{ page.header.overlay_position }}"{% endif %}
  style="{% if page.header.overlay_color %}background-color: {{ page.header.overlay_color | default: 'transparent' }};{% endif %} {% if overlay_img_path %}background-image: {% if overlay_filter %}{{ overlay_filter }}, {% endif %}url('{{ overlay_img_path }}');{% endif %}{% if page.header.overlay_position %}object-position: {{ page.header.overlay_position }};{% endif %}"
>

Is there a way to do this or do I have to rewrite the html template?

Solution

  • You can't use object-position.

    object-position

    The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box.

    Source MDN - object-position

    Replaced element's are typically <iframe>, <video>, <embed>, `.

    But you don't need object-position. As you can see in your code, the image comes from the background-image property on the div:

    <div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}"
  style="{% if page.header.overlay_color %}background-color: {{ page.header.overlay_color | default: 'transparent' }};{% endif %} {% if overlay_img_path %}background-image: {% if overlay_filter %}{{ overlay_filter }}, {% endif %}url('{{ overlay_img_path }}');{% endif %}"
>

    A background in css has many properties:

    There are two properties that you might need:

    background-position

    The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.

    Source MDN - background-position

    It means you can adjust the position of the image using media queries.