Image Size modifcation

Hi there,

I am quite new to Algolia and have a problem. using the script text/html tag: <script type="text/html" id="hit-template">

I need to get the image width with JS so that I can add text to the image that won’t exceed the bounds.

Is there a way of getting image information? I have used document.onload but the code is loading after the images have their id.

I’d appreciate assistance with this.

Thanks!

@elena Could you create a live example of what you tried and demonstrate us what’s failing so we can help you out? You can do so using this template: https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/instantsearch.js

@vvo Essentially I am adding images from algolia and then I want to hover over the image and show text. The images are loaded into a flexbox therefore I want to know the width of the image to ensure that the text doesn’t go outside of the div. If I use an event listener it cannot find the image as it is not loaded yet. Therefore I want to know how to add this. Can you tell me what the image is called in the codesandbox then I can show you what I mean with your data?

Thanks
Peter

@elena I believe your problem is not Algolia specific (getting width/height of image) and I would advise you to ask your question on Stack Overflow instead. If you have an Algolia specific question or a bug using the options of our libraries let me know still!

@vvo Ah OK. I found a work around. Thank you

I have another Algolia specific query. I am currently using Algolia Autocomplete with instantsearch in a site to search paintings, galleries and artists. Obviously galleries and artists have many paintings, when searching the artist there are duplicated autocomplete responses for the same artist. I am using client side javascript. What is the best way to ensure that only one artist or gallery is returned and yet returning all their paintings in the search?

@elena - glad you found the workaround.

On your next question

What is the best way to ensure that only one artist or gallery is returned and yet returning all their paintings in the search?

Without knowing exactly how you’ve setup your indices, I’ll work with Algolia best practices.

You described having paintings, galleries, and artists. In Algolia, we recommend having one index per type of record so, in this case, you might have three indices paintings, galleries, and artists.

Furthermore, in Algolia there is no concept of relationships similar to a database (e.g., an Algolia gallery record cannot have_many artists). To mimic this relationship you have to make a flat object that holds the relationship. For example, a gallery record might have artist_ids (which refer to an artist record):

// example gallery record
{
    "name": "My Downtown Gallery",
    "artist_ids": [3],
    "objectID": 22
}

// example artist record
{
    "name": "Vincent van Gogh",
    "gallery_ids": [22],
    "painting_ids": [1]
    "objectID": 3
}

// example painting record
{
    "name": "Starry Night",
    "artist_id": [3],
    "objectID": 1
}

From here, I am just guessing how your search could work:

  • User enters query for “Van Gogh”
  • Search the artist index
  • On receipt of the results, collect gallery_ids and painting_ids of the Van Gogh object
  • Trigger a subsequent query on the gallery and painting indices

This requires using concepts like filters so that you can search on objectIDs and then display the results, like this:

paintings.search({
  filters: 'objectID:1 AND ...'
});

If this does not seem helpful, please feel free to give us more detail of your index and data configuration and we can give more general guidance. Hope this helps!

Thank you so much, that is very helpful.

1 Like

@vvo - I really appreciate your assistance, it has been most helpful

I have one final query

I am looking at implementing Algolia places alongside Algolia Autocomplete.js. As I stated before, I am using JavaScript on the client side. And I wish to search for paintings and the Algolia Places in the same search box.

When searching a painting using autocomplete.js, I use search.helper.setQuery(suggestion.title).search(); and that works well.

If I wanted to use Places to find paintings with for example 10 miles from London, what would be the functions that I need to run?

I have tried:

index.search({
          query: 'query',
          aroundRadius: 5000,
        }).then(res => {
        console.log(res)
        })

But I am getting a 401 error. Is this something that I can run on the client side or is this is something that cannot be actioned using the index only api key?

Thank you again!

Hi @elena, here’s an example linking Algolia autocomplete.js and Algolia places: https://community.algolia.com/places/examples.html#autocompletejs

It will do a search for cities and products at the same time.

Hi @vvo that is exactly what I have now. What I do not understand is how to query my index using
suggestion.latlng - I have used the example and then I have search.helper.setQueryParameter('aroundLatLng', latLoc, lngLoc) to query my index and return only items nearby to those latitude and longitudes but it is not functioning at the moment.

I believe it would be helper.setQueryParameter(‘aroundLatLng’, latLng)

latLng being 32.1232,32.123213