Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

42678 adaptive image resolution #710

Merged
merged 32 commits into from
Jun 18, 2024
Merged

42678 adaptive image resolution #710

Show file tree
Hide file tree
Changes from 30 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
d11c0aa
42678 adaptive image resolution
yeneastgate Dec 28, 2023
9fdd269
42678 update unit test
yeneastgate Dec 28, 2023
7821c29
42678 refactor code
yeneastgate Dec 29, 2023
a983cf2
Merge branch 'master' into 42678-adaptive-image-resolution
yeneastgate Jan 3, 2024
8ad4d12
Merge branch 'master' into 42678-adaptive-image-resolution
yeneastgate Apr 23, 2024
c6d1c90
Merge branch 'master' into 42678-adaptive-image-resolution
fredericalpers May 8, 2024
f139de8
Merge branch 'master' into 42678-adaptive-image-resolution
yeneastgate May 16, 2024
c7ba1f0
refactor and fix output for responsive image sources
andernath May 23, 2024
b09d572
Merge remote-tracking branch 'origin/42678-adaptive-image-resolution'…
andernath May 23, 2024
77456a8
fix unit test
andernath May 23, 2024
0ee616f
fix unit test
andernath May 27, 2024
d783150
fix unit test
andernath May 27, 2024
65f7c97
fix unit test
andernath May 27, 2024
c527e1c
fix unit test
andernath May 27, 2024
3ac8b6b
fix unit test
andernath May 27, 2024
92f54c0
fix unit test
andernath May 27, 2024
d0e4447
fix smoketest for <=PHP7.2
andernath May 27, 2024
2137c0f
fix width and height dimensions
andernath May 28, 2024
3cad47c
fix unittests
andernath May 29, 2024
5419dd8
Remove unused params
andernath May 29, 2024
45a91a2
Fix missing styling
andernath May 29, 2024
db9841a
adapt image sizes
pospisk Jun 12, 2024
56c352e
renamed variable
pospisk Jun 12, 2024
2500006
adapt image sizes
pospisk Jun 12, 2024
b1d807d
adapt image sizes
pospisk Jun 12, 2024
c5c98ec
fix unit test
pospisk Jun 12, 2024
bdb074d
fix unit test
pospisk Jun 12, 2024
33b7366
revert
pospisk Jun 12, 2024
bb8808b
fix unit test
pospisk Jun 12, 2024
3801d29
fix unit test
pospisk Jun 12, 2024
2c356bb
revert width sizes to a value with the best possible compatibility wi…
andernath Jun 18, 2024
dc9bcca
Change image width on mobile to fit for lighthouse testing
andernath Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions css/onoffice-default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,4 +71,19 @@ form[data-applicant-form-id] #spinner {

.message{
display: none!important;
}

.oo-picture {
display: block;
height: 100%;
width: 100%;
line-height: 0;
overflow: hidden;
}

.oo-responsive-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
29 changes: 29 additions & 0 deletions plugin/EstateList.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -706,6 +706,35 @@ public function getEstatePictureTitle($imageId)
return $this->_pEstateFiles->getEstatePictureTitle($imageId, $currentEstate);
}

/**
* @param int $imageId
* @param int $breakpoint
* @param float|null $width
* @param float|null $height
* @param bool $maxWidth
* @return string
*/
public function getResponsiveImageSource(int $imageId, int $breakpoint, float $width = null, float $height = null, bool $maxWidth = false) {
$sourceTag = '<source media="(' . ($maxWidth ? 'max-width:' : 'min-width:') . $breakpoint . 'px)" srcset="';
$pictureOptions1 = null;
$pictureOptions15 = null;
$pictureOptions2 = null;
$pictureOptions3 = null;

if(isset($width) || isset($height)) {
$pictureOptions1 = ['width'=> isset($width) ? $width : null, 'height'=> isset($height) ? $height : null];
$pictureOptions15 = ['width'=> isset($width) ? round($width * 1.5) : null, 'height'=>isset($height) ? round($height * 1.5) : null];
$pictureOptions2 = ['width'=> isset($width) ? round($width * 2) : null, 'height'=>isset($height) ? round($height * 2) : null];
$pictureOptions3 = ['width'=> isset($width) ? round($width * 3) : null, 'height'=>isset($height) ? round($height * 3) : null];
}

return $sourceTag .
$this->getEstatePictureUrl($imageId, $pictureOptions1) . ' 1x,' .
$this->getEstatePictureUrl($imageId, $pictureOptions15) . ' 1.5x,' .
$this->getEstatePictureUrl($imageId, $pictureOptions2) . ' 2x,' .
$this->getEstatePictureUrl($imageId, $pictureOptions3) . ' 3x">';
}

/**
* @param int $imageId
* @return string
Expand Down
75 changes: 72 additions & 3 deletions templates.dist/estate/default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,53 @@

$dontEcho = array("objekttitel", "objektbeschreibung", "lage", "ausstatt_beschr", "sonstige_angaben", "MPAreaButlerUrlWithAddress", "MPAreaButlerUrlNoAddress");

/* responsive picture properties
* customizable widths and heights for individual layouts
*/
$image_width_xs = 300;
$image_width_sm = 350;
$image_width_md = 450;
$image_width_lg = 250;
$image_width_xl = 250;
$image_width_xxl = 250;
$image_width_xxxl = 250;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wie ermittelst du die maximale Breite für ein Bild?
Ich bin hier von einem fluid container ausgegangen, in dem der Inhalt liegt und habe mir die Breiten bei einem dreiteiligen Layout angeschaut.

Hast du hier vielleicht Höhe und Breite vertauscht?
Ist das bei detail und similar estate eventuell der selber Grund?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ich hatte das mit der W3PM Neve-Child Instanz getestet (das Ticket weist auch in diese Richtung), aber gerade ist mir klar geworden, dass die Größen hier leider teilweise irrelevant sind, weil jeder Benutzer ein anderes Theme mit unterschiedlichen Inhaltsbreiten verwenden kann. Das führt dazu, dass wir keine „richtigen“ Größen für das Standard-Template liefern können, da die Seiten immer unterschiedlich sein werden.

Die Breiten hatte ich manuell anhand der Elementbreite für die jeweiligen Breakpoints getestet:

Zum Beispiel bei 576px - 768px (sm) ist der Mittelwert des Breakpoints 672px, und dafür hatte ich 350px genommen, weil, wenn 2 Spalten angezeigt werden, die 300px & 300px breit sind, bei 672px dann ein Bild 50px herunterskaliert werden muss, und bei 767px ist es dann 350px breit.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Genau deswegen habe ich versucht eine sinnvolle größtmögliche Breite bei einem dreiteiligen Layout zu wählen.
Hast du einen besseren Vorschlag, als dieses Vorgehen?
Wenn das Styling customized wurde, werden wahrscheinlich eigene Templates verwendet und da können die Breakpoint Größen individuell angepasst werden.

Ich werde den Commit rückgängig machen.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nein, deine Bildgrößen können dann bleiben. Nur bei xs verwende bitte eine kleinere Größe als 545px.
Lighthouse Mobile testet mit 412px device width

$image_height_xs = null;
$image_height_sm = null;
$image_height_md = null;
$image_height_lg = null;
$image_height_xl = null;
$image_height_xxl = null;
$image_height_xxxl = null;
$dimensions = [
'575' => [
'w' => $image_width_xs,
'h' => $image_height_xs
],
'1600' => [
'w' => $image_width_xxxl,
'h' => $image_height_xxxl
],
'1400' => [
'w' => $image_width_xxl,
'h' => $image_height_xxl
],
'1200' => [
'w' => $image_width_xl,
'h' => $image_height_xl
],
'992' => [
'w' => $image_width_lg,
'h' => $image_height_lg
],
'768' => [
'w' => $image_width_md,
'h' => $image_height_md
],
'576' => [
'w' => $image_width_sm,
'h' => $image_height_sm
]
];
?>

<style>
Expand Down Expand Up @@ -84,10 +131,32 @@
$pictureValues = $pEstatesClone->getEstatePictureValues( $id );

if ( $referenz === "1" && $pEstatesClone->getViewRestrict() ) {
echo '<div style="background-image: url(' . esc_url( $pEstatesClone->getEstatePictureUrl( $id, [ 'height' => 350 ] ) ) . ');" class="oo-listimage estate-status">';
echo '<div class="oo-listimage estate-status">';
} else {
echo '<a href="' . esc_url( $pEstatesClone->getEstateLink() ) . '" style="background-image: url(' . esc_url( $pEstatesClone->getEstatePictureUrl( $id, [ 'height' => 350 ] ) ) . ');" class="oo-listimage estate-status">';
echo '<a class="oo-listimage estate-status" href="' . esc_url($pEstatesClone->getEstateLink()) . '">';
}
echo '<picture class="oo-picture">';
/**
* getResponsiveImageSource(
* @param int $imageId
* @param int $mediaBreakPoint
* @param float|null $imageWidth for media breakpoint, optional
* @param float|null $imageHeight for media breakpoint, optional
* @param bool $maxWidth, default = false)
* @return string for image source on various media
*/
echo $pEstatesClone->getResponsiveImageSource($id, 575, $dimensions['575']['w'], $dimensions['575']['h'], true);
echo $pEstatesClone->getResponsiveImageSource($id, 1600, $dimensions['1600']['w'], $dimensions['1600']['h']);
echo $pEstatesClone->getResponsiveImageSource($id, 1400, $dimensions['1400']['w'], $dimensions['1400']['h']);
echo $pEstatesClone->getResponsiveImageSource($id, 1200, $dimensions['1200']['w'], $dimensions['1200']['h']);
echo $pEstatesClone->getResponsiveImageSource($id, 992, $dimensions['992']['w'], $dimensions['992']['h']);
echo $pEstatesClone->getResponsiveImageSource($id, 768, $dimensions['768']['w'], $dimensions['768']['h']);
echo $pEstatesClone->getResponsiveImageSource($id, 576, $dimensions['576']['w'], $dimensions['576']['h']);
echo '<img class="oo-responsive-image estate-status" ' .
'src="' . esc_url($pEstatesClone->getEstatePictureUrl($id, isset($dimensions['1600']['w']) || isset($dimensions['1600']['h']) ? ['width'=> $dimensions['1600']['w'], 'height'=>$dimensions['1600']['h']] : null)) . '" ' .
'alt="' . esc_html($pEstatesClone->getEstatePictureTitle($id)?? __('Image of property', 'onoffice-for-wp-websites')) . '" ' .
'loading="lazy"/>';
echo '</picture>';
if ($pictureValues['type'] === \onOffice\WPlugin\Types\ImageTypes::TITLE && $marketingStatus != '') {
echo '<span>'.esc_html($marketingStatus).'</span>';
}
Expand Down Expand Up @@ -197,4 +266,4 @@
$('button.onoffice.favorize').each(onOffice.addFavoriteButtonLabel);
});
</script>
<?php } ?>
<?php } ?>
77 changes: 73 additions & 4 deletions templates.dist/estate/default_detail.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,55 @@

$dontEcho = array("objekttitel", "objektbeschreibung", "lage", "ausstatt_beschr", "sonstige_angaben", "MPAreaButlerUrlWithAddress", "MPAreaButlerUrlNoAddress");
/** @var EstateDetail $pEstates */

/* responsive picture properties
* customizable widths and heights for individual layouts
*/
$image_width_xs = 400;
$image_width_sm = 600;
$image_width_md = 900;
$image_width_lg = 500;
$image_width_xl = 500;
$image_width_xxl = 500;
$image_width_xxxl = 500;
$image_height_xs = null;
$image_height_sm = null;
$image_height_md = null;
$image_height_lg = null;
$image_height_xl = null;
$image_height_xxl = null;
$image_height_xxxl = null;

$dimensions = [
'575' => [
'w' => $image_width_xs,
'h' => $image_height_xs
],
'1600' => [
'w' => $image_width_xxxl,
'h' => $image_height_xxxl
],
'1400' => [
'w' => $image_width_xxl,
'h' => $image_height_xxl
],
'1200' => [
'w' => $image_width_xl,
'h' => $image_height_xl
],
'992' => [
'w' => $image_width_lg,
'h' => $image_height_lg
],
'768' => [
'w' => $image_width_md,
'h' => $image_height_md
],
'576' => [
'w' => $image_width_sm,
'h' => $image_height_sm
]
];
?>
<style>
ul.oo-listparking {
Expand All @@ -55,10 +104,30 @@
<?php
$estatePictures = $pEstates->getEstatePictures();
foreach ($estatePictures as $id) {
printf(
'<div class="oo-detailspicture" style="background-image: url(\'%s\');"></div>' . "\n",
esc_url($pEstates->getEstatePictureUrl($id))
);
echo '<div class="oo-detailspicture">';
echo '<picture class="oo-picture">';
/**
* getResponsiveImageSource(
* @param int $imageId
* @param int $mediaBreakPoint
* @param float|null $imageWidth for media breakpoint, optional
* @param float|null $imageHeight for media breakpoint, optional
* @param bool $maxWidth, default = false)
* @return string for image source on various media
*/
echo $pEstates->getResponsiveImageSource($id, 575, $dimensions['575']['w'], $dimensions['575']['h'], true);
echo $pEstates->getResponsiveImageSource($id, 1600, $dimensions['1600']['w'], $dimensions['1600']['h']);
echo $pEstates->getResponsiveImageSource($id, 1400, $dimensions['1400']['w'], $dimensions['1400']['h']);
echo $pEstates->getResponsiveImageSource($id, 1200, $dimensions['1200']['w'], $dimensions['1200']['h']);
echo $pEstates->getResponsiveImageSource($id, 992, $dimensions['992']['w'], $dimensions['992']['h']);
echo $pEstates->getResponsiveImageSource($id, 768, $dimensions['768']['w'], $dimensions['768']['h']);
echo $pEstates->getResponsiveImageSource($id, 576, $dimensions['576']['w'], $dimensions['576']['h']);
echo '<img class="oo-responsive-image estate-status" ' .
'src="' . esc_url($pEstates->getEstatePictureUrl($id, isset($dimensions['1600']['w']) || isset($dimensions['1600']['h']) ? ['width'=> $dimensions['1600']['w'], 'height'=>$dimensions['1600']['h']] : null)) . '" ' .
'alt="' . esc_html($pEstates->getEstatePictureTitle($id) ?? __('Image of property', 'onoffice-for-wp-websites')) . '" ' .
'loading="lazy"/>';
echo '</picture>';;
echo '</div>';
}
?>
</div>
Expand Down
79 changes: 75 additions & 4 deletions templates.dist/estate/similar_estates.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,53 @@
<?php $dontEcho = array("objekttitel", "objektbeschreibung", "lage", "ausstatt_beschr", "sonstige_angaben", "MPAreaButlerUrlWithAddress", "MPAreaButlerUrlNoAddress"); ?>
<?php $dontEcho = array("objekttitel", "objektbeschreibung", "lage", "ausstatt_beschr", "sonstige_angaben", "MPAreaButlerUrlWithAddress", "MPAreaButlerUrlNoAddress");

/* responsive picture properties
* customizable widths and heights for individual layouts
*/
$image_width_xs = 400;
$image_width_sm = 600;
$image_width_md = 800;
$image_width_lg = 650;
$image_width_xl = 750;
$image_width_xxl = 750;
$image_width_xxxl = 750;
$image_height_xs = null;
$image_height_sm = null;
$image_height_md = null;
$image_height_lg = null;
$image_height_xl = null;
$image_height_xxl = null;
$image_height_xxxl = null;
$dimensions = [
'575' => [
'w' => $image_width_xs,
'h' => $image_height_xs
],
'1600' => [
'w' => $image_width_xxxl,
'h' => $image_height_xxxl
],
'1400' => [
'w' => $image_width_xxl,
'h' => $image_height_xxl
],
'1200' => [
'w' => $image_width_xl,
'h' => $image_height_xl
],
'992' => [
'w' => $image_width_lg,
'h' => $image_height_lg
],
'768' => [
'w' => $image_width_md,
'h' => $image_height_md
],
'576' => [
'w' => $image_width_sm,
'h' => $image_height_sm
]
];
?>

<style>
.oo-details-btn:focus {
Expand Down Expand Up @@ -27,10 +76,32 @@
foreach ( $estatePictures as $id ) {
$pictureValues = $pEstates->getEstatePictureValues( $id );
if ( $referenz === "1" && $pEstates->getViewRestrict() ) {
echo 'div style="background-image: url('.esc_url($pEstates->getEstatePictureUrl( $id )).');" class="oo-listimage">';
echo '<div class="oo-listimage">';
} else {
echo '<a href="'.$pEstates->getEstateLink().'" style="background-image: url('.esc_url($pEstates->getEstatePictureUrl( $id )).');" class="oo-listimage">';
echo '<a class="oo-listimage estate-status" href="' . esc_url($pEstates->getEstateLink()) . '">';
}
echo '<picture class="oo-picture">';
/**
* getResponsiveImageSource(
* @param int $imageId
* @param int $mediaBreakPoint
* @param float|null $imageWidth for media breakpoint, optional
* @param float|null $imageHeight for media breakpoint, optional
* @param bool $maxWidth, default = false)
* @return string for image source on various media
*/
echo $pEstates->getResponsiveImageSource($id, 575, $dimensions['575']['w'], $dimensions['575']['h'], true);
echo $pEstates->getResponsiveImageSource($id, 1600, $dimensions['1600']['w'], $dimensions['1600']['h']);
echo $pEstates->getResponsiveImageSource($id, 1400, $dimensions['1400']['w'], $dimensions['1400']['h']);
echo $pEstates->getResponsiveImageSource($id, 1200, $dimensions['1200']['w'], $dimensions['1200']['h']);
echo $pEstates->getResponsiveImageSource($id, 992, $dimensions['992']['w'], $dimensions['992']['h']);
echo $pEstates->getResponsiveImageSource($id, 768, $dimensions['768']['w'], $dimensions['768']['h']);
echo $pEstates->getResponsiveImageSource($id, 576, $dimensions['576']['w'], $dimensions['576']['h']);
echo '<img class="oo-responsive-image estate-status" ' .
'src="' . esc_url($pEstates->getEstatePictureUrl($id, isset($dimensions['1600']['w']) || isset($dimensions['1600']['h']) ? ['width'=> $dimensions['1600']['w'], 'height'=>$dimensions['1600']['h']] : null)) . '" ' .
'alt="' . esc_html($pEstates->getEstatePictureTitle($id) ?? __('Image of property', 'onoffice-for-wp-websites')) . '" ' .
'loading="lazy"/>';
echo '</picture>';
if ($pictureValues['type'] === \onOffice\WPlugin\Types\ImageTypes::TITLE && $marketingStatus != '') {
echo '<span>'.esc_html($marketingStatus).'</span>';
}
Expand Down Expand Up @@ -71,4 +142,4 @@
</div>
</div>
<?php } ?>
</div>
</div>
Loading
Loading