- This topic has 47 replies, 2 voices, and was last updated 4 years, 5 months ago by Leo.
-
AuthorPosts
-
October 31, 2019 at 10:47 am #1049891Carrie
Good morning! When I use an element to bring in a hero image, it doesn’t seem to carry the alt tag with it. This is important for SEO, especially on the home page when it’s the primary image on the page.
Is there a workaround to get the alt tag included with all hero images?
October 31, 2019 at 10:54 am #1049895LeoStaffCustomer SupportHi there,
The home page hero image is a background image so it doesn’t have an alt tag:
https://accessibleweb.com/question-answer/add-alt-text-background-images/Since you don’t have any content inside the page hero, you can actually consider adding the same image as a static image inside the header element content then you can add an alt tag to it.
October 31, 2019 at 3:07 pm #1050053CarrieWhen you say, “adding the same image as a static image inside the header element content,” I’m not sure what you mean. Can you please elaborate?
October 31, 2019 at 3:09 pm #1050057LeoStaffCustomer SupportAdd this inside the page hero content:
<img src="IMAGE URL" alt="ALT TAG">
Reference: https://www.w3schools.com/tags/tag_img.asp
October 31, 2019 at 3:20 pm #1050068CarrieLeo, thank you so much! I had tried that, but it had clutter that I didn’t realize needed removing…
Removing the class junk did the trick.I appreciate your help – THANK YOU!!
October 31, 2019 at 9:26 pm #1050214LeoStaffCustomer SupportNo problem 🙂
November 1, 2019 at 8:18 am #1050580CarrieWhoops, I have a new issue – there is a hairline of white space appearing below the static images that I can’t seem to get rid of. It isn’t on the image itself, I’m using .site-content { padding-top: 0 !important; } in the CSS for the page, and I’ve got padding above the fill box underneath the image set to zero and the column top set to zero.
Examples:
https://www.carriemorgan.com/about-carrie-morgan/
https://www.carriemorgan.com/content-seo-brands-agencies/Could the style of the element be adding that space?
I’d appreciate your help so much, Leo.
November 1, 2019 at 9:05 am #1050627LeoStaffCustomer SupportActually come to think of it, can’t you just use the featured image instead of header element?
If you set it to above content then it should be full width exactly like the page hero.
https://docs.generatepress.com/article/adjusting-the-featured-images/November 1, 2019 at 9:26 am #1050652CarrieI could if there were a “cover” setting, but my images are all around 2000-2071 pixels wide, and using featured images ends up with white space on both ends on larger monitors.
Example: https://www.carriemorgan.com/wp-content/uploads/GeneratePress-screenshot.jpg
I didn’t see a setting to help it adjust to the width of a browser window when it’s larger?
November 1, 2019 at 10:40 am #1050721LeoStaffCustomer SupportWe can probably try a bit of CSS.
Can you link me to the page using the featured image?
November 1, 2019 at 10:47 am #1050729CarrieSure – https://www.carriemorgan.com/how-my-custom-keyword-research-works/
This is the CSS currently in use:
.site-content { padding-top: 0 !important; }November 1, 2019 at 10:52 am #1050732LeoStaffCustomer SupportThe option is set to above content area in the customizer for pages?
If so try this CSS:
.featured-image.grid-container { max-width: 100%; }
November 1, 2019 at 10:54 am #1050737CarrieYes, see it here – https://www.carriemorgan.com/wp-content/uploads/GeneratePress-screenshot-2.jpg.
Is your new code instead of – or in addition to – the original CSS?
November 1, 2019 at 11:00 am #1050743CarrieSo better, but it still doesn’t cover the full width. Although granted this is an ultrawide monitor…
https://www.carriemorgan.com/wp-content/uploads/GeneratePress-screenshot-3.jpg
November 1, 2019 at 11:02 am #1050744LeoStaffCustomer SupportIt should be 100% of whatever the screen width is – however I don’t see my CSS being added here:
https://generatepress.com/forums/topic/hero-image-elements-dont-bring-in-the-alt-tag/#post-1050732Make sure to clear any caching plugin you might be using including site ground.
-
AuthorPosts
- You must be logged in to reply to this topic.