You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The theme uses different background images (which belong to the theme and also
adjust to different viewports (art direction)).
As the background image is quite important for the overall visual impression in
this theme, it should also be shown in the Gutenberg editor.
One approach that comes to mind would be adding these <img>s all with display: none; to admin page footer using the admin_footer hook and
then show them using the right body class (another approach is used for this,
see #8162 (comment)).
However, the browser will still download all these background images,
even when only one background image (or even none, depending on what
page template should be used, some may use none at all) should be shown.
As already the nice PageTemplateUpdater is used (see the aforementioned link #8162 (comment)),
it could use JavaScript (React) to append the right <img> (with srcset and sizes) to
the editor page or remove it again when the template is changed.
Is this the right approach? How can the theme (server side PHP) provide the map for
template slug and the corresponding image URLs (and size) attribute?
Can the HTML be injected by the theme as a JavaScript template that can
be simply applied without the browser parsing it
(and downloading all the images unnecessarily)?
What would be the best practice approach for adding <img>
(or other decorative elements that are non-pseudo elements) to the editor page by page template?
The text was updated successfully, but these errors were encountered:
strarsis
changed the title
Add background <img>
Add background <img>s (depending on page template)
Apr 12, 2019
The theme uses different background images (which belong to the theme and also
adjust to different viewports (art direction)).
As the background image is quite important for the overall visual impression in
this theme, it should also be shown in the Gutenberg editor.
An
<img alt="">
is used for usingsrcset
andsizes
for support ofcovering background images (which occupy the height after some
viewport ratio threshold (see https://codepen.io/tigt/post/when-responsive-images-get-ugly#height-and-width-constrained-srcset)).
One approach that comes to mind would be adding these
<img>
s all withdisplay: none;
to admin page footer using theadmin_footer
hook andthen show them using the right body class (another approach is used for this,
see #8162 (comment)).
However, the browser will still download all these background images,
even when only one background image (or even none, depending on what
page template should be used, some may use none at all) should be shown.
As already the nice
PageTemplateUpdater
is used (see the aforementioned link #8162 (comment)),it could use JavaScript (React) to append the right
<img>
(withsrcset
andsizes
) tothe editor page or remove it again when the template is changed.
Is this the right approach? How can the theme (server side PHP) provide the map for
template slug and the corresponding image URLs (and
size
) attribute?Can the HTML be injected by the theme as a JavaScript template that can
be simply applied without the browser parsing it
(and downloading all the images unnecessarily)?
What would be the best practice approach for adding
<img>
(or other decorative elements that are non-pseudo elements) to the editor page by page template?
The text was updated successfully, but these errors were encountered: