0

I'm having trouble with a Wordpress plugin called 'Social Feed Gallery' that imports my instagram images to a website gallery. I'm trying to remove certain photos / elements (each image container has the class 'insta-gallery-item') when the data-item contains the hashtag 'remove_me'.

Here's an example of the MESSY HTML

<div id="insta-gallery-feed">
<div class="insta-gallery-inner">
<div id="insta-gallery-item-17972204888477284" class="insta-gallery-item" data-item="{hashtags&quot;:[&quot;isleofskye&quot;,&quot;remove_me&quot;,&quot;ferry&quot;,&quot;mountains&quot;,&quot;ferrydogs&quot;,&quot;scotland&quot;,&quot;coastalwaters&quot;,&quot;scottishlandscape&quot;,&quot;Glenelg&quot;,&quot;ferry&quot;,&quot;overthrseatoskye&quot;,&quot;sailing&quot;,&quot;scotland&quot;,&quot;visitscotland&quot;,&quot;instascotland&quot;,&quot;nature&quot;,&quot;scotlandshots&quot;,&quot;lovescotland&quot;,&quot;nathistships&quot;],&quot;link&quot;:&quot;}" data-elementor-open-lightbox="no">
<img src="image-is-here.jpg">
</div>
</div>
</div>

Here's my JQUERY

        <script>

(function($) {
$(document).ready(function() {

$('#insta-gallery-feed').find('.insta-gallery-item').each(function() {

  if ($(this).data('item').indexOf('remove_me') !== -1) {
    $(this).hide();
  }
});
});

})(jQuery);
        </script>

Doesn't seem to work, also tried this one; Hide element if data contains specific piece of text?

5
  • 2
    You can do this with plain css: [data-item="remove-me"] {display: none;}
    – Axnyff
    Apr 3 at 17:44
  • @Axnyff - thank you, doesn't seem to work in this instance as the data-items code is so messy with this plugin, outputs: data-item="{hashtags&quot;:[&quot;isleofskye&quot;,&quot;remove_me&quot;,
    – Callum
    Apr 3 at 18:35
  • Are you sure the html is like this ? I can't manage to decode it to valid json
    – Axnyff
    Apr 3 at 18:41
  • 1
    If the data-item contains remove_me then [data-item*="remove_me"] {display: none;} should work
    – Axnyff
    Apr 3 at 18:43
  • 1
    @Axnyff - that did it. The solution was the *= it seems this plugin loads later than my script, so that was a waste of time. CSS fixed it. Thanks so much. Hope that's helpful to other users of the plugin who wish to filter their Instagram Gallery .
    – Callum
    Apr 3 at 19:10

1 Answer 1

1

For what it's worth, that big ugly data item is, or should be, an html-encoded JSON string. (In your example it's not valid JSON, but that may be a result of the cutting and pasting needed to write a question here.)

If the JSON string in your question were valid, it would represent a Javascript object looking like something like this.

const dataobject = {
    hashtags: [
        "isleofskye", "remove_me", "ferry", "mountains",
        "ferrydogs", "scotland", "coastalwaters",
        "scottishlandscape", "Glenelg", "ferry",
        "overthrseatoskye", "sailing", "scotland",
        "visitscotland", "instascotland", "nature",
        "scotlandshots", "lovescotland", "nathistships"
    ],
    link: null
}

You could (if the JSON were valid) use this code to detect whether one of your hastags was "remove_me". It would probably have better data integrity than just searching the string.

const datastring = $(this).data('item')
const dataobject = JSON.parse(datastring)
const hashtags = dataobject.hashtags
if (hashtags.includes('remove_me') ) {
    $(this).hide();
}
1
  • Yes, it is true I had clipped the text (which is/was valid JSON) to simplify my question. This is a truly marvellous and thorough solution beyond the CSS fix mentioned in the commends above. Thank you.
    – Callum
    Apr 4 at 13:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.