Dynamic Image Variant in Template
I'm keen to set my image variants dynamically from content editor and not quite sure how I do this in twig.
I have three variants. They are named imageVariantsThumb, imageVariants16by9, and imageVariants3by2 in craft.
To render the variant on the image I use the following.
{% set optimizedImages = item.itemImage.one().imageVariantsThumb %}
Depending on the dropdown selected in the editor (say the values are thumb, 16by9 and 3by2) I want to change the variant name in this line of code. How do I use the value from my drop-down field to change the variant name on the end of the code above?
I have tried defining a variable using the value and replacing imageVariantsThumb above but it doesn't work:
{% if block.listImageRatio == '16by9' %}
{% set imageRatio = 'imageVariants16by9' %}
{% endif %}
{% set optimizedImages = item.itemImage.one().imageRatio %}
templating craft3 plugin-imageoptimize
edited Dec 18 at 22:38
Jalen Davenport
1,454313
asked Dec 17 at 14:16
Dan Lee
294112
add a comment |
I'm keen to set my image variants dynamically from content editor and not quite sure how I do this in twig.
I have three variants. They are named imageVariantsThumb, imageVariants16by9, and imageVariants3by2 in craft.
To render the variant on the image I use the following.
{% set optimizedImages = item.itemImage.one().imageVariantsThumb %}
Depending on the dropdown selected in the editor (say the values are thumb, 16by9 and 3by2) I want to change the variant name in this line of code. How do I use the value from my drop-down field to change the variant name on the end of the code above?
I have tried defining a variable using the value and replacing imageVariantsThumb above but it doesn't work:
{% if block.listImageRatio == '16by9' %}
{% set imageRatio = 'imageVariants16by9' %}
{% endif %}
{% set optimizedImages = item.itemImage.one().imageRatio %}
templating craft3 plugin-imageoptimize
edited Dec 18 at 22:38
Jalen Davenport
1,454313
asked Dec 17 at 14:16
Dan Lee
294112
add a comment |
I'm keen to set my image variants dynamically from content editor and not quite sure how I do this in twig.
I have three variants. They are named imageVariantsThumb, imageVariants16by9, and imageVariants3by2 in craft.
To render the variant on the image I use the following.
{% set optimizedImages = item.itemImage.one().imageVariantsThumb %}
Depending on the dropdown selected in the editor (say the values are thumb, 16by9 and 3by2) I want to change the variant name in this line of code. How do I use the value from my drop-down field to change the variant name on the end of the code above?
I have tried defining a variable using the value and replacing imageVariantsThumb above but it doesn't work:
{% if block.listImageRatio == '16by9' %}
{% set imageRatio = 'imageVariants16by9' %}
{% endif %}
{% set optimizedImages = item.itemImage.one().imageRatio %}
templating craft3 plugin-imageoptimize
edited Dec 18 at 22:38
Jalen Davenport
1,454313
asked Dec 17 at 14:16
Dan Lee
294112
I'm keen to set my image variants dynamically from content editor and not quite sure how I do this in twig.
I have three variants. They are named imageVariantsThumb, imageVariants16by9, and imageVariants3by2 in craft.
To render the variant on the image I use the following.
{% set optimizedImages = item.itemImage.one().imageVariantsThumb %}
Depending on the dropdown selected in the editor (say the values are thumb, 16by9 and 3by2) I want to change the variant name in this line of code. How do I use the value from my drop-down field to change the variant name on the end of the code above?
I have tried defining a variable using the value and replacing imageVariantsThumb above but it doesn't work:
{% if block.listImageRatio == '16by9' %}
{% set imageRatio = 'imageVariants16by9' %}
{% endif %}
{% set optimizedImages = item.itemImage.one().imageRatio %}
templating craft3 plugin-imageoptimize
templating craft3 plugin-imageoptimize
edited Dec 18 at 22:38
Jalen Davenport
1,454313
asked Dec 17 at 14:16
Dan Lee
294112
edited Dec 18 at 22:38
Jalen Davenport
1,454313
asked Dec 17 at 14:16
Dan Lee
294112
edited Dec 18 at 22:38
Jalen Davenport
1,454313
edited Dec 18 at 22:38
Jalen Davenport
1,454313
edited Dec 18 at 22:38
Jalen Davenport
1,454313
1,454313
asked Dec 17 at 14:16
Dan Lee
294112
asked Dec 17 at 14:16
Dan Lee
294112
asked Dec 17 at 14:16
Dan Lee
294112
294112
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
So instead of using the dot syntax ., this would be a good place to use the subscript syntax .
{# dot syntax #}
{{ foo.bar }}
{# subscript syntax #}
{{ foo['bar'] }}
When you use the subscript syntax to access a variable's attributes, you can safely use variables (by just removing the single quotes surrounding the attribute).
{% set bar = 'helloWorld' %}
{{ foo[bar] }}
{# functions just like foo.helloWorld #}
So for your example, you would do this:
{% if block.listImageRatio == '16by9' %}
{% set imageRatio = 'imageVariants16by9' %}
{% endif %}
{% set optimizedImages = item.itemImage.one()[imageRatio] %}
(Twig docs)
answered Dec 17 at 15:21
Jalen Davenport
1,454313
1
Thank you - that makes sense!
– Dan Lee
Dec 17 at 15:43
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "563"
};
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: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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%2fcraftcms.stackexchange.com%2fquestions%2f28835%2fdynamic-image-variant-in-template%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
So instead of using the dot syntax ., this would be a good place to use the subscript syntax .
{# dot syntax #}
{{ foo.bar }}
{# subscript syntax #}
{{ foo['bar'] }}
When you use the subscript syntax to access a variable's attributes, you can safely use variables (by just removing the single quotes surrounding the attribute).
{% set bar = 'helloWorld' %}
{{ foo[bar] }}
{# functions just like foo.helloWorld #}
So for your example, you would do this:
{% if block.listImageRatio == '16by9' %}
{% set imageRatio = 'imageVariants16by9' %}
{% endif %}
{% set optimizedImages = item.itemImage.one()[imageRatio] %}
(Twig docs)
answered Dec 17 at 15:21
Jalen Davenport
1,454313
1
Thank you - that makes sense!
– Dan Lee
Dec 17 at 15:43
add a comment |
So instead of using the dot syntax ., this would be a good place to use the subscript syntax .
{# dot syntax #}
{{ foo.bar }}
{# subscript syntax #}
{{ foo['bar'] }}
When you use the subscript syntax to access a variable's attributes, you can safely use variables (by just removing the single quotes surrounding the attribute).
{% set bar = 'helloWorld' %}
{{ foo[bar] }}
{# functions just like foo.helloWorld #}
So for your example, you would do this:
{% if block.listImageRatio == '16by9' %}
{% set imageRatio = 'imageVariants16by9' %}
{% endif %}
{% set optimizedImages = item.itemImage.one()[imageRatio] %}
(Twig docs)
answered Dec 17 at 15:21
Jalen Davenport
1,454313
1
Thank you - that makes sense!
– Dan Lee
Dec 17 at 15:43
add a comment |
So instead of using the dot syntax ., this would be a good place to use the subscript syntax .
{# dot syntax #}
{{ foo.bar }}
{# subscript syntax #}
{{ foo['bar'] }}
When you use the subscript syntax to access a variable's attributes, you can safely use variables (by just removing the single quotes surrounding the attribute).
{% set bar = 'helloWorld' %}
{{ foo[bar] }}
{# functions just like foo.helloWorld #}
So for your example, you would do this:
{% if block.listImageRatio == '16by9' %}
{% set imageRatio = 'imageVariants16by9' %}
{% endif %}
{% set optimizedImages = item.itemImage.one()[imageRatio] %}
(Twig docs)
answered Dec 17 at 15:21
Jalen Davenport
1,454313
So instead of using the dot syntax ., this would be a good place to use the subscript syntax .
{# dot syntax #}
{{ foo.bar }}
{# subscript syntax #}
{{ foo['bar'] }}
When you use the subscript syntax to access a variable's attributes, you can safely use variables (by just removing the single quotes surrounding the attribute).
{% set bar = 'helloWorld' %}
{{ foo[bar] }}
{# functions just like foo.helloWorld #}
So for your example, you would do this:
{% if block.listImageRatio == '16by9' %}
{% set imageRatio = 'imageVariants16by9' %}
{% endif %}
{% set optimizedImages = item.itemImage.one()[imageRatio] %}
(Twig docs)
answered Dec 17 at 15:21
Jalen Davenport
1,454313
answered Dec 17 at 15:21
Jalen Davenport
1,454313
answered Dec 17 at 15:21
Jalen Davenport
1,454313
answered Dec 17 at 15:21
Jalen Davenport
1,454313
1,454313
1
Thank you - that makes sense!
– Dan Lee
Dec 17 at 15:43
add a comment |
1
Thank you - that makes sense!
– Dan Lee
Dec 17 at 15:43
1
1
Thank you - that makes sense!
– Dan Lee
Dec 17 at 15:43
Thank you - that makes sense!
– Dan Lee
Dec 17 at 15:43
add a comment |
Thanks for contributing an answer to Craft CMS Stack Exchange!
- 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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2fcraftcms.stackexchange.com%2fquestions%2f28835%2fdynamic-image-variant-in-template%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
