Can’t change gallery output html

  • Resolved benzinozor

    (@benzinozor)


    4 years, 2 months ago

    Hi,
    I was trying to use the feature of foogallery where you add a filter and change the html output. I added the code snippets plugin as advised, copied the code from this page and pasted it in a new code snippet.

    I know I go in my function since I put some console logs in it, I see my argument before and after modification. The problem is that my gallery on the page doesn’t take my edit.

    Is there something I forgot to activate ? Do I have to be on the pro version ?

    Here is the code I’m trying to run:

    function remove_alt_attributes( $attr, $args, $foogallery_attachment ) {
	if ( array_key_exists( 'title', $attr ) ) 
	{
		echo '<script>console.log("'.$attr['title'].'")</script>';
		$attr['title'] = "test!";
		echo '<script>console.log("'.$attr['title'].'")</script>';
	}
	
	return $attr;
}

add_filter('foogallery_attachment_html_image_attributes', 'remove_alt_attributes', 10, 3 );
Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author bradvin

    (@bradvin)

    hi @benzinozor

    Doing those script echos in that filter might cause issues, as it would echo script tags within the gallery HTML. I would recommend you remove the 2 lines where you echo the script tags.

    In your code, you are only changing the title attribute if there is a title. Is that expected?

    Thread Starter benzinozor

    (@benzinozor)

    Hi,

    I added the echo lines because I wasn’t seeing any result, so I wanted to trace the code to see what’s going on. It allowed me to confirm that the code is used and that I go in that if and that my title is correct before the modification.

    I tried to remove the lines and still nothing, sadly.

    The code that I gave here is not the final one, this is just a test to try the feature and see where I can go with it, I plan to have more instructions in there in the future. So yeah, this is expected.

    Plugin Author bradvin

    (@bradvin)

    try change the filter priority from 10 to 999

    Thread Starter benzinozor

    (@benzinozor)

    I changed the priority in the code, still nothing. Do I have to change the code snippet priority aswell ?

    Maybe I’m using / testing something wrong elsewhere ? The page I’m using to visualise my gallery is a draft. When I update the code snippet, I just refresh the preview, is that ok ? I don’t know if there’s an option somewhere I missed to activate something.

    Plugin Author bradvin

    (@bradvin)

    How are you adding the code snippet to your page?

    Thread Starter benzinozor

    (@benzinozor)

    Well I’m not, I mean I only have the foogallery in my page. I figured the code snippet was managed by something in the wordpress API and the “add_filter” line was the only thing needed for the code to be used ? Did I miss something ?

    I checked the “Run snippet everywhere” radio button on the plugin page.

    Plugin Author bradvin

    (@bradvin)

    OK, you are using the Code Snippets plugin to add it.

    I am not sure why it is not working for you. Looking at the code it should work.

    Try change the snippet to this:

    
function remove_alt_attributes( $attr, $args, $foogallery_attachment ) {
	if ( array_key_exists( 'title', $attr ) ) 
	{
		$attr['data-title'] = $attr['title'];
		$attr['title'] = "test!";
	}
	
	return $attr;
}

    That will add a data-title attribute to the original title, and then set the title attribute. You can then inspect your gallery HTML to see if you can find the data-title attributes.

    Also look into your page output, and not just in developer tools to see if the HTML contained the title attributes

    Thread Starter benzinozor

    (@benzinozor)

    I tried what you said and realised there was a fg-image-wrap class in the a tag I was looking at before.
    So I have the a with a data-caption-title attribute with the initial title, and a child img in it with a title attribute set to “test!” and there’s also the new data-title attribute we just added set to the inital title aswell. I’m not sure if I’m clear in my description, it looks a bit like that :

    <a href="..." data-caption-title="Initial title" >
    <span class="fg-image-wrap">
        <img title="test!" data-title="Initial title">
    </span>
</a>

    If you were talking about the console, I tried looking into it but I’m not sure what I’m supposed to see there.

    • This reply was modified 4 years, 2 months ago by benzinozor.
    • This reply was modified 4 years, 2 months ago by benzinozor.
    Plugin Author bradvin

    (@bradvin)

    that output looks right for the code, what were you expecting?

    Thread Starter benzinozor

    (@benzinozor)

    nothing in particular, I’m not really skilled at web dev so I’m only doing what you tell me to.
    So my new title is indeed in the html code of the page, why doesn’t my gallery show it when I hover my image ?

    Plugin Author bradvin

    (@bradvin)

    @benzinozor if you want to show something on hover, then I would suggest using the thumb captions for that purpose.

    @steveush – does the FooGallery JS strip the title from the image?

    Plugin Author steveush

    (@steveush)

    Hi @benzinozor & @bradvin,

    No the title is not stripped by the JS, however there are various hover options such as the icon or caption that may place an overlay on top of the image. If any of the overlays are present the image title attribute will not be visible when hovering an item as your mouse cursor is in fact hovering over the overlay and not the image itself.

    Thanks

    Thread Starter benzinozor

    (@benzinozor)

    So apparently, I misunderstood what “changing the html output” meant, I’m sorry. I thought that by changing the output, the informations displayed on my image would change, apparently not.

    I’m having an issue with foogallery because my website is both in english and french, and the gallery takes the informations directly on my images attributes (I can’t set those attributes in the gallery, and maybe do two galleries with the same images but different attributes, like I do with other plugins), so I wanted to change the displayed attributes by any other mean possible, via code for example, is there a way to do that ?

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Can’t change gallery output html’ is closed to new replies.