FR: MT Hero V2 Block displays different images for mobile and desktop. #106
Comments
DanielaPedrochevd
changed the title
|
Relates to #8 |
This was referenced Oct 9, 2023
|
Per @WendyKruger: Please adjust the code as was done for Volvo. Ideally I’d like the ability to specify a desktop, tablet, and mobile image. (Her comment was added to #47). |
|
@WendyKruger @cogniSyb needs a portrait picture with a 2/3 ratio of at least 750px wide and a landscape image of 16/9 of at least 2000px wide. He has some screenshots that he will share later to show the outcome with the current hero images for the homepage. The hero images need to be provided for the PDPs as well (edited) |
|
@cogniSyb @BeckyMedlin Here are the images for the home page. Will provide for PDPs next.
|
|
Here are the PDP hero images @cogniSyb @BeckyMedlin |
|
confirmed as done as tested with two images on https://106-hero-adaptive-images--vg-macktrucks-com-rd--netcentric.hlx.page/drafts/syb/hero |
cogniSyb
added a commit
that referenced
this issue
Nov 28, 2023
manuel-vara
added a commit
that referenced
this issue
Jan 31, 2024
* Update fstab.yaml for redesign * change url and sharepoint to upstream urls * Inpage navigation is in reversed order on Firefox #173 (#178) * fix Firefox issue with sorting * fix naming issues * refactor focus state, button styles * fix overlap issue * Hero V2 Block displays different images for mobile and desktop. #106 (#179) * refactor naming structure * refactor adaptive images mechanism * Icon cards block (#181) * hlxsites#509 Fix displaying header on dealer page * fix done * one trust position ix * Embed block match NZ one * Update feed.xml * Fix createElement() v1-Cards * Update feed.xml * Update release.yml * columns block adapted * icon cards working * css clean * adjustements * last changes * specific class * btn state styling * comments corrected * secondary btn margin corrected * secondary btn class added * cleanup --------- Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz> Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com> Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com> * The pop-up of the video displayed clicking on the Play video button is smaller and the thumbnail is cutout #182 (#183) * iPhone/iPad - Icon Cards - The local video in the video pop-up cannot be played and is incorrectly displayed #184 (#185) * fix #184: use <video> tag for video in modal * fix modal close button * fix override fullscreen play for safari * refactor setting attributes * Opening up Images will display an incorrect default state on the Image grid carousel #169 (#193) * Hero variant for Solutions page #45 (#197) * hero variants added * refactored changes to alltrucks block * comments addressed * color confusion * make btn color always white * button style refactor * margin solved * pdp edge cases * Tabbed Carousel variant for wheelbase #190 (#196) * add new variant for tabbed carousel * 190 fadeIn effect with no scroll * 190 Fix line more than 100 chars * 190 fix index overflow * Figcap conditional add, default color & tab items wider * list style none & setCarousel index-1 too --------- Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> * Pencil Promo block #108 (#195) * #108 - Pencil promo and banner promo block * #108 - Add cursor: pointer to the block * #108 - Add pencil banner links styles * #108 - Change link hover color to acheive better contrast * Applied comments & each block cares by itself only * fixed alignment issue in line 288 * fix lint issue * Fix an issue if p Element is not present inside content * Style issues fix * remove an unnecessary search for h1 & its styling * move the hover effect 1 level up & a bit of code clean up --------- Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> * fix alignment, add hover and focus state * V2 Columns Block variation #133 (#186) --------- Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com> Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com> * Add "My Assets" functionality #201 (#202) * add my assets to sidekick * add custom viewport configurations for sidekick library * Powertrain V2 Slider Block #147 (#200) * add block * add new section background color --------- Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com> Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com> Co-authored-by: SantiagoHomps-NC <103571932+SantiagoHomps-NC@users.noreply.github.com> Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz> Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com> Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: taimurCognizant <150666850+taimurCognizant@users.noreply.github.com> Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com> Co-authored-by: Marko Vukićević <139957716+markovukiceviccn@users.noreply.github.com>
cogniSyb
added a commit
that referenced
this issue
Feb 26, 2024
* change url and sharepoint to upstream urls * Release 4 (#211) * Update fstab.yaml for redesign * change url and sharepoint to upstream urls * Inpage navigation is in reversed order on Firefox #173 (#178) * fix Firefox issue with sorting * fix naming issues * refactor focus state, button styles * fix overlap issue * Hero V2 Block displays different images for mobile and desktop. #106 (#179) * refactor naming structure * refactor adaptive images mechanism * Icon cards block (#181) * hlxsites#509 Fix displaying header on dealer page * fix done * one trust position ix * Embed block match NZ one * Update feed.xml * Fix createElement() v1-Cards * Update feed.xml * Update release.yml * columns block adapted * icon cards working * css clean * adjustements * last changes * specific class * btn state styling * comments corrected * secondary btn margin corrected * secondary btn class added * cleanup --------- Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz> Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com> Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com> * The pop-up of the video displayed clicking on the Play video button is smaller and the thumbnail is cutout #182 (#183) * iPhone/iPad - Icon Cards - The local video in the video pop-up cannot be played and is incorrectly displayed #184 (#185) * fix #184: use <video> tag for video in modal * fix modal close button * fix override fullscreen play for safari * refactor setting attributes * Opening up Images will display an incorrect default state on the Image grid carousel #169 (#193) * Hero variant for Solutions page #45 (#197) * hero variants added * refactored changes to alltrucks block * comments addressed * color confusion * make btn color always white * button style refactor * margin solved * pdp edge cases * Tabbed Carousel variant for wheelbase #190 (#196) * add new variant for tabbed carousel * 190 fadeIn effect with no scroll * 190 Fix line more than 100 chars * 190 fix index overflow * Figcap conditional add, default color & tab items wider * list style none & setCarousel index-1 too --------- Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> * Pencil Promo block #108 (#195) * #108 - Pencil promo and banner promo block * #108 - Add cursor: pointer to the block * #108 - Add pencil banner links styles * #108 - Change link hover color to acheive better contrast * Applied comments & each block cares by itself only * fixed alignment issue in line 288 * fix lint issue * Fix an issue if p Element is not present inside content * Style issues fix * remove an unnecessary search for h1 & its styling * move the hover effect 1 level up & a bit of code clean up --------- Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> * fix alignment, add hover and focus state * V2 Columns Block variation #133 (#186) --------- Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com> Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com> * Add "My Assets" functionality #201 (#202) * add my assets to sidekick * add custom viewport configurations for sidekick library * Powertrain V2 Slider Block #147 (#200) * add block * add new section background color --------- Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com> Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com> Co-authored-by: SantiagoHomps-NC <103571932+SantiagoHomps-NC@users.noreply.github.com> Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz> Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com> Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: taimurCognizant <150666850+taimurCognizant@users.noreply.github.com> Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com> Co-authored-by: Marko Vukićević <139957716+markovukiceviccn@users.noreply.github.com> * change url and sharepoint to upstream urls --------- Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com> Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com> Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com> Co-authored-by: SantiagoHomps-NC <103571932+SantiagoHomps-NC@users.noreply.github.com> Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz> Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com> Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: taimurCognizant <150666850+taimurCognizant@users.noreply.github.com> Co-authored-by: Marko Vukićević <139957716+markovukiceviccn@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Agile requirement
As a business owner, I want to display a different image resolution for Mobile and Desktop so that I can achieve the following look:
Description
Allow Hero V2 block to display different (previously uploaded images) for the different viewports (mobile, tablet? and desktop) a solution similar to the one on the Trucks lineup block.
Acceptance Criteria
1- As an editor, I'm able to set an image for desktop, mobile, and tablet? viewports just like it is done with Volvo.
2- The Hero V2 block is always in 100% view in all of the browsers; see Netcentric/vg-volvotrucks-us-rd#175
The text was updated successfully, but these errors were encountered: