Use different Featured Image responsively on mobile with Divi on Wordpress
We are trying to find a way to be able to use a separate mobile Featured Image in Divi. Specifically a squared featured image, where our desktop featured image is 1200x630, more rectangular.
There are plugins that do this, such as this one: https://wordpress.org/plugins/mobile-featured-image/ <-- but it encounters the issue that Divi does not yet make use of the 'srcset' attribute added to Wordpress in WP v4.4 a couple years back.
Is there a way around this srcset limitation? Maybe another plugin that would allow us to choose a separate featured image for mobile (not simply a smaller one in the same ratio/dimensions, but a totally different image, like the Mobile Featured Image plugin above, but without the use of srcset)?
Or is there a known way to implement srcset into a theme, maybe a tutorial of some sort?
Thanks for any and all help, we've been beating our heads against the desk on this one for about a week now :)
wordpress image mobile srcset
asked Jun 22 '17 at 22:18
Ken BaughmanKen Baughman
62
add a comment |
We are trying to find a way to be able to use a separate mobile Featured Image in Divi. Specifically a squared featured image, where our desktop featured image is 1200x630, more rectangular.
There are plugins that do this, such as this one: https://wordpress.org/plugins/mobile-featured-image/ <-- but it encounters the issue that Divi does not yet make use of the 'srcset' attribute added to Wordpress in WP v4.4 a couple years back.
Is there a way around this srcset limitation? Maybe another plugin that would allow us to choose a separate featured image for mobile (not simply a smaller one in the same ratio/dimensions, but a totally different image, like the Mobile Featured Image plugin above, but without the use of srcset)?
Or is there a known way to implement srcset into a theme, maybe a tutorial of some sort?
Thanks for any and all help, we've been beating our heads against the desk on this one for about a week now :)
wordpress image mobile srcset
asked Jun 22 '17 at 22:18
Ken BaughmanKen Baughman
62
add a comment |
We are trying to find a way to be able to use a separate mobile Featured Image in Divi. Specifically a squared featured image, where our desktop featured image is 1200x630, more rectangular.
There are plugins that do this, such as this one: https://wordpress.org/plugins/mobile-featured-image/ <-- but it encounters the issue that Divi does not yet make use of the 'srcset' attribute added to Wordpress in WP v4.4 a couple years back.
Is there a way around this srcset limitation? Maybe another plugin that would allow us to choose a separate featured image for mobile (not simply a smaller one in the same ratio/dimensions, but a totally different image, like the Mobile Featured Image plugin above, but without the use of srcset)?
Or is there a known way to implement srcset into a theme, maybe a tutorial of some sort?
Thanks for any and all help, we've been beating our heads against the desk on this one for about a week now :)
wordpress image mobile srcset
asked Jun 22 '17 at 22:18
Ken BaughmanKen Baughman
62
We are trying to find a way to be able to use a separate mobile Featured Image in Divi. Specifically a squared featured image, where our desktop featured image is 1200x630, more rectangular.
There are plugins that do this, such as this one: https://wordpress.org/plugins/mobile-featured-image/ <-- but it encounters the issue that Divi does not yet make use of the 'srcset' attribute added to Wordpress in WP v4.4 a couple years back.
Is there a way around this srcset limitation? Maybe another plugin that would allow us to choose a separate featured image for mobile (not simply a smaller one in the same ratio/dimensions, but a totally different image, like the Mobile Featured Image plugin above, but without the use of srcset)?
Or is there a known way to implement srcset into a theme, maybe a tutorial of some sort?
Thanks for any and all help, we've been beating our heads against the desk on this one for about a week now :)
wordpress image mobile srcset
wordpress image mobile srcset
asked Jun 22 '17 at 22:18
Ken BaughmanKen Baughman
62
asked Jun 22 '17 at 22:18
Ken BaughmanKen Baughman
62
asked Jun 22 '17 at 22:18
Ken BaughmanKen Baughman
62
asked Jun 22 '17 at 22:18
Ken BaughmanKen Baughman
62
asked Jun 22 '17 at 22:18
Ken BaughmanKen Baughman
62
62
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
One possible solution, which I am considering, is to copy the section and then give that section a different image.
Once this is complete, use the "disable" feature (simply open the setting cog on your target and in the search type "disable")
Then, set which devices you would like that target to be loaded on.
Example:
row/module with full HD image for desktop
Disable:
mobile
tablet
row/module with mobile optimized image
Disable:
Desktop
tablet
I've use this functionality for design flow when buttons won't appear correctly or when stacking columns results in bad rows between devices with great success. Haven't yet tried this for images and not sure how this will actually work with load times and page size.
Worth a try, as it's a simple thing to do- and you can run google speed test before the edit and after the edit to see the actual net effect on the page performance.
For an example, you can navigate to my website:
NYChealing.com/about
notice, that the desktop version shows the information columns as alternating ROWS, but that on mobile, they display as duplicate styled ROWS.
The coding is actually duplicated ROWS, with opposite layouts, using DISABLE to display them correctly for each device.
In the photo below, (desktop view) the greyed out section displays on mobile, while the similar row displays on desktop and tablet
Alternatively, there are some snippets people have written, which may or may not function properly- but are child-theme add-ins.
One such site that has information and the code is here:
https://www.fldtrace.com/better-faster-responsive-images-divi
answered Nov 25 '18 at 3:39
James RuffJames Ruff
11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f44710184%2fuse-different-featured-image-responsively-on-mobile-with-divi-on-wordpress%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
One possible solution, which I am considering, is to copy the section and then give that section a different image.
Once this is complete, use the "disable" feature (simply open the setting cog on your target and in the search type "disable")
Then, set which devices you would like that target to be loaded on.
Example:
row/module with full HD image for desktop
Disable:
mobile
tablet
row/module with mobile optimized image
Disable:
Desktop
tablet
I've use this functionality for design flow when buttons won't appear correctly or when stacking columns results in bad rows between devices with great success. Haven't yet tried this for images and not sure how this will actually work with load times and page size.
Worth a try, as it's a simple thing to do- and you can run google speed test before the edit and after the edit to see the actual net effect on the page performance.
For an example, you can navigate to my website:
NYChealing.com/about
notice, that the desktop version shows the information columns as alternating ROWS, but that on mobile, they display as duplicate styled ROWS.
The coding is actually duplicated ROWS, with opposite layouts, using DISABLE to display them correctly for each device.
In the photo below, (desktop view) the greyed out section displays on mobile, while the similar row displays on desktop and tablet
Alternatively, there are some snippets people have written, which may or may not function properly- but are child-theme add-ins.
One such site that has information and the code is here:
https://www.fldtrace.com/better-faster-responsive-images-divi
answered Nov 25 '18 at 3:39
James RuffJames Ruff
11
add a comment |
One possible solution, which I am considering, is to copy the section and then give that section a different image.
Once this is complete, use the "disable" feature (simply open the setting cog on your target and in the search type "disable")
Then, set which devices you would like that target to be loaded on.
Example:
row/module with full HD image for desktop
Disable:
mobile
tablet
row/module with mobile optimized image
Disable:
Desktop
tablet
I've use this functionality for design flow when buttons won't appear correctly or when stacking columns results in bad rows between devices with great success. Haven't yet tried this for images and not sure how this will actually work with load times and page size.
Worth a try, as it's a simple thing to do- and you can run google speed test before the edit and after the edit to see the actual net effect on the page performance.
For an example, you can navigate to my website:
NYChealing.com/about
notice, that the desktop version shows the information columns as alternating ROWS, but that on mobile, they display as duplicate styled ROWS.
The coding is actually duplicated ROWS, with opposite layouts, using DISABLE to display them correctly for each device.
In the photo below, (desktop view) the greyed out section displays on mobile, while the similar row displays on desktop and tablet
Alternatively, there are some snippets people have written, which may or may not function properly- but are child-theme add-ins.
One such site that has information and the code is here:
https://www.fldtrace.com/better-faster-responsive-images-divi
answered Nov 25 '18 at 3:39
James RuffJames Ruff
11
add a comment |
One possible solution, which I am considering, is to copy the section and then give that section a different image.
Once this is complete, use the "disable" feature (simply open the setting cog on your target and in the search type "disable")
Then, set which devices you would like that target to be loaded on.
Example:
row/module with full HD image for desktop
Disable:
mobile
tablet
row/module with mobile optimized image
Disable:
Desktop
tablet
I've use this functionality for design flow when buttons won't appear correctly or when stacking columns results in bad rows between devices with great success. Haven't yet tried this for images and not sure how this will actually work with load times and page size.
Worth a try, as it's a simple thing to do- and you can run google speed test before the edit and after the edit to see the actual net effect on the page performance.
For an example, you can navigate to my website:
NYChealing.com/about
notice, that the desktop version shows the information columns as alternating ROWS, but that on mobile, they display as duplicate styled ROWS.
The coding is actually duplicated ROWS, with opposite layouts, using DISABLE to display them correctly for each device.
In the photo below, (desktop view) the greyed out section displays on mobile, while the similar row displays on desktop and tablet
Alternatively, there are some snippets people have written, which may or may not function properly- but are child-theme add-ins.
One such site that has information and the code is here:
https://www.fldtrace.com/better-faster-responsive-images-divi
answered Nov 25 '18 at 3:39
James RuffJames Ruff
11
One possible solution, which I am considering, is to copy the section and then give that section a different image.
Once this is complete, use the "disable" feature (simply open the setting cog on your target and in the search type "disable")
Then, set which devices you would like that target to be loaded on.
Example:
row/module with full HD image for desktop
Disable:
mobile
tablet
row/module with mobile optimized image
Disable:
Desktop
tablet
I've use this functionality for design flow when buttons won't appear correctly or when stacking columns results in bad rows between devices with great success. Haven't yet tried this for images and not sure how this will actually work with load times and page size.
Worth a try, as it's a simple thing to do- and you can run google speed test before the edit and after the edit to see the actual net effect on the page performance.
For an example, you can navigate to my website:
NYChealing.com/about
notice, that the desktop version shows the information columns as alternating ROWS, but that on mobile, they display as duplicate styled ROWS.
The coding is actually duplicated ROWS, with opposite layouts, using DISABLE to display them correctly for each device.
In the photo below, (desktop view) the greyed out section displays on mobile, while the similar row displays on desktop and tablet
Alternatively, there are some snippets people have written, which may or may not function properly- but are child-theme add-ins.
One such site that has information and the code is here:
https://www.fldtrace.com/better-faster-responsive-images-divi
answered Nov 25 '18 at 3:39
James RuffJames Ruff
11
edited Nov 25 '18 at 3:59
answered Nov 25 '18 at 3:39
James RuffJames Ruff
11
answered Nov 25 '18 at 3:39
James RuffJames Ruff
11
answered Nov 25 '18 at 3:39
James RuffJames Ruff
11
11
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f44710184%2fuse-different-featured-image-responsively-on-mobile-with-divi-on-wordpress%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
