fix: basic details image display enhancement

[maze-runnar]

Fixes #4983

Checklist

• I have read the Contribution & Best practices Guide.
• My branch is up-to-date with the Upstream development branch.
• The acceptance, integration, unit tests and linter pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/eventyay/open-event-frontend/d7tymak9l
✅ Preview: https://open-event-frontend-git-fork-maze-runnar-image.eventyay.vercel.app

[codecov]

Codecov Report

Merging #5109 into development will decrease coverage by 0.04%.
The diff coverage is n/a.

@@               Coverage Diff               @@
##           development    #5109      +/-   ##
===============================================
- Coverage        22.84%   22.80%   -0.05%     
===============================================
  Files              489      489              
  Lines             5173     5169       -4     
  Branches            35       35              
===============================================
- Hits              1182     1179       -3     
+ Misses            3986     3985       -1     
  Partials             5        5              

Impacted Files	Coverage Δ
app/components/tabbed-navigation.js	33.33% <0.00%> (-20.00%)	⬇️
app/controllers/admin/sales/invoices.js	0.00% <0.00%> (ø)
app/helpers/confirm.js	16.66% <0.00%> (+5.55%)	⬆️
app/components/widgets/forms/ticket-input.js	80.00% <0.00%> (+13.33%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a0fe64e...6b2a0d3. Read the comment docs.

[maze-runnar]

[mariobehling]

Nice.

Now the actual goal of this issue is to show the uploaded background image in more or less the way it would look like on the live page. How can we get closer to achieving this?

In this image could you show the background image in the entire available width. There is a white space in the middle now.

[maze-runnar]

Now the actual goal of this issue is to show the uploaded background image in more or less the way it would look like on the live page. How can we get closer to achieving this?

is this kind of structure is needed?

this is similar to image that shows on public page. I can reduce height, but in card that image will not look good

option 2:

option 3:

[maze-runnar]

@mariobehling please confirm what of the above is requirement?

[mariobehling]

Option 2 uses the space as desired, but you scaled the picture out of proportion. On the live pages of events the picture is sclaed and shown in proportion. Maybe check there how it is done.

[maze-runnar]

Option 2 uses the space as desired, but you scaled the picture out of proportion. On the live pages of events the picture is sclaed and shown in proportion. Maybe check there how it is done.

the images on event page has a greater height than here is. here it is only 150px

[maze-runnar]

[mariobehling]

Option 2 uses the space as desired, but you scaled the picture out of proportion. On the live pages of events the picture is sclaed and shown in proportion. Maybe check there how it is done.

the images on event page has a greater height than here is. here it is only 150px

Good. You understand what I mean then.

• What is the ratio on the event page?
• What is the ratio on the wizard?

Please make the ratio on the wizard the same ratio as on the event page.

[mariobehling]

When you upload an image, there is a preview feature. This preview feature shows the area that will be displayed on the live site.

Here on the wizard the preview area should be displayed in the same way, please.

[maze-runnar]

public page:

Upload :

[maze-runnar]

Here on the wizard the preview area should be displayed in the same way, please.

For this, I have to increase the height from 150px, as on event page height of image is double near of upload page. This is looking good in this way.

[maze-runnar]

on increasing height to 250 px -

[maze-runnar]

@mariobehling please confirm, should I change it to 250px?

[mariobehling]

Yes, seems a good idea to change the height accordingly.

Have a look at this though:

• Please keep the original way for the logo.
• Rename Background Image to "Header Image"
• Rename "Select Event Image" to "Select Event Header Image"
• Reduce the spacing above the image description
  
• Do not make image description bold
• Ensure it looks fine on mobile view - there is no space below "Background Image" in mobile view
  

[maze-runnar]

[maze-runnar]

• Please keep the original way for the logo.
• Rename Background Image to "Header Image"
• Rename "Select Event Image" to "Select Event Header Image"
• Reduce the spacing above the image description
• Do not make image description bold
• Ensure it looks fine on mobile view - there is no space below "Background Image" in mobile view

[mariobehling]

Nice. Looks good to me now. Thank you.