- This topic has 14 replies, 3 voices, and was last updated 3 years, 5 months ago by vast.
-
AuthorPosts
-
July 24, 2020 at 11:46 pm #1375521vast
When adding a page hero via the ‘Elements’ option in WordPress’ dashboard, changes to the options such as selecting a custom background generates additional CSS selectors in ‘generate-style-inline-css’ e.g.
.page-hero{background-color:#161616;background-image:url(https://domain.com/wp-content/uploads/2020/07/background.jpg);background-size:cover;background-position:center bottom;background-repeat:no-repeat;color:#ffffff;padding-top:10%;padding-right:40px;padding-bottom:10%;padding-left:40px;text-align:center;box-sizing:border-box;}
In a previous post https://generatepress.com/forums/topic/want-to-add-a-data-src-tag-to-hero-div, there is the option to use the generate_page_hero_output filter to introduce custom changes to div tags for example.
Is there the option to inline the CSS selectors such that it is part of the div element or image element such as below rather than output it to ‘generate-style-inline-css’?
<div data-src="background.jpg" style="{background-color:#161616;background-image:url(https://domain.com/wp-content/images/placeholder.gif);background-size:cover;background-position:center bottom;background-repeat:no-repeat;color:#ffffff;padding-top:10%;padding-right:40px;padding-bottom:10%;padding-left:40px;text-align:center;box-sizing:border-box;"> Content </div>
Note the inclusion of data-src as the primary source of the image.
July 25, 2020 at 9:54 am #1376136TomLead DeveloperLead DeveloperHi there,
As of right now this kind of thing isn’t possible, unfortunately.
Is there a particular reason you’re wanting to inline it?
July 25, 2020 at 2:28 pm #1376273vastThe background to inline the style is so that the background image can be lazy loaded with a fallback or low quality image.
Is there an alternative to calling the page hero/header e.g. add_theme_support(‘custom-header’)?
Otherwise, is there an option to display the image via the image element rather than CSS?
July 25, 2020 at 7:30 pm #1376392TomLead DeveloperLead DeveloperYou could add the image inside the Element itself with this template tag:
{{custom_field.thumbnail_id}}
If you wrap it in a div you could give it some CSS to fill the area in the background of the content.
Let me know if you need more info 🙂
July 25, 2020 at 9:03 pm #1376417vastThanks Tom.
Based on an earlier post, it appears that there is the option to use ‘get_the_post_thumbnail( get_queried_object_id(), ‘little’ )’ which outputs the image URL for the featured image for a given page.
If a featured image is removed (as there is no requirement for it), the function ‘get_the_post_thumbnail( get_queried_object_id(), ‘little’ )’ doesn’t return the image URL (which is the desired output).
Is there an option to use ‘get_the_post_thumbnail( get_queried_object_id(), ‘little’ )’, when a featured image is removed (so there is a reference to it) and display it as the background?
July 26, 2020 at 9:07 am #1377019TomLead DeveloperLead DeveloperI’m not sure if I understand the last part of your question there – can you explain a bit more possibly?
July 26, 2020 at 1:24 pm #1377224vastSure.
The function ‘get_the_post_thumbnail( get_queried_object_id(), ‘little’ ) only returns a value if a featured image is selected for a page for example. If the featured image is subsequently removed, the function returns no value.
Rather than display a featured image, is there an option to use only reference the image for a given page so that the function ‘get_the_post_thumbnail( get_queried_object_id(), ‘little’ ) returns a value?
Alternatively, is there another method?
July 27, 2020 at 8:52 am #1378194TomLead DeveloperLead DeveloperSo are you wanting a way to check whether an image exists without actually displaying the image itself?
July 28, 2020 at 1:47 am #1378889vastYes and no. So stepping back;
1. No changes to the page hero element i.e as-is out of the box
2. A featured image is uploaded to the home page.
3. By default, the featured image is displayed before/above the page content.Instead, it would be as follows;
1. No change
2. No change
3. The featured image is not displayed before/above the page content.
4. The featured image appears as the background for the page hero.July 28, 2020 at 8:32 am #1379413DavidStaffCustomer SupportHi there,
i am having trouble understanding what the desired result is ?
Is there more then one scenario here? ie. with featured image and without.If you could provide a mockup of them it would be real useful
July 28, 2020 at 10:12 pm #1379985vastHi David, Tom,
Using an example such as the “Peak” site library, the first wireframe includes a “Page Hero” element (which if required can be either a color, image or both).
The second wireframe includes a “Featured image” for a given page e.g. “Home”
Outcome/desired result
1) There is no change to the “Page Hero” element. It would feature a colored background as it does with the “Peak” site library and a text overlay.2) A featured image is uploaded for the home page. It is however “hidden” from view i.e. it does not appear as it does in the second wirefame and instead displays as the background in the “Page Hero” element.
Does that help?
July 29, 2020 at 6:09 am #1380438DavidStaffCustomer SupportThat pretty much is the default behaviour of the Header Element.
1. Set Background Image to Featured Image.
2. Uncheck the Display Featured Image option – this will remove it from the Content.
3. Set the background color to whatever color you need in the absence of an imageJuly 29, 2020 at 1:15 pm #1381065vastGreat David. Circling back to the question at the start of the post, is there an option to inline it to the div tag?
July 29, 2020 at 3:51 pm #1381172DavidStaffCustomer SupportTom says it isn’t possible and he’s the man 🙂
October 7, 2020 at 1:00 pm #1477347vastThanks David. Sorry for not replying sooner.
It appears that there is a solution. It supports lazy loading background images which is an upside.
Now the catch and downside.
Depending on the method in which images are lazy loaded, Google lists it as an opportunity and interestingly enough it affects the performance metric (although Google suggests it doesn’t).
If an image is lazy loaded with
style="background-image: url("")
, the performance seems to take a minor hit. Now if performance is something you live for, the alternative is to lazy load with a data attribute e.g. data-bg or data-bgset.The end product looks like;
$output = '<div class="'. trim( $options['container_classes'] ) .' lazyload" data-bgset="'. $img_srcset . '" data-sizes="auto"><div class="'. trim( $options['inner_container_classes'] ) .'">' . $options['content'] . '</div></div>';
Hopefully this goes some way for anyone who’s on the lookout for something similar.
-
AuthorPosts
- You must be logged in to reply to this topic.