[acf_txt1] Advanced Image Cropping, Hover & L-Out Management
The layout and key CSS is in the “excerpt” shortcode | Edit SC=excerpt In case of several excerpt SC’s in the page the last SC format variables overrule the others.
Resources
• Card shortcodes in grid layouts | 3 Shortcodes: t1-i1-u1 /posts/sc-t1-i1-u1 • Oppfølging etter kurset | /posts/pge1/ • Image controls | Basic CSS solutions | /posts/img/ • Cropped images | /cropped/ • Stackoverflow.com > how-to-crop-a-rectangular-image-into-a-square-with-css /Detailed: how-to-display-raw-html/ – [ sc name=”autocrop”][ /sc] OUCH!!
Excerpts 1
Cardstart: article class=wrapper_01 | NON PARAMETRIC VERSION
News
Hover cards10
Advanced Image management
• MORE: hover-cards10 • 81522 …
Cardstart: article class=wrapper_01 | PARAMETRIC VERSION
1
LAKE
This enables the automatic generation of cards ...
• MORE: hover-cards10 • 81522 …
Edit SC
‹div class="ØfL1 pw0" style="width:100px; margin-right:10px!important;"› ‹img src="/IMG.jpg" width="100%" class="alignleft" /› ‹div class="Øsub3"›‹b›Click to enlarge‹/b›‹/div›‹/div› ‹a href='/wp-content/uploads/USER2.png' class='popup' data-height='720' data-width='1300' data-scrollbars='0'›
Cardstart: article class=wrapper_01 | NON PARAMETRIC VERSION
News
Hover cards10
Advanced Image management
Caption▷1: ØfL1.25% | Øsub0
• MORE: acf_wys1 + This body_01 uses classical methods. The padding-top used for the text, position:absolute solution, pushes the block and is notOK. ..
Cardstart: article class=wrapper_01 | PARAMETRIC VERSION
1
HYTTE
This too enables the automatic generation of cards ... This too enables the automatic generation of cards ...
Caption▷1: ØfL1.25% | Øsub0
• MORE: acf_wys1 + This body_01 uses classical methods. The padding-top used for the text, position:absolute solution, pushes the block and is notOK. ..
Edit SC
Cardstart: article class=wrapper_01 | NON PARAMETRIC VERSION
Cardstart: article class=wrapper_01 | PARAMETRIC VERSION
News
CUPS
CUPS are for real are for real are for real are for real
Edit SC
Cardstart: article class=wrapper_01 | NON PARAMETRIC VERSION
Cardstart: article class=wrapper_01 | PARAMETRIC VERSION
3
Title 3rd
Next steps. The text classes are not used.
Edit SC
Excerpts
Cardstart: article class=wrapper_01 | NON PARAMETRIC VERSION
News
Hover cards10
Advanced Image management
• MORE: hover-cards10 • 81522 …
Cardstart: article class=wrapper_01 | PARAMETRIC VERSION
1
Exc
This ...
• MORE: hover-cards10 • 81522 …
Edit SC
Cardstart: article class=wrapper_01 | NON PARAMETRIC VERSION
Cardstart: article class=wrapper_01 | PARAMETRIC VERSION
2
Vaucluse en majesté
Customized content per card ...
Edit SC
Cardstart: article class=wrapper_01 | NON PARAMETRIC VERSION
News
Hover cards10
Advanced Image management
Text et
Caption▷1: ØfL1.25% | Øsub0
▷2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 81522 Edit sc cardlet1
Cardstart: article class=wrapper_01 | PARAMETRIC VERSION
News
HOUSE_HIPASS
Advanced Image management
Text et
Caption▷1: ØfL1.25% | Øsub0
▷2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 81522 Edit sc cardlet1
Edit SC
SECTION
ABC
0 No LGC | Box width=100px – No cropping. The image links to a full size view | ‹div class=”ØfL1 pw0″ style=”width:100px; margin-right:10px!important;”›
01
Click to enlarge
 HTML ‹div class="ØfL1 pw0" style="width:100px; margin-right:10px!important;"› ‹img src="/IMG.jpg" width="100%" class="alignleft" /› ‹div class="Øsub3"›‹b›Click to enlarge‹/b›‹/div›‹/div› ‹a href='/wp-content/uploads/USER2.png' class='popup' data-height='720' data-width='1300' data-scrollbars='0'›
CSS 
.ØfL1 {float:left; margin:0 12px 1px 1px!important; overflow:hidden;}
.pw0 {margin:0 0 8px!important; padding:0!important; background-color:rgba(247, 249, 249,1)!important; border:1px solid rgba(225, 225, 240,1)!important;}

pre {margin:0; padding:4px 4px 4px 8px; border:1px dashed rgba(180,160,190,0.5); border-radius:4px; white-space:pre-wrap; line-height:1.3em; color:rgba(100,10,100,1);}

code {font-family:"Courier New", monospace !important; display:grid; color: rgba(28,90,145,1)!important; padding:4px 4px 4px 8px; border:1px dashed rgba(160,180,190,0.3); white-space:pre-wrap; line-height:1.3em; font-weight:500;}
1 No LGC | Box width=100px – No cropping. The image links to a full size view
Click to enlarge
 HTML ‹article class="ØfL1 post_wrap4" style="width:100%"› ‹div class="ØfL1 pw0" style="width:175px; margin-right:10px!important;"› ‹img src="/IMG.jpg" width="100%" class="alignleft" /› ‹div class="Øsub3"›‹b›Click to enlarge‹/b›‹/div›‹/div› ‹a href='/wp-content/uploads/USER2.png' class='popup' data-height='720' data-width='1300' data-scrollbars='0'› CSS 
.ØfL1 {float:left; margin:0 12px 1px 1px!important; overflow:hidden;}
.pw0 {margin:0 0 8px!important; padding:0!important; background-color:rgba(247, 249, 249,1)!important; border:1px solid rgba(225, 225, 240,1)!important;}

pre {margin:0; padding:4px 4px 4px 8px; border:1px dashed rgba(180,160,190,0.5); border-radius:4px; white-space:pre-wrap; line-height:1.3em; color:rgba(100,10,100,1);}

code {font-family:"Courier New", monospace !important; display:grid; color: rgba(28,90,145,1)!important; padding:4px 4px 4px 8px; border:1px dashed rgba(160,180,190,0.3); white-space:pre-wrap; line-height:1.3em; font-weight:500;}
2 LGC | Crop and width=100px in CSS: img c100
HTML ‹div class="post_wrap4" style="margin-right:12px!important"› ‹img class="img c100" style="margin-right:12px!important" src="[ wpbb post:acf type='wysiwyg' name='acf_im1']"/›
CSS
 img.c100 {float:left; width:100px; height:100px; object-fit:cover; object-position:50% 0px; margin:0; overflow:hidden;}
From img c20 – c300 | See posts/squarecrop1
3 The crop ratio is managed by sq-img. The width is set locally in the box style.
‹div class="ØfL1 sq-c pw0" style="width:90px; margin-right:4px;"› ‹ img class="sq-img" src=" /wp-content/uploads/USER3.png " class="aligncenter" / ›‹ /div › 
.sq-c   {position:relative; width:100%;}
.sq-c::after   {content:""; display:block; padding-bottom:100%;}
.sq-img   {position:absolute; width:100%; height:100%; object-fit:cover;}
4 Background-image:url + img class=”center_block
‹ div style="width=100%; padding:25px; background-image:url(/wp-content/uploads/MOOR.gif);" > ‹ img class="center_block pw5" src="/wp-content/uploads/SAFARI_LOGO.png" alt="" width="60%" style="padding:10px;"/ > 
.centerblock {position: absolute; top: 50%; left: 50%; font-size: 18px; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);}
5 image-container
image-container2
‹ div class="ØfL1 p1" style="position:relative; width:25%; height:180px; margin:1px;"> ‹ div class="centerblock" › ‹ div class="image-container2"> image-container2 ‹ /div>‹ /div>‹ /div> 
.image-container2 {background-image: url('/wp-content/uploads/COLOR_02.jpg'); background-size:cover; width:150px; height:20vh; margin:2px; float:left;}
6 aspect_ratio4by3 and centerblock
Position centerblock
.centerblock {position: absolute; top: 50%; left: 50%; font-size: 18px; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);}