Request : juxtapose image and text

  • Resolved Théo CJ

    (@curiositesjuridiques)


    5 years ago

    Hello everybody,

    First of all, thanks Iulia Cazan for this useful and simple plugin !

    Yet, there is only one more thing I could ask for, it is the wrapping of the IMG (featured image of the recent post) into a DIV.

    For me, this would be useful in order to juxtapose the IMG and the TEXT (picture on the left and title+date+exctract+ReadMore on its right).

    Also, I think it would be nice to be able to fix a siez to this DIV and to be able to put the picture as a background-cover in order to have a fixed featured-pictured size not depending on the size of the original image.

    Thanks a lot for your help if you think there is a way without more developments,
    Thanks a lot if you decide to make this request real !
    Théo

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Iulia Cazan

    (@iulia-cazan)

    Hello,

    I will take a look and get back to you.
    Please point me your website page where you are using this, to see if there is a simple way to do this.

    Regards,
    Iulia

    Thread Starter Théo CJ

    (@curiositesjuridiques)

    Hello,

    Website is https://theo.renaudie.fr
    A simple div around the image and the possibility of make it as a background-cover inside would be very useful to manage the size of the picture in any layout.

    Thanks a lot for your work !

    Regards,
    Theo

    Plugin Author Iulia Cazan

    (@iulia-cazan)

    Hi,

    Just to make sure I understand, do you want to make it look like this?

    View post on imgur.com

    Regards,
    Iulia

    Thread Starter Théo CJ

    (@curiositesjuridiques)

    Hey !

    Yes that would be very nice !

    Thanks again,
    Theo

    Plugin Author Iulia Cazan

    (@iulia-cazan)

    Hello,

    OK. So, to make it look like that, first, you can change the shortcode to have the attribute css="as-overlay light custom-lps", to make the shortcode display the tile using the image as the background. Second, you need to make some styles (this can be added in the customizer Additional CSS) that target the .custom-lps elements.

    The styles I put in place to show you the example is this: 

    .custom-lps article {height: 360px !important; margin-top: 32px;}
.custom-lps article a {font-size: 24px !important; font-weight:bold; text-shadow:0 0px 4px rgba(0,0,0,1.6);}
.custom-lps article a em, .custom-lps article a span  {display: block; text-align:right; color: #EEE; text-shadow: 0 0 2px rgba(0,0,0,0.6); font-weight: normal; font-size: 18px;}
.custom-lps article a p {font-size: 18px !important; line-height: 24px !important; color: #FFF;}
.custom-lps article a h3 {text-transform:uppercase; font-weight:bold; font-size: 28px; color: #FFF;}
.custom-lps .lps-ontopof-overlay {padding: 40px !important; background: rgba(0,0,0,0.4) !important;}
.custom-lps {margin-bottom: 32px;}

    Let me know how it goes.

    Regards,
    Iulia

    • This reply was modified 4 years, 12 months ago by Iulia Cazan.
    Thread Starter Théo CJ

    (@curiositesjuridiques)

    Hi,

    This is what I did : https://theo.renaudie.fr

    My code is : 

    /*Widget Shortcode Articles récents*/

.custom-lps {
	overflow:auto !important;
	display: block !important;
	width: auto !important;
	margin-top: 1em;
	margin-bottom: 1em !important;
	margin-left: auto !important;
	margin-right: auto !important;
	border: solid;
	border-color: rgba(36, 162, 78, 0);
	border-width: 3px;
	-webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
}
.custom-lps:hover {
	border: solid;
	border-color: rgba(36, 162, 78, 1);
	border-width: 3px;
}

.custom-lps {overflow:auto !important;}

.custom-lps > article {
	height:auto !important;
	overflow:hidden !important;
	border-width:0 !important;
	margin-top:0em !important;
	margin-left:auto !important;
	margin-right:auto !important;
	margin-bottom:0em !important;
	padding:0 !important;
}

div.lps-ontopof-overlay {
	min-height:30vh !important;
	height:100% !important;
	width:100% !important;
	font-size: 1em !important;
	position: relative !important;
	overflow:auto !important;
margin-top: -1px !important;
	background: rgba(0, 0, 0, 0.3) !important;
	
	-webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
}

div.lps-ontopof-overlay:hover {
	background: rgba(46, 62, 79, 0.9) !important;
}

.lps-ontopof-overlay  > a {
	position: relative !important;
	height:auto !important;
	overflow:auto !important;
padding: 1em !important;
margin: auto !important;}

div.lps-ontopof-overlay > a > h3 {
	text-align: center !important;
	font-size:1.5em;
	font-weight:400;}

div.lps-ontopof-overlay > a > p {
	text-align: justify !important;
	font-size:1em !important;
line-height: 1em !important;}

article > div.lps-ontopof-overlay > a > span {
	font-size:0.8em;
	display: none;
  width: fit-content !important;
	margin-left: auto;
	margin-right: auto;
}

article > div.lps-ontopof-overlay > a > em {
	font-size:0.8em;
	margin-bottom: 0.5em;
	display: block !important;
	text-align: right !important;
}

.latest-post-selection article p:after {
content: "...";
}

    Thanks a lot for your help !
    Regards,
    Theo

    • This reply was modified 4 years, 12 months ago by Théo CJ.
    Plugin Author Iulia Cazan

    (@iulia-cazan)

    Hi Theo,

    This looks great! I’m glad you made it look as you needed. Please do not forget to rate my plugin or donate (or both), it would help me a lot.

    Regards,
    Iulia

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Request : juxtapose image and text’ is closed to new replies.