New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bad Image URL in the Social Cards when data-image Attribute is None #128

Closed
hariharshankar opened this Issue Sep 6, 2018 · 7 comments

Comments

Projects
None yet
3 participants
@hariharshankar

hariharshankar commented Sep 6, 2018

For some Mementos, the /services/product/socialcard/ API returns data-image="None". In these scenarios, the generate_cards() JS method creates the social card image in #me-image with src="None".

Either the check in the generate_cards() could account for None or the <blockquote> tag could omit properties that are None.

@shawnmjones

This comment has been minimized.

Show comment
Hide comment
@shawnmjones

shawnmjones Sep 6, 2018

Collaborator

Thanks for the heads up. I'll investigate.

Collaborator

shawnmjones commented Sep 6, 2018

Thanks for the heads up. I'll investigate.

@shawnmjones shawnmjones self-assigned this Sep 6, 2018

@shawnmjones shawnmjones added the bug label Sep 6, 2018

@ibnesayeed

This comment has been minimized.

Show comment
Hide comment
@ibnesayeed

ibnesayeed Sep 6, 2018

Member

output['best-image-uri'] = best_image_uri

On a quick note I think replacing above line with the following should do the trick:

output['best-image-uri'] = best_image_uri or ''
Member

ibnesayeed commented Sep 6, 2018

output['best-image-uri'] = best_image_uri

On a quick note I think replacing above line with the following should do the trick:

output['best-image-uri'] = best_image_uri or ''
@shawnmjones

This comment has been minimized.

Show comment
Hide comment
@shawnmjones

shawnmjones Sep 6, 2018

Collaborator

Thanks @ibnesayeed, but the JavaScript should be less brittle. Only fixing the problem in /services/memento.py ignores the machine endpoints in /services/product.py.

Collaborator

shawnmjones commented Sep 6, 2018

Thanks @ibnesayeed, but the JavaScript should be less brittle. Only fixing the problem in /services/memento.py ignores the machine endpoints in /services/product.py.

@ibnesayeed

This comment has been minimized.

Show comment
Hide comment
@ibnesayeed

ibnesayeed Sep 6, 2018

Member

Well, it has to do with how Python converts None to string. While None is a falsy object in boolean context, when converted to string it does not return a falsy string (i.e. an empty sting).

>>> str(None)
'None'

This means we need to be careful where we not want that to happen. One way to fix this issue for various different places where it might be used is to change the default value of max_score_image from None to an empty string at the following line.

max_score_image = None

Member

ibnesayeed commented Sep 6, 2018

Well, it has to do with how Python converts None to string. While None is a falsy object in boolean context, when converted to string it does not return a falsy string (i.e. an empty sting).

>>> str(None)
'None'

This means we need to be careful where we not want that to happen. One way to fix this issue for various different places where it might be used is to change the default value of max_score_image from None to an empty string at the following line.

max_score_image = None

@shawnmjones

This comment has been minimized.

Show comment
Hide comment
@shawnmjones

shawnmjones Sep 6, 2018

Collaborator

The problem is actually larger that that. This is part of it, but there is a larger issue with the image selection code. I'll give details soon.

Collaborator

shawnmjones commented Sep 6, 2018

The problem is actually larger that that. This is part of it, but there is a larger issue with the image selection code. I'll give details soon.

@ibnesayeed

This comment has been minimized.

Show comment
Hide comment
@ibnesayeed

ibnesayeed Sep 6, 2018

Member

A similar issue often surfaces in JS as well where falsy null or undefined will be converted to strings as a word, not an empty string. I usually use a similar logical operator trick to canonicalize such variables in string context as it can be seen in the Reconstructive repo.

rels.first && rels.first.href || ''

The above JS line can be interpreted as:

(rels.first && rels.first.href) || ''

The way logical operators are executed is if there is an AND between two statements, the value of the first one will be returned if it is falsy, otherwise the value of the second will be returned instead. And if there is an OR then the first one will be returned if it is truthy, otherwise the value of the second one will be returned instead.

So, in the above example it means check the value of rels.first.href if and only if rels.first is not null (to avoid an exception like cannot read property 'href' of null object) and return the value of rels.first.href if it is not falsy. Otherwise the statement in parenthesis returns falsy (due to the first one or the second) then return the value after the OR operator, which is an empty string.

Member

ibnesayeed commented Sep 6, 2018

A similar issue often surfaces in JS as well where falsy null or undefined will be converted to strings as a word, not an empty string. I usually use a similar logical operator trick to canonicalize such variables in string context as it can be seen in the Reconstructive repo.

rels.first && rels.first.href || ''

The above JS line can be interpreted as:

(rels.first && rels.first.href) || ''

The way logical operators are executed is if there is an AND between two statements, the value of the first one will be returned if it is falsy, otherwise the value of the second will be returned instead. And if there is an OR then the first one will be returned if it is truthy, otherwise the value of the second one will be returned instead.

So, in the above example it means check the value of rels.first.href if and only if rels.first is not null (to avoid an exception like cannot read property 'href' of null object) and return the value of rels.first.href if it is not falsy. Otherwise the statement in parenthesis returns falsy (due to the first one or the second) then return the value after the OR operator, which is an empty string.

@shawnmjones

This comment has been minimized.

Show comment
Hide comment
@shawnmjones

shawnmjones Sep 6, 2018

Collaborator

The MementoEmbed code will be modified to provide a default image if none is found.

Collaborator

shawnmjones commented Sep 6, 2018

The MementoEmbed code will be modified to provide a default image if none is found.

shawnmjones added a commit that referenced this issue Sep 7, 2018

Merge pull request #133 from oduwsdl/broken-images
fixes #128, a default blank image is now returned if none can be found
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment