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 '18 at 22:38
Jalen Davenport
1,489313
asked Dec 17 '18 at 14:16
Dan LeeDan Lee
321113
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 '18 at 22:38
Jalen Davenport
1,489313
asked Dec 17 '18 at 14:16
Dan LeeDan Lee
321113
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 '18 at 22:38
Jalen Davenport
1,489313
asked Dec 17 '18 at 14:16
Dan LeeDan Lee
321113
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 '18 at 22:38
Jalen Davenport
1,489313
asked Dec 17 '18 at 14:16
Dan LeeDan Lee
321113
edited Dec 18 '18 at 22:38
Jalen Davenport
1,489313
asked Dec 17 '18 at 14:16
Dan LeeDan Lee
321113
edited Dec 18 '18 at 22:38
Jalen Davenport
1,489313
edited Dec 18 '18 at 22:38
Jalen Davenport
1,489313
edited Dec 18 '18 at 22:38
Jalen Davenport
1,489313
1,489313
asked Dec 17 '18 at 14:16
Dan LeeDan Lee
321113
asked Dec 17 '18 at 14:16
Dan LeeDan Lee
321113
asked Dec 17 '18 at 14:16
Dan LeeDan Lee
321113
321113
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 '18 at 15:21
Jalen DavenportJalen Davenport
1,489313
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 '18 at 15:21
Jalen DavenportJalen Davenport
1,489313
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 '18 at 15:21
Jalen DavenportJalen Davenport
1,489313
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 '18 at 15:21
Jalen DavenportJalen Davenport
1,489313
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 '18 at 15:21
Jalen DavenportJalen Davenport
1,489313
answered Dec 17 '18 at 15:21
Jalen DavenportJalen Davenport
1,489313
answered Dec 17 '18 at 15:21
Jalen DavenportJalen Davenport
1,489313
answered Dec 17 '18 at 15:21
Jalen DavenportJalen Davenport
1,489313
1,489313
add a comment |
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.
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
