Note: How to use HTML "picture" for responsive images. Feed management. The current, most common solution
A feature of flexible documents is the variable composition of fields in different images. Therefore, when creating an element, you should keep in mind that the object(s) described by this element may not be in some image, so it will not be possible to find it. It is also possible that the image may be damaged during scanning, such as blackening or, conversely, lightening individual areas images leading to loss of information. In this case, the object corresponding to the element will also not be found. FlexiLayout Studio allows you to continue searching for other elements if an element is missing from the image. In order to allow a description to be overlaid on the image if some object is not found, you need to make it optional.
Image objects described using required elements must be present in the image, and the program must find them when applying a flexible description. If such an object is not found in the image, the process of adding a description stops.
Required elements should be used to find objects that identify a form. The presence of such an identifier element will prevent the flexible description from being imposed on a form that does not belong to this type forms You can also use a required element to describe image objects, the absence of which on the form makes it pointless to apply a flexible description and further data recognition.
In all other cases, image objects should be described by optional elements.
Objects that use optional elements to describe them may not be in the image, or the program may not detect them when applying a flexible description. However, in this case, a flexible description can be superimposed on the image, and image objects described by other elements will be found.
By default, all simple description elements are optional, i.e. It is accepted that they may not be found in the image.
Comment. Unlike simple elements all group elements are required by default.
Availability specific element may mean that the constructed chain of hypotheses is incorrect. These elements are called invalid elements. When this element is found, the generation of hypotheses for the tree branch in which it was found stops. These elements can be used, for example, to prevent a false description from being overlaid on a document.
Thus, elements can be used to identify a document (required), search for blocks (required and optional), and to reject false hypotheses (invalid elements).
The choice of option for using an element is carried out in the element properties dialog (General tab).
Images required and invalid elements are allocated as follows.
We continue the series of articles about setting up dynamic search campaigns (Dynamic Search Ads). Previously I wrote about DSA for Google Ads. Today we’ll look at elements and examples of feeds for Yandex.Direct.
Product feed— a file with data about all products on the site and their attributes (unique identifiers, links to products and their images).
Feed categories in Yandex.DirectThe following categories of feeds are available in the service:
Create a feed in YML format. Any XML document can only contain one root element.
The YML format uses the element as the root . Element date attribute must correspond to the date and time of generation of the YML file on the advertiser's side. Set the date in the format YYYY-MM-DD hh:mm.
http://www.nadezhnayatekhnika.rf/catalog/element/index.php?from=ya_market&utm_source=ya_market&utm_medium=cpc& 889.00 17000.00 UAH 1111 http://89.123.45.678/catalog/photo/19/6.JPG false false true Printer HP Deskjet D2663 Series of printers for people who need a reliable, easy-to-use color printer for everyday printing... Prepayment required. true Japan
How to create a feed for “Hotels”For the “Hotels” business type, you can use the “Hotels and Accommodation Rentals” feed Google Ads (CSV format). The contents of the columns are separated by a comma. Data in the feed must be in UTF-8 encoding.
|
Element |
Description |
|
Hotel ID. Required element. |
|
|
The name of the hotel. Required element. |
|
|
Offer page URL. Required element. |
|
|
Destination name |
Hotel location (max. 25 characters). Required element. |
|
Offer price. Number and currency code in ISO 4217 encoding. Use a period (.) as the decimal separator. Recommended item. |
|
|
Number of stars. An integer from 1 to 5. |
|
|
User rating, number. Use a period (.) as a decimal separator. |
|
|
Maximum possible score, integer. Default is 5. |
|
|
Hotel services. Specify values separated by semicolons: bar; pool; free wifi. |
Enclose semicolon values in quotation marks ("").
How to prepare a feed for “Real Estate”A list of advertiser's real estate offers is contained in the element . Each product offering (apartment) is described by a separate element .
In one feed you can transmit information about residential complexes of different developers. To do this, indicate in each legal information about the developer in the element .
|
Element |
Description |
|
Required element. |
|
|
Transaction type. The meaning is only “sale”. Required element. |
|
|
A set of elements that describe the location of an object. Nested tags contain details of information about the object's address. |
|
|
Name of the locality. Required element. |
|
|
sub-locality-name |
|
|
Nearest metro station. If there are several stations, each should be indicated in a separate element. Provide detailed information in the subtags. |
|
|
time-on-transport |
Time to the metro in minutes by transport. |
|
Required element. |
|
|
Required element. |
|
|
A set of elements describing the value of an object. The nested tags contain the price and the currency in which the cost is indicated: |
|
|
Name of the residential complex. Based on this element, apartments are combined into residential complexes. If the name of the residential complex is unknown, indicate the street and house number (for example, Pushkinskaya, 25). Required element. |
|
|
Information about the developer. Provide detailed information in the subtags. |
|
|
Full title legal entity developer. Required element. |
|
|
Total area. The area value and unit are passed in nested tags. |
|
|
Unit of room area. The element is used if the price is specified per unit area. Possible values: “sq. m"/"sq. m". |
|
Feeds with offers for rental properties are not accepted.
sale residential apartment http://www.developer.ru/search18 2015-04-02T19:00:06+03:00 St. Petersburg o. Vasilyevsky 18th line V.O., 32 Vasileostrovskaya 10 5 4780000 UAH ZAO "Developer" 13 15 63.00 sq. m Northern Fantasy http://www.developer.ru/images/plans/000001289.jpg
How to create a feed for “Cars”|
Element |
Description |
|
Product offer ID. Required element if there is no vin element. |
|
|
Car model. |
|
|
Model name. Required element. |
|
|
Name of the modification. Required element. |
|
|
Required element. |
|
|
Required element. |
|
|
Body type. Required element. |
|
|
Year of issue. Required element. |
|
|
Car price. Required element. |
|
|
Currency in which the price is indicated. |
|
|
VIN number (17 characters). |
Feed example:
Ford Fusion 1.4d AT (68 hp) http://www.auto.ru/1 http://picture.auto.ru/1.jpg Hatchback 5 doors. red in stock cleared by customs 2015 575000 UAH XWBCA41ZXDK259205
How to prepare a feed for “Air tickets”|
Element |
Description |
|
Offer page URL. Required element. |
|
|
Required element (for smart banners). |
|
|
Offer price. Number and currency code in ISO 4217 encoding. Use a period (.) as the decimal separator. |
|
|
Destination ID. Required element. |
|
|
Origin ID. |
|
|
Destination name |
Destination name. Required element. |
|
Name of departure point. |
To add a feed to Yandex.Direct, go to the interface using the “Feeds” link at the bottom under campaigns.
Then click “Add Feed.”
To be posted on the site, the size of the feed should not exceed 512 MB. Once a day, the feed is downloaded by a robot and imported into Yandex.Direct. When generating dynamic ads, the robot checks the feed to select product offers using specified filters once a day or more often, if possible.
The file must be accessible via HTTP protocol, HTTPS or FTP. Use authorization to access.
If links in your feed contain UTM tags that are not suitable for tracking advertising campaign, I recommend removing them. To do this, check the “Automatically remove UTM tags” checkbox. You can add new UTM tags on the ad group editing page.
Select the file you need to download. The size of the uploaded file should not exceed 512 MB. When updating, the file is downloaded by the robot, and the new data is imported into Yandex.Direct.
You can place your feed in an archive created using the ZIP (.zip extension) or GNU ZIP (.gz extension) compression algorithm.
If there was an error adding a feed (for example, the feed size/format/link does not meet the requirements), you will see an “Upload Error” status. To view the error report, follow the "More details" link.
How does feed validation work?Validation is a comprehensive check of compliance with requirements.
Check conditions when reading a file:
- all required elements are present;
- all element names are correct;
- Each element appears at most once.
If any of these conditions are not met, the file is rejected.
ConclusionWe looked at all options and feed formats for setting up dynamic campaigns in Yandex Direct.
Let me remind you, for correct creation feed:
Tip: the more fields filled in the feed, the better system will be able to identify the desired user.
In the next article, I'll show you how to set up campaigns that target site content and page feeds.
Images are notoriously one of the most difficult aspects responsive web design. Today we will look at how an element is a solution to the problem adaptive images, can be used right now.
Gone are the days of pixel perfect and fixed-width design. Now in times widescreen monitors, Internet television, tablets and smartphones various sizes Our designs must suit any device width from 320px to a potential 7680px.
With multiple screen resolutions comes the need to compress or stretch images to suit different requirements. This may turn out to be a problem, because... with the exception of vector graphics, the vast majority of images have a base width of px that cannot be changed.
So what should we do?
Current Common SolutionTypically, you will find this code on any website with a responsive design:
Img (max-width: 100%; height: auto; )
Here max-width is used: 100%; to ensure that the image never extends beyond the width of the parent container. If parent container is compressed to a width smaller than the width of the image - the latter is compressed along with the container. Setting height: auto; needed to maintain proportions.
One “liquid” image for all occasions
The problem is solved in only one way, allowing us to show the same image for all cases. But this does not give us the opportunity to install different images for different situations.
New solution:This new element, which is part of HTML5.
It implements a way to describe responsive images in the same way as is done in and. In this way, you can place multiple tags, each containing the filenames of different images along with the conditions under which they should be loaded.
This will allow you to load different images depending on:
- Results of media expressions, such as height, width, or viewport orientation
- Pixel densities
This in turn means that you can:
- Upload image files of appropriate size using efficiently throughput.
- Load differently oriented images in different proportions to accommodate layout changes at different widths.
- Upload images from high resolution for displays with high pixel density.
Basic steps when working with
Here is a simple example where, for the case when the width of the visible area is less than 768px, a smaller image is loaded:
You will notice that the syntax used in the media attribute is the same as when used in CSS media queries. You can use the same checks, i.e. check max-width , min-width , max-height , min-height , orientation etc.
These checks can be used to, for example, load a landscape (landscape) or portrait (portrait) version of an image depending on the orientation of the device, and you can simultaneously check the dimensions in these expressions. For example:
This code loads a smaller landscape version of the image for devices with a small screen and the appropriate orientation. And a larger version of the same image for devices with big screen.
If the device has a portrait orientation, the portrait version of the image is loaded, reduced for devices with a small screen and enlarged for devices with a large screen.
If you want to serve images at a different resolution for higher pixel density displays, you can do so by specifying additional filenames in the srcset attribute. Let's take an example of our first piece of code adding processing for Retina 2x displays:
Because the media query is processed first, you can control the size of the image at which it will be shown on the screen. Then the pixel density will be checked: if the display supports higher density and in user settings If you have permission for this, the corresponding versions of the images will be downloaded.
Use TodayRight now, native support is implemented in Chrome, Firefox and Opera. In the future, it is likely that we will see widespread support in other browsers. But we still have to live until this moment.
In the meantime, you don't have to wait if you want to use Right Now. Just use Picturefill 2.0; polyfill from smart people from Filament Group.
After downloading the picturefill.js file into your project, simply include it in the header:
There is also an option for asynchronous loading script, which you can read about in the Picturefill documentation.
When using this script, the Will element will work as I explained, but with a few limitations.
Picturefill IE9 limitationsPicturefill works great with different versions IE, however IE9 does not support elements that are used internally by . To get around this, wrap the source elements in tags using conditional comments; this will make them visible to IE9, for example:
Like IE9, Android 2.3 does not show elements inside. However, it does understand the srcset attribute when used in normal tags. Make sure you always include a backup
with the default filename in the srcset attribute for Android 2.3 and other browsers that may have the same problem.
Accordingly, JavaScript is required to be enabled in the browser. Picturefill 2.0 does not provide a “no-js” solution, because if this is done, then when the browser rolls out native support, several images will already be shown. However, you can use Picturefill 1.2 if the "no-js" option is mandatory for you.
Another requirement of Picturefill is native media query support to allow expressions in the media attribute to be processed. All modern browsers support media expressions, only IE8 and below do not support them, which corresponds to only a small part of users.
Additional HTTP requests are possibleIt is possible that in browsers that have native support for srcset but do not yet have support for the one specified in the fallback element the file may be requested before a suitable option is determined from the .
This is only a temporary problem, and it will disappear as soon as built-in support is rolled out. Additional information
- Read more about Picturefill 2.0 and download it for your project from this page.
- Check out complete information by element On the site responsiveimages.org.
Try using it in your project today!
In developer builds Chrome browsers, Firefox and Opera now support the new picture element, designed to solve a number of problems encountered during development adaptive designs. Let's take a closer look at it.
The new picture element solves the following problems faced by a developer of responsive web applications (I will use the classification proposed by pepelsbey at one of the recent front-end conferences):
...
The picture element does not render any content, but is merely a reference container for what is nested within it. img tag.
Therefore, for most tasks, the abbreviated notation will suffice, without using picture at all
Let's look at how the above problems are solved using a new element. All example files can be found in this repository github.com/fetis/picture
To test the examples in this article on the desktop, you will need either Firefox Nighlty (picture support is enabled by setting dom.image.picture.enable in about:config) or Chrome Canary, or Opera Developer. On mobile device the new element can be tested in Chrome Beta
Retina We have a 400x300 px image that we want to also display beautifully at double and triple pixel density. To do this, prepare 2 more pictures, sizes 800x600 and 1200x900, and write the following code
2x and 3x is pixel density descriptors, they tell the browser that these images were prepared for this density, if you want, you can use it. Please note that they do not force the browser to use these images, but only prompt it. The final decision rests with him depending on other conditions, such as the current connection.
The src attribute in in this case serves as a source of images for density< 2 и фолбеком на случай, если браузер не поддерживает новый элемент.
Adaptability Let's imagine a layout in which there is a single breakpoint of 700 px. When the viewport size is more than 700 px, we show a sidebar on the right and the size of our image should be 75% of the screen width. Otherwise, the sidebar is located at the end of the page and the image should be stretched to the full width. This is implemented by the following code
400w, 800w, 1200w - these are the width descriptors, they tell the browser what width the image is located at a given URL and, based on this information, the browser decides which image is best suited in current situation. As in the case of retina, the information is advisory in nature and the final decision on which image to load remains with the browser.
The simultaneous use of density and width descriptors is not allowed.
The sizes attribute lists the image sizes for all the control points in our design. Breakpoints are set in the form of a regular media expression, the browser takes the first one, which returns True and does not consider the chain further. The width value uses the new length unit vw , which returns a value as a percentage of the viewport width.
If there is no need for a picture to use control points, then the entry can be shortened to this sizes="100vw" . And for more complex designs you can use CSS function calc() , For example
sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
The most difficult attribute to behave in my opinion. If you did not specify sizes , then the browser always chose the largest image. In combination with width it does not work, although it would seem a logical combination and a number of other glitches. Perhaps these are features of early implementation.
As you can see, we have already covered 80% of the needs of adaptive layout, and have never used picture yet, it’s time for it to come into play too.
Format Using different formats for images is not much different from the methods used for video or audio tags
We specify a list of sources and mime/type for each, and the browser already selects the first one that it knows. Images from src attribute.Cropping When we show a photo on a smaller screen, sometimes it makes sense to crop unnecessary details, leaving only the main part. The media attribute will help us cope with this task.
In each media attribute we specify a media expression, in which the original image will change and, unlike previous examples, the browser will must follow him. Also note how cropping is combined here with adaptability to stretch the image to its full width. RAFC And now all 4 methods in one bottle :) Perhaps this is what inserting pictures will look like in a couple of years (example from the Opera blog)
2 are used here JPEG format and WebP. When the screen width is more than 1280 px, a full-size image is shown in half the viewport. With a width from 640 to 1279, a cropped photo is shown at 60% of the viewport width. When the screen width is less than 640px, the cropped photo is shown at 100% width. The selection for the current screen DPI is made based on the width of the source files.
Images have long been known to be the most time-consuming aspects of responsive web design. Today, we'll see how we can use the picture element as a solution to the problem of responsive images right now.
Firstly, the problem itselfThe days of fixed-width website design with full layout compliance are long gone. In today's era of widescreen monitors, Internet TV, tablets and smartphones of various sizes, our design must take into account any resolution - from 320 pixels to 7680.
All of these resolutions place demands on images - they must stretch and shrink to accommodate a variety of requirements. This may be a problem because... With the exception of vector graphics, most images have a fixed pixel width that does not change.
So what to do?
The current, most common solutionTypically, you will find the following in the CSS code of almost any responsive website:
img (max-width: 100%; height: auto;)
img (max - width: 100%; height: auto;) |
This code uses the max-width setting: 100%; to make sure that the image will not extend beyond the parent container. If the parent container becomes smaller than the width of the image, the image will shrink along with it. Setting height: auto; is present so that when reduced, the proportions of the image are maintained.
One rubber image for all devices
This solves the problem in one key, allowing us to show the same image under different circumstances. But, it doesn't allow us to show different images for different circumstances.
New solution: picture tagpicture is a new element that should be part of HTML5. It will significantly speed up the process of placing adaptive images, similar to the principles of operation of the audio and video elements. It will allow you to specify several source elements, each of which will point to various files images along with the conditions under which they must be loaded.
It will allow you to download various images depending on the:
Media query results, such as viewport height, width, orientation
Pixel Density
Which means you can:
Upload images of appropriate sizes, from maximum return using the available channel width.
Upload images with different cropping and aspect ratios to accommodate changing layouts for different screen widths.
Load high resolution images for high pixel density screens.
Different images are loaded depending on the circumstances
How does the picture element work?The basic steps for working with the picture element are:
Creating opening and closing picture tags.
Within these tags, create a source element for each request you want to make.
Add a media attribute to your query for things like viewport height, width, orientation, etc.
Add a srcset attribute with the appropriate name of the image file to upload.
Add additional filenames to your srcset attribute if you want to support high pixel density screens such as Retina.
Add an img element as a fallback.
Here's a simple example that checks if the viewport is smaller than 768px, and if it does, loads a smaller image:
< picture > < source srcset = "smaller.jpg" media = "(max-width: 768px)" > < source srcset = "default.jpg" > < img srcset = "default.jpg" alt = "My default image" > < / picture > |
You'll notice that the syntax used in the media attribute is exactly the same as what you're used to when writing CSS media queries. You can use the same checks, meaning you can create queries for max-width, min-width, max-height, min-height, orientation, and so on.
You can use these checks to load landscape or portrait versions of an image depending on the device's orientation, and you can also add size queries. For example:
< picture > < source srcset = "smaller_landscape.jpg" media = "(max-width: 40em) and (orientation: landscape)" > < source srcset = "smaller_portrait.jpg" media = "(max-width: 40em) and (orientation: portrait)" > < source srcset = "default_landscape.jpg" media = "(min-width: 40em) and (orientation: landscape)" > < source srcset = "default_portrait.jpg" media = "(min-width: 40em) and (orientation: portrait)" > < img srcset = "default_landscape.jpg" alt = "My default image" > < / picture > |
The code above loads the reduced, cropped for landscape orientation version of the image for the device with the appropriate orientation. It loads a larger version of the same image for larger screen devices.
If the device is in portrait orientation, it downloads the image cropped accordingly: in smaller size- For small devices and a larger image for higher resolution devices.
If you want to provide different resolution versions of images for higher density screens, you can do so by adding additional filenames to the srcset attribute. For example, let's look at the first code example above adding support for the Retina 2x screen resolution:
< picture > < source srcset = "smaller.jpg, smaller_retina.jpg 2x" media = "(max-width: 768px)" > < source srcset = > < img srcset = "default.jpg, default_retina.jpg 2x" alt = "My default image" > < / picture > |
The media request is processed first, so you can control the size of the image on the screen. Next, the pixel density of the screen is checked and if high density is supported and allowed by the user settings, a higher resolution version of the image will be loaded.
Using picture todayCurrently, a native implementation of picture is in development for Chrome, Firefox and Opera browsers. In the future, we will most likely see wider support in other browsers. But, as of today, support is only expected.
For now, you don't have to wait if you want to start using picture right now. You just need to use Picturefill 2.0, a polyfill provided by the developers at Filament Group.
Once you download the picturefill.js file into your project, it can be used simply by loading it into the head section of your site:
|
There is also the option to load the script asynchronously for greater efficiency, which you can read about in the Picturefill documentation. Together with loading this script, the picture element will work as I described, with minor restrictions. ] -- >< source srcset = "smaller.jpg" media = "(max-width: 768px)" > < source srcset = "default.jpg" > < ! -- [ if IE 9 ] > < / video > < ! [ endif ] -- > < img srcset = "default.jpg" alt = "My default image" > < / picture >
Android 2.3
Just like IE9, Android 2.3 does not see source elements inside picture tags. However, it recognizes the srcset attribute when it is assigned to a regular img tag. Make sure you include a fallback img element with the default filename in the srcset attribute for Android 2.3 or any other browser with a similar problem.
Requires JavaScript and native media query support
Since this solution is implemented in JavaScript, it therefore needs JavaScript to correct operation in the browser. Picturefill 2.0 does not provide solutions for “no-js” because otherwise, a lot of images would appear on pages when native support is implemented. However, you can use Picturefill 1.2 if the “no-js” feature is important to you.
The next requirement of Picturefill is native support for media queries in order for queries in the media attribute to work. All modern browsers support media queries, while IE8 and below is the only browser that does not, with a small residual user base.
Possible additional HTTP requests
For browsers that have native srcset support but do not support picture, it is possible given name file in the spare img element may be requested before more suitable image will be defined in the img element. This problem is temporary and will be resolved when native picture support is implemented.
