Images

  • Created : Apr, 18, 2016
  • Last Updated: Aug, 28, 2023

Easy Steps

Select image type
  1. Open your widget for editing (or create a new one)
  2. In the General section of the setup screen, choose either a fixed width in px or responsive width
  3. In the same section, scroll down to the Style settings
  4. Choose from the three option buttons labeled: Text, Thumbnail, Card, Overlay or HTML
  5. Check the preview pane to see if your widget images display as desired
  6. Save your widget using the Save & Get code button - if your widget is installed it will be auto-updated

FeedWind Image Style settings

Choosing your widget image size/type

FeedWind supports automatic image scaling for feeds containing images of varying dimensions. This enables those using feeds with larger images to display them as a thumbnail without forcing the user to scroll or to only see part of the image.

Images that occur in feed items at multiple sizes can cause excessive blank space to appear for some and can overflow the container in others so part of the image will not be visible. To avoid this, either use thumbnail style or select a widget size that is proportionate to the image sizes in the feed.

The HTML style button needs to be selected in order to allow full-size images and other media to be shown in your feed.

How FeedWind selects thumbnail images

In some posts/feed items, there may be more than one image available. In some cases, there may be a repeated image (such as a repeated icon down the pae used as bullets). Here is how Feedwind chooses the thumbnail image depending on the user’s selection of the Thumbnail Selection option :

  1. Auto
    • We choose the largest image calculated as a sum of the width+height of the image.
    • We ignore images under 30px in width or height
    • We ignore images repeated 5 times or more
    • We ignore pictograms (such as in ameba.jp
  2. First image – This option helps to display only the first image
  3. First image without repetition – This option helps to display only the first image without repetition
  4. <media:content url=”xxx”> tag from the feed XML.
  5. <media:thumbnail url=”xxx”> tag from the feed XML.
  6. <enclosure> tag from the feed XML.
  7. <itunes:image url=”xxx”> tag from the feed XML.

FeedWind Thumbnail Selection options


Examples of how FeedWind images can appear

Below are some working examples of different sized containers with the thumbnails/HTML tag switched on/off.

THUMBNAIL – Retain aspect ratio of image

THUMBNAIL – Crop image to fill thumbnail


FULL HTML WITH RESPONSIVE WIDTH

Where the images resize to match the available container width.



Related posts

Sports-widget

Add a Dynamic Sports Widget to Your Website

Contents1 Increase User Engagement1.1 Increased Engagement1.2 Lower Bounce Rates1.3 Level Up User Experience2 How to Add FeedWind Sports Widget...

Create a single column widget for mobile

An official document for FeedWind’s Single Column widget for mobile devices.

Using Custom Tags With Feedwind

Using Custom Tags With Feedwind

An official FeedWind document detailing their custom tags feature, which allows you to add custom tag categories to your...