CSS selector for elements

From the old post Feed Creator CSS Selectors elements should be supported though you wrote that this may change and it is a really old post.

I’m trying to create a feed for the page https://aspigurl.com/gallery-eng/
For the item selector I use: div .fl-photo-content
If I just use that and enable duplicate titles that finds five items with no title.

There’s a good title in img[alt] so I tried to put that as the item title selector, however if I do that the only result is the main page.

For test purpose I also tried img[alt *=“w”] as one item at least has a ‘w’ in the alt tag and that is more similar to the an example you gave in the old post, but that does not help.

So I get the impression that CSS selectors for elements are no longer supported. Is that the case or am I making a mistake?

Hi there, the problem here is that relying on CSS for selectors means we work with the text content of elements primarily and not their attribute values. So when you tell Feed Creator to target an element with a particular attribute, Feed Creator selects the element and looks for its text content. For example, if we have the two elements below:

<a href="https://example.com/category/">Title 1</a>
<a href="https://example.com/article" title="An interesting article">Title 2</a>

You could select the second link with the following selector:

a[title]

But when Feed Creator goes to get the title, it will use the text content of the element, which is “Title 2”.

The same applies when you use img[alt]

So in your example what we need to be able to tell Feed Creator to do is to use the attribute value as the text. That’s not yet possible. It does happen when use item_url for example, where we assume the ‘href’ attribute contains the URL. But that’s not something you can yet specify in the Feed Creator parameters.

We’ll have to think about how to do this. With XPath it’s possible to be more expessive. For example, you can select all img elements with an alt attribute using the following:

//img[@alt]

But you can also target the alt attribute itself with:

//img[@alt]/@alt

The CSS selector img[alt] is essentially the equivalent of the first XPath example. But I’m not aware of an equivalent to the second in CSS (perhaps because it’s used for styling, and it doesn’t really make sense to style the text content of an attribute value).

In Feed Creator we transform the CSS selectors to XPath, so maybe at some point we should allow users to specify XPath to target attribute values, or create an additional parameter where you can specify which attribute should be used for the content.

Thank you for the explanation. I must admit I’m no expert with CSS selectors or XPath.

It would make sense to look for a solution as this is not the first time I’ve had issues with titles; just the first time I tried to sort it, enticed by the new interface which is very nice.

We have an update coming out soon so I’ll see if there’s something we can do about this. One simple solution would simply be to use more obvious attribute values when there’s no text content to use. Such as in your case. If an img element is selected, we could use the alt attribute automatically.

Hi again, quick update to say this is now possible with Feed Creator 2.1.

See createfeed.fivefilters.org/index.php?url=https%3A%2F%2Faspigurl.com%2Fgallery-eng%2F&item=div+.fl-photo-content&item_title=img+%40alt

This version is now live on our site, and will be released for self-hosting users shortly.

Great. Thank you very much. I look forward th is release being available. That was a really fast implementation of a suggestion!

1 Like

Thank you. It’s now available for all customers. :slight_smile: