FeenixMakers
/
merged
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix image size and crop and bg alignemnt options

This commit is contained in:
Torsten 2023-01-16 23:18:49 +02:00
parent 73cf70d74f
commit b7251ef135
7 changed files with 52 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
app/assets/stylesheets/merged/merged.css
View File

@ -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;

8
app/controllers/merged/images_controller.rb
View File

@ -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

4
app/helpers/merged/view_helper.rb
View File

@ -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}

19
app/models/merged/image.rb
View File

@ -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

4
config/merged/option_definitions.yml
View File

@ -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

2
test/dummy/merged/sections.yml
View File

@ -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

7
test/models/image_test.rb
View File

@ -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