From b7251ef1355b6a00f3816eb9f6184f42c892867b Mon Sep 17 00:00:00 2001 From: Torsten Date: Mon, 16 Jan 2023 23:18:49 +0200 Subject: [PATCH] fix image size and crop and bg alignemnt options --- app/assets/stylesheets/merged/merged.css | 269 ++------------------ app/controllers/merged/images_controller.rb | 8 +- app/helpers/merged/view_helper.rb | 4 +- app/models/merged/image.rb | 19 +- config/merged/option_definitions.yml | 4 +- test/dummy/merged/sections.yml | 2 +- test/models/image_test.rb | 7 +- 7 files changed, 52 insertions(+), 261 deletions(-) diff --git a/app/assets/stylesheets/merged/merged.css b/app/assets/stylesheets/merged/merged.css index 098045c..9554c2e 100644 --- a/app/assets/stylesheets/merged/merged.css +++ b/app/assets/stylesheets/merged/merged.css @@ -1449,6 +1449,11 @@ select { margin-right: 0.75rem; } +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + .mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; @@ -1469,11 +1474,6 @@ select { margin-right: 1.5rem; } -.my-2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - .mr-3 { margin-right: 0.75rem; } @@ -2216,6 +2216,10 @@ select { background-clip: padding-box; } +.bg-bottom { + background-position: bottom; +} + .bg-left-bottom { background-position: left bottom; } @@ -2224,10 +2228,6 @@ select { background-position: right bottom; } -.bg-center { - background-position: center; -} - .bg-no-repeat { background-repeat: no-repeat; } @@ -2553,16 +2553,16 @@ select { color: rgb(180 83 9 / var(--tw-text-opacity)); } -.text-black { - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); -} - .text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); } +.text-black { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + .underline { text-decoration-line: underline; } @@ -2629,17 +2629,12 @@ select { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.hover\:border-4:hover { - border-width: 4px; -} - .hover\:border-2:hover { border-width: 2px; } -.hover\:bg-cyan-200:hover { - --tw-bg-opacity: 1; - background-color: rgb(165 243 252 / var(--tw-bg-opacity)); +.hover\:border-4:hover { + border-width: 4px; } .hover\:bg-red-50:hover { @@ -2652,6 +2647,11 @@ select { background-color: rgb(224 242 254 / var(--tw-bg-opacity)); } +.hover\:bg-cyan-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(165 243 252 / var(--tw-bg-opacity)); +} + .hover\:bg-blue-800:hover { --tw-bg-opacity: 1; background-color: rgb(30 64 175 / var(--tw-bg-opacity)); @@ -2688,11 +2688,6 @@ select { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.group:hover .group-hover\:translate-x-0 { - --tw-translate-x: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .group:hover .group-hover\:translate-x-1 { --tw-translate-x: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -2760,10 +2755,6 @@ select { color: rgb(37 99 235 / var(--tw-text-opacity)); } -.prose-headings\:text-inherit :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"] *))) { - color: inherit; -} - @media (prefers-color-scheme: dark) { .peer:focus ~ .peer-focus\:dark\:text-blue-500 { --tw-text-opacity: 1; @@ -2840,10 +2831,6 @@ select { margin-right: 3rem; } - .md\:mt-8 { - margin-top: 2rem; - } - .md\:grid { display: grid; } @@ -2985,220 +2972,6 @@ select { gap: 3rem; } - .lg\:prose-lg { - font-size: 1.125rem; - line-height: 1.7777778; - } - - .lg\:prose-lg :where(p):not(:where([class~="not-prose"] *)) { - margin-top: 1.3333333em; - margin-bottom: 1.3333333em; - } - - .lg\:prose-lg :where([class~="lead"]):not(:where([class~="not-prose"] *)) { - font-size: 1.2222222em; - line-height: 1.4545455; - margin-top: 1.0909091em; - margin-bottom: 1.0909091em; - } - - .lg\:prose-lg :where(blockquote):not(:where([class~="not-prose"] *)) { - margin-top: 1.6666667em; - margin-bottom: 1.6666667em; - padding-left: 1em; - } - - .lg\:prose-lg :where(h1):not(:where([class~="not-prose"] *)) { - font-size: 2.6666667em; - margin-top: 0; - margin-bottom: 0.8333333em; - line-height: 1; - } - - .lg\:prose-lg :where(h2):not(:where([class~="not-prose"] *)) { - font-size: 1.6666667em; - margin-top: 1.8666667em; - margin-bottom: 1.0666667em; - line-height: 1.3333333; - } - - .lg\:prose-lg :where(h3):not(:where([class~="not-prose"] *)) { - font-size: 1.3333333em; - margin-top: 1.6666667em; - margin-bottom: 0.6666667em; - line-height: 1.5; - } - - .lg\:prose-lg :where(h4):not(:where([class~="not-prose"] *)) { - margin-top: 1.7777778em; - margin-bottom: 0.4444444em; - line-height: 1.5555556; - } - - .lg\:prose-lg :where(img):not(:where([class~="not-prose"] *)) { - margin-top: 1.7777778em; - margin-bottom: 1.7777778em; - } - - .lg\:prose-lg :where(video):not(:where([class~="not-prose"] *)) { - margin-top: 1.7777778em; - margin-bottom: 1.7777778em; - } - - .lg\:prose-lg :where(figure):not(:where([class~="not-prose"] *)) { - margin-top: 1.7777778em; - margin-bottom: 1.7777778em; - } - - .lg\:prose-lg :where(figure > *):not(:where([class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; - } - - .lg\:prose-lg :where(figcaption):not(:where([class~="not-prose"] *)) { - font-size: 0.8888889em; - line-height: 1.5; - margin-top: 1em; - } - - .lg\:prose-lg :where(code):not(:where([class~="not-prose"] *)) { - font-size: 0.8888889em; - } - - .lg\:prose-lg :where(h2 code):not(:where([class~="not-prose"] *)) { - font-size: 0.8666667em; - } - - .lg\:prose-lg :where(h3 code):not(:where([class~="not-prose"] *)) { - font-size: 0.875em; - } - - .lg\:prose-lg :where(pre):not(:where([class~="not-prose"] *)) { - font-size: 0.8888889em; - line-height: 1.75; - margin-top: 2em; - margin-bottom: 2em; - border-radius: 0.375rem; - padding-top: 1em; - padding-right: 1.5em; - padding-bottom: 1em; - padding-left: 1.5em; - } - - .lg\:prose-lg :where(ol):not(:where([class~="not-prose"] *)) { - margin-top: 1.3333333em; - margin-bottom: 1.3333333em; - padding-left: 1.5555556em; - } - - .lg\:prose-lg :where(ul):not(:where([class~="not-prose"] *)) { - margin-top: 1.3333333em; - margin-bottom: 1.3333333em; - padding-left: 1.5555556em; - } - - .lg\:prose-lg :where(li):not(:where([class~="not-prose"] *)) { - margin-top: 0.6666667em; - margin-bottom: 0.6666667em; - } - - .lg\:prose-lg :where(ol > li):not(:where([class~="not-prose"] *)) { - padding-left: 0.4444444em; - } - - .lg\:prose-lg :where(ul > li):not(:where([class~="not-prose"] *)) { - padding-left: 0.4444444em; - } - - .lg\:prose-lg :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { - margin-top: 0.8888889em; - margin-bottom: 0.8888889em; - } - - .lg\:prose-lg :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { - margin-top: 1.3333333em; - } - - .lg\:prose-lg :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 1.3333333em; - } - - .lg\:prose-lg :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { - margin-top: 1.3333333em; - } - - .lg\:prose-lg :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 1.3333333em; - } - - .lg\:prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) { - margin-top: 0.8888889em; - margin-bottom: 0.8888889em; - } - - .lg\:prose-lg :where(hr):not(:where([class~="not-prose"] *)) { - margin-top: 3.1111111em; - margin-bottom: 3.1111111em; - } - - .lg\:prose-lg :where(hr + *):not(:where([class~="not-prose"] *)) { - margin-top: 0; - } - - .lg\:prose-lg :where(h2 + *):not(:where([class~="not-prose"] *)) { - margin-top: 0; - } - - .lg\:prose-lg :where(h3 + *):not(:where([class~="not-prose"] *)) { - margin-top: 0; - } - - .lg\:prose-lg :where(h4 + *):not(:where([class~="not-prose"] *)) { - margin-top: 0; - } - - .lg\:prose-lg :where(table):not(:where([class~="not-prose"] *)) { - font-size: 0.8888889em; - line-height: 1.5; - } - - .lg\:prose-lg :where(thead th):not(:where([class~="not-prose"] *)) { - padding-right: 0.75em; - padding-bottom: 0.75em; - padding-left: 0.75em; - } - - .lg\:prose-lg :where(thead th:first-child):not(:where([class~="not-prose"] *)) { - padding-left: 0; - } - - .lg\:prose-lg :where(thead th:last-child):not(:where([class~="not-prose"] *)) { - padding-right: 0; - } - - .lg\:prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) { - padding-top: 0.75em; - padding-right: 0.75em; - padding-bottom: 0.75em; - padding-left: 0.75em; - } - - .lg\:prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) { - padding-left: 0; - } - - .lg\:prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) { - padding-right: 0; - } - - .lg\:prose-lg :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { - margin-top: 0; - } - - .lg\:prose-lg :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { - margin-bottom: 0; - } - .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; diff --git a/app/controllers/merged/images_controller.rb b/app/controllers/merged/images_controller.rb index 597fe2c..bb7b856 100644 --- a/app/controllers/merged/images_controller.rb +++ b/app/controllers/merged/images_controller.rb @@ -31,18 +31,14 @@ module Merged end def scale - mini = MiniMagick::Image.new( @image.full_filename) - mini.resize( "#{params[:scale]}%") - @image.init_file_data + @image.scale( params[:scale] ) @image.edit_save(current_member.email) redirect_to image_path(@image) , notice: "Image was scaled" end def crop - mini = MiniMagick::Image.new( @image.full_filename) size = "#{params[:size_x]}x#{params[:size_y]}+#{params[:off_x]}+#{params[:off_y]}" - mini.crop( size ) - @image.init_file_data + @image.crop( size ) @image.edit_save(current_member.email) redirect_to image_path(@image) , notice: "Image was resized" end diff --git a/app/helpers/merged/view_helper.rb b/app/helpers/merged/view_helper.rb index 89c0e0a..7f3ff3f 100644 --- a/app/helpers/merged/view_helper.rb +++ b/app/helpers/merged/view_helper.rb @@ -26,8 +26,8 @@ module Merged clazz += " bg-fixed" end if(align = section.option("image_align")) - align = "bg-bottom" if align == "center" - # for tailwind: bg-left-bottom bg-right-bottom + # for tailwind: bg-left-top bg-left bg-left-bottom + # bg-top bg-center bg-bottom bg-right-top bg-right-center bg-right-bottom clazz += " bg-#{align}" end {class: clazz , style: style} diff --git a/app/models/merged/image.rb b/app/models/merged/image.rb index 10b1643..256a438 100644 --- a/app/models/merged/image.rb +++ b/app/models/merged/image.rb @@ -32,6 +32,17 @@ module Merged image end + def scale( new_size ) + mini = MiniMagick::Image.new( full_filename) + mini.resize( new_size.to_s + "%") + init_file_size + end + + def crop( to_size ) + mini = MiniMagick::Image.new(full_filename) + mini.crop( to_size ) + init_file_size + end #save an io as new image. The filename is the id, type taken from io def self.create_new(name , tags, io) original , end_ = io.original_filename.split("/").last.split(".") @@ -79,8 +90,14 @@ module Merged "app/assets/images/cms" end - private + def init_file_size + magick_image = MiniMagick::Image.open(full_filename) + self.width = magick_image.width + self.height = magick_image.height + self.size = (magick_image.size/1024).to_i + end + private def asset_root "app/assets/images/" + image_root end diff --git a/config/merged/option_definitions.yml b/config/merged/option_definitions.yml index 701a748..cfd2bb1 100644 --- a/config/merged/option_definitions.yml +++ b/config/merged/option_definitions.yml @@ -113,7 +113,7 @@ - :name: image_align :description: Alignment of images. This affect what stays visible on different size screens. Default is center, but if the focus - of the image is left or right, that may be hoosen. - :values: left center right + of the image is left or right, that may be choosen. + :values: left-top left left-bottom top center bottom right-top right-center right-bottom :default: center :id: 21 diff --git a/test/dummy/merged/sections.yml b/test/dummy/merged/sections.yml index 11eea7e..3d4761f 100644 --- a/test/dummy/merged/sections.yml +++ b/test/dummy/merged/sections.yml @@ -77,7 +77,7 @@ shade_color: black_25 color: solid_blue align: left - :updated_at: 2023-01-04 23:50:28.275902275 +02:00 + :updated_at: 2023-01-16 22:59:32.016250599 +02:00 :page_id: 6 :index: 2 :image_id: 16 diff --git a/test/models/image_test.rb b/test/models/image_test.rb index e7c3fed..d7242bf 100644 --- a/test/models/image_test.rb +++ b/test/models/image_test.rb @@ -23,6 +23,11 @@ module Merged def test_aspect assert_equal first.aspect_ratio , [13,7] end - + def test_init_no_change + image = first + size = image.size + image.init_file_size + assert_equal size , image.size + end end end