Jekyll отзывчивый плагин изображения не будет отображаться - PullRequest
Новая
       34

Jekyll отзывчивый плагин изображения не будет отображаться

1 голос
/ 11 марта 2019

Я использую плагин jekyll отзывчивого изображения. У меня есть шаблон, как я должен, и он может добраться до шаблона и CSS. Он отображает код img, но путь неверен и не отображает изображения с измененным размером.

Вот мой шаблон: 

{% capture srcset %}
{% for i in resized %}
/{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}

{% capture class_caption_tuple %}
class="pic caption"
{% endcapture%}

{% capture class_pic_tuple %}
class="pic"
{% endcapture%}

{% if alt %}
{% capture alt_tuple %}
alt="{{ alt }}"
{% endcapture%}
{% endif %}

{% if width %}
{% capture width_tuple %}
width="{{ width }}"
{% endcapture%}
{% capture styled_width_tuple %}
style="width:{{ width }};"
{% endcapture%}
{% endif %}

{% if title %}
{% capture title_tuple %}
title="{{ title }}"
{% endcapture%}
{% endif %}

{% if class %}
{% capture class_pic_tuple %}
class="pic {{ class }}"
{% endcapture%}
{% capture class_caption_tuple %}
class="pic caption {{ class }}"
{% endcapture%}
{% endif %}

{% assign largest = resized | sort: 'width' | last %}

{% if caption %}
<div {{ class_caption_tuple | strip_newlines }} {{ styled_width_tuple | strip_newlines }}>
  {% endif %}
  {% if url%}
  <a href="{{ url }}" target="_blank">
    {% endif %}
    <img src="/{{ largest.path }}" srcset="{{ srcset | strip_newlines }}" {{ alt_tuple | strip_newlines }}
      {{ title_tuple | strip_newlines }} {{ class_pic_tuple | strip_newlines }} {{ width_tuple | strip_newlines }}>{%
    if url%}</a>{% endif %}{% if caption %}{{ caption | strip_newlines }}</div>{% endif %}

Вот мой конфиг: 

responsive_image:
  # [Required]
  # Path to the image template.
  template: _includes/responsive-image.html

  # [Optional, Default: 85]
  # Quality to use when resizing images.
  default_quality: 90

  # [Optional, Default: []]
  # An array of resize configuration objects. Each object must contain at least
  # a `width` value.
  sizes:
    - width: 255
    - width: 510
    - width: 1020

  # [Optional, Default: false]
  # Rotate resized images depending on their EXIF rotation attribute. Useful for
  # working with JPGs directly from digital cameras and smartphones
  auto_rotate: false

  # [Optional, Default: false]
  # Strip EXIF and other JPEG profiles. Helps to minimize JPEG size and win friends
  # at Google PageSpeed.
  strip: false

  # [Optional, Default: assets]
  # The base directory where assets are stored. This is used to determine the
  # `dirname` value in `output_path_format` below.
  base_path: assets

  # [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
  # The template used when generating filenames for resized images. Must be a
  # relative path.
  #
  # Parameters available are:
  #   %{dirname}     Directory of the file relative to `base_path` (assets/sub/dir/some-file.jpg => sub/dir)
  #   %{basename}    Basename of the file (assets/some-file.jpg => some-file.jpg)
  #   %{filename}    Basename without the extension (assets/some-file.jpg => some-file)
  #   %{extension}   Extension of the file (assets/some-file.jpg => jpg)
  #   %{width}       Width of the resized image
  #   %{height}      Height of the resized image
  #
  output_path_format: assets/responsive/%{width}/%{basename}

  # [Optional, Default: true]
  # Whether or not to save the generated assets into the source folder.
  save_to_source: false

  # [Optional, Default: false]
  # Cache the result of {% responsive_image %} and {% responsive_image_block %}
  # tags. See the "Caching" section of the README for more information.
  cache: false

  # [Optional, Default: []]
  # By default, only images referenced by the responsive_image and responsive_image_block
  # tags are resized. Here you can set a list of paths or path globs to resize other
  # images. This is useful for resizing images which will be referenced from stylesheets.
  extra_images:
    - assets/foo/bar.png
    - assets/bgs/*.png
    - assets/avatars/*.{jpeg,jpg}

Вот мой отзывчивый звонящий по телефону: 

{% responsive_image path: "img/seo_img.png" alt: "Prolike" caption: "Caption." class: "center medium" %}

Вот изображение, которое я получаю. 

<img src="/" srcset=" " alt="Prolike" class="pic center medium">

Почему он отображает путь как "/"? И почему Джекилл не рендерит изображения.

...