Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Query loop – dynamic data links – how to add alt and title values?

  • Hi there, I am creating a query loop which contains the following:

    – The featured image of the post (a generateblocks image block)
    – The title of the post (a generateblocks heading block)

    Both of the above, I want to link to the post, and so for both blocks I have ‘Enable Dynamic Data’ switched on. And then for the ‘Link Source’ I have ‘Single Post’ selected.

    This works absolutely fine in terms of the link being added on the front end (the <a> tag which goes to the permalink of the post), however, that <a> tag does not have an ‘alt’ or a ‘title’ attribute added to it, which is bad for accessibility and also for SEO.

    I am not able to find anywhere how to get the alt and title attributes added to these links, please can you advise how to do this? For example, I would like to dynamically load the post title into each of these attributes – but I cannot see how to do that.

    Many thanks,

    Keith

  • Hi there,

    you can dynamically load the Images ALT tag with the current post title using some PHP:

    
    add_filter('render_block', function ($content, $block) {
        if ('generateblocks/image' !== $block['blockName']) {
            return $content;
        }
    
        // Check if the block has the class 'featured-image'
        if (!isset($block['attrs']['className']) || strpos($block['attrs']['className'], 'featured-image') === false) {
            return $content;
        }
    
        global $post;
    
        // Check if we are inside the loop and if this post has a featured image
        if (in_the_loop() && has_post_thumbnail($post->ID)) {
            $post_title = get_the_title($post->ID);
    
            // If the post title is available, replace the alt attribute in the content
            if (!empty($post_title)) {
                $content = preg_replace(
                    '/(alt=")([^"]*)(")/',
                    '$1' . esc_attr($post_title) . '$3',
                    $content
                );
            }
        }
    
        return $content;
    }, 10, 2);
    

    Then select the GB Image Block inside the loop, and in block settings Advanced > Additional CSS classes add: featured-image

    That will suffice in giving the link around the image a discernible name.

    You don’t need to do anything with the Headline as the it contains the post title anyway

  • Hi David, thank you so much for such a detailed answer. However, I think you have misunderstood my question:

    – I’m not asking to add an alt attribute to an image – I am asking how I add alt and title attributes to links which are wrapped around both my featured image and heading (by using the ‘enable dynamic data’ setting). Please can you update your answer to tell me how to correctly add those attributes to links which are added by generate blocks ‘Enable Dynamic Data’ > ‘Link Source’ = ‘Single Post’

    Cheers,

    Keith

  • ALT tags are for Images only, they are not a valid attribute for the <a> anchor HTML tag.
    TITLE tags can be applied to any HTML element. But you generally only do this when the link has no discernible name for example an Icon Link that has not text.

    So does the Headline block display the Post title ?
    If it does then there is no value in adding the title tag.

    The method I provided above for the Image block, it adds the alt tag to the image.
    This serves 2 purposes: i) it provides an ALT for a non displayed image ii) the <a> will us it as the links discernible name.

    So from an SEO and Accessibility stand point, thats all that is required.

    If theres anything I have missed then let me know.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.