diff options
| author | Thedro Neely <thedroneely@gmail.com> | 2019-08-22 07:57:55 -0400 |
|---|---|---|
| committer | Thedro Neely <thedroneely@gmail.com> | 2019-08-22 07:57:55 -0400 |
| commit | df1bd4612692dbf0d37e26022e19515ab1097b54 (patch) | |
| tree | 6a7eb1321de8acdbdd4c72f7f65fcd3772416534 | |
| parent | 347281626b0ccde16ac9d7042c55d51677c9f2ee (diff) | |
| download | thedroneely.com-df1bd4612692dbf0d37e26022e19515ab1097b54.tar.gz thedroneely.com-df1bd4612692dbf0d37e26022e19515ab1097b54.tar.bz2 thedroneely.com-df1bd4612692dbf0d37e26022e19515ab1097b54.zip | |
public/css: Prevent responsive image reflow
| -rw-r--r-- | app/views/index.view.php | 23 | ||||
| -rw-r--r-- | generators/hugo/themes/tdro/layouts/shortcodes/image.html | 11 | ||||
| -rw-r--r-- | public/css/tdro.css | 2 |
3 files changed, 25 insertions, 11 deletions
diff --git a/app/views/index.view.php b/app/views/index.view.php index 7955fb7..f62a47d 100644 --- a/app/views/index.view.php +++ b/app/views/index.view.php @@ -23,13 +23,22 @@ In it for the long haul </h2> - <img data-image-zoom alt="Mountains" src="/images/mountains.jpg" - width="<?php echo getimagesize( - $_SERVER['DOCUMENT_ROOT'] . '/images/mountains.jpg' - )[0]; ?>" - height="<?php echo getimagesize( - $_SERVER['DOCUMENT_ROOT'] . '/images/mountains.jpg' - )[1]; ?>" > + <?php + $width = getimagesize($_SERVER['DOCUMENT_ROOT'] . '/images/mountains.jpg')[0]; + $height = getimagesize($_SERVER['DOCUMENT_ROOT'] . '/images/mountains.jpg')[1]; + $ratio = ((($height / $width) * 100) > 100) ? $height . 'px' : $height / $width * 100 . '%'; + ?> + + <figure> + <a href="/images/mountains.jpg" onclick="return false;"> + <div style="<?php echo 'padding-bottom:' . $ratio . ';'; ?>"> + <img data-image-zoom alt="Mountains" src="/images/mountains.jpg" + width="<?php echo $width; ?>" + height="<?php echo $height; ?>" + > + </div> + </a> + </figure> <div class="content"> diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/image.html b/generators/hugo/themes/tdro/layouts/shortcodes/image.html index cc2ce0b..a49ed94 100644 --- a/generators/hugo/themes/tdro/layouts/shortcodes/image.html +++ b/generators/hugo/themes/tdro/layouts/shortcodes/image.html @@ -1,13 +1,16 @@ {{ safeHTML "<?php" }} -$width = '"' . getimagesize($_SERVER['DOCUMENT_ROOT'] . '{{.Get `source`}}')[0] . '"'; -$height = '"' . getimagesize($_SERVER['DOCUMENT_ROOT'] . '{{.Get `source`}}')[1] . '"'; +$width = getimagesize($_SERVER['DOCUMENT_ROOT'] . '{{.Get `source`}}')[0]; +$height = getimagesize($_SERVER['DOCUMENT_ROOT'] . '{{.Get `source`}}')[1]; +$ratio = ((($height / $width) * 100) > 100) ? $height . 'px' : $height / $width * 100 . '%'; {{ safeHTML "?>" }} <figure> <a href="{{.Get `source`}}" onclick="return false;"> + <div {{ safeHTMLAttr `<?php echo 'style=' . '"' . 'padding-bottom:' . $ratio . ';' . '"'; ?>` }}> <img data-image-zoom src="{{.Get `source`}}" alt="{{.Get `title`}}" title="{{.Get `title`}}" - {{ safeHTMLAttr "<?php echo 'width=' . $width; ?>" }} - {{ safeHTMLAttr "<?php echo 'height=' . $height; ?>" }} /> + {{ safeHTMLAttr `<?php echo 'width=' . '"' . $width . '"'; ?>` }} + {{ safeHTMLAttr `<?php echo 'height=' . '"' . $height . '"'; ?>` }} /> + </div> </a> <figcaption class="has-text-centered has-text-grey-dark">{{ .Inner }}</figcaption> </figure> diff --git a/public/css/tdro.css b/public/css/tdro.css index 7d34d77..cde77db 100644 --- a/public/css/tdro.css +++ b/public/css/tdro.css @@ -5802,6 +5802,7 @@ a:focus img, /* figure */ +figure div { height: 0; } figcaption { font-size: 0.9em; margin-top: 1.5em; } @@ -5909,6 +5910,7 @@ blockquote p { font-size: 1.3rem !important; color: #333; } @media (max-width: 768px) { .recent__article .columns, .content blockquote, .highlight { clear: both; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .quote { height: 0; } } /* ie quote height fix */ + /* isso comments */ #isso-thread * { |