Tips for achieving an eye-catching text and image layout on a single page of your Wordpress blog

I've been exploring ways to achieve a design concept for my blog layout. I envision having the text and thumbnail displayed side by side, each taking up 50% of the width until the image reaches its end. Once the image ends, I want the text to span the entire page width. Unfortunately, traditional methods like inserting the image in the Wordpress editor or using text-wrap do not meet my needs, as I also want to include a styled line next to the text content within the 50% area.

One idea I'm considering is writing a jQuery/Javascript script that can divide the words and transfer them from the 50% div to the 100% div once the 50% div expands to accommodate the height of the image.

Has anyone encountered a solution similar to this before? What other options might be available to me?

https://i.stack.imgur.com/TqDDf.jpg

javascripthtmljquerycsswordpress

Answer №1

When working with images:

float: left;
width: 50%;

This CSS will help you wrap text around the image and set its width to 50% of the container.

The border may pose a challenge, as the best way to handle it is still uncertain.

.pretend-it-is-an-image {
  height: 100px;
  width: 50%;
  background-color: blue;
  float: left;
  margin-right: 20px;
  color: white;
  text-align: center;
  
}
<span class="pretend-it-is-an-image">Image</span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac nulla vitae nulla consectetur sollicitudin ac vel nisi. Ut fringilla erat augue, quis accumsan nisl aliquet a. Sed tempor libero est, non iaculis leo dignissim quis. Duis sagittis tristique libero. Mauris iaculis mauris eget convallis posuere. Aliquam iaculis tempus nunc. Quisque facilisis mauris arcu, eget lacinia neque elementum eget. Mauris tincidunt nunc suscipit ipsum vulputate, non congue nibh laoreet. Duis nisi lectus, tempus ut mauris id, hendrerit semper enim.

Phasellus commodo faucibus mauris ut commodo. Suspendisse ornare imperdiet nulla sed malesuada. Aenean et pharetra nibh. In auctor purus a mollis venenatis. Pellentesque sodales lorem urna, nec vestibulum massa interdum ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc erat ligula, egestas luctus mattis vitae, hendrerit quis sem. Proin tincidunt suscipit ligula id efficitur. In sed nisi scelerisque, tincidunt turpis eu, euismod dui. Donec bibendum malesuada massa sed vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque convallis pulvinar justo. Phasellus egestas, mi sit amet vehicula laoreet, lorem sapien ultrices mi, sit amet ornare erat orci eu ex.

Maecenas ultrices blandit cursus. Aenean sed elit sodales, pharetra dolor eu, condimentum enim. Donec vitae venenatis mi. In ut quam tristique ex aliquam gravida. Vestibulum a maximus dui. Proin enim diam, imperdiet tincidunt nulla dictum, tincidunt consectetur diam. Phasellus varius faucibus tristique.

</p>

Where to make changes? Since you mentioned Wordpress, these adjustments are typically made in the single.php file. For more guidance on where to implement changes, refer to this link: https://developer.wordpress.org/themes/basics/template-hierarchy/

Answer №2

attempt:

<img src="images/topics/topic.jpg" align="left" style="width:50%; border-right:2px solid #000; padding:7px; margin-right:7px;"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to convert an object with values into an array containing those values

To process the JSON data and convert it into an array with the same values for insertion into my PostgreSQL database using pool.query(message, values), where values should be an array if multiple are present. Currently, my object structure is as follows: { ...

javascriptnode.jsreactjs

Guide on converting JSON encoded data into a JavaScript array

I have a few web pages that display results in the following format: [{"id":"1","company":"Gaurishankar","bus_no":"JHA 12 KH 1230"}, {"id":"2","company":"Gaurishankar","bus_no":"BA 2 KH 2270"}] Now, I want to take this JSON encoded data and use it in a J ...

javascriptjqueryjson

Troubleshooting Event.target Problem in Firefox 6

When working in Firefox 6, I encountered an issue while trying to identify the target element on which the event occurred. Instead of displaying the desired element, it was showing as undefined in the alert message. Utilizing the Firebug tool for debugging ...

javascriptfirefoxdom-events

What is the best way to create an array within an object during the parsing process

When working with a JSON object, I need to assign a value stored in the session against an ID. The JSON data is as follows: [ { "id": "a", "text": "a", "icon": true, "li_attr": { "id": "a" }, "a_attr": { "href": "#" ...

javascriptjqueryjson

Obtaining data from a callback function within a NodeJS application

There is a function in my code that performs a backend call to retrieve an array of names. The function looks something like this: module.exports.getTxnList = function(index, callback) { ....some operations ..... .... callback(null, respon ...

javascriptnode.jsfunctioncallback

Issue with Java Script inheritance in google.maps.OverlayView not functioning as expected

UPDATE: After spending another day working on this, I believe I have identified the issue, although it is not yet confirmed. Once I have verified the solution, I will update this post with an answer. My current understanding is that the problem arises fro ...

google-mapsgwtjavascript

Issue with pushing inner list<object> in Knockout version 3.2.0

Currently, I am working with knockout.js on an ASP application. The issue I am facing involves a list of objects returned by the controller action to the view, where the objects in the list point to another list of objects. My struggle lies in adding new o ...

javascriptc#jqueryknockout.jsknockout-mvc

What seems to be the issue with the useState hook in my React application - is it not functioning as

Currently, I am engrossed in a project where I am crafting a Select component using a newfound design pattern. The execution looks flawless, but there seems to be an issue as the useState function doesn't seem to be functioning properly. As a newcomer ...

javascriptreactjstypescriptnext.jstailwind-css

What is the best way to display compiled Transcluded HTML in Angular?

I am facing a challenge in trying to display customized HTML content using Angular directives for nesting divs multiple times. When I execute the code below, the transcluded tag is displayed correctly but the browser output shows the string text " ". I att ...

javascriptangularjsangular-directiveangularjs-ng-transcludetransclusion

"Utilize Angular's $http options for requesting instead of using

When I attempt to send a $http POST request to a server API, the request method unexpectedly changes to OPTIONS. Strangely, this issue only occurs when working with localhost. To troubleshoot, I tried making the same request using Postman and it worked fla ...

javascriptangularjsapihttppost

An autocomplete CSS editor with Firebug-like features

Looking for a CSS (or HTML) editor that offers code autocompletion similar to Firebug's features. I believe it's referred to as "autocomplete as you type." Thank you! Edit: I came across a tool called Zen Coding that provides shortcuts for cod ...

htmlcss

Is there a way to adjust the font size in Javascript/Html without changing the color?

I have a code snippet that creates a button to increment a variable, and I want to change the font size of the displayed variable. This code is for a game akin to cookie clicker. <div class="game-object"> <script type="text/javascript>"; var c ...

javascripthtml

Troubleshooting: Issues with jQuery animate() not functioning properly when adjusting CSS

Currently, I am experimenting with jQuery's .animate() function to change the background of a div when it is scrolled more than 100 pixels down a page. Previously, I had successfully used .css() for this purpose. JS: $(window).scroll(function () { ...

jqueryhtmlcss

Preventing event propagation in Angular when clicking

What is the best way to call an Angular function within my jQuery code? I attempted to do so with the following: $(document).on('click', '.myBtn', function(e) { angular.element($(".someClass")).scope().clearBtnItems(); e.stop ...

javascriptjqueryangularjsstoppropagation

When utilizing $resource, Protractor experiences a timeout while trying to synchronize with the page

Currently, I am testing Protractor with a small AngularJS application. Here is the test scenario: describe('Testing Protractor', function() { var draftList; it('should count the number of drafts', function() { browser.get(&ap ...

javascriptangularjsangularjs-resourceprotractor

Leverage the power of effekt in your AngularJS development

Can anyone demonstrate how to implement animation effects with AngularJS? Has someone created an example using Effeckt.css? ...

cssangularjsangularjs-animation

PHP ajax needs to solely showcase error messages upon form submission

When I submit my form data to a PHP file, it checks for any errors. However, it also returns success before redirecting through AJAX. My goal is to only display an error message if there is one, and if successful, redirect to another page. AJAX: $("#msf ...

phpjqueryajax

Transfer attributes, but have exclusions in React

At times, we all have a common practice of wrapping DOM elements in custom components. <CustomComponet id="abc" title="abc" nonDomProp="abc" ...andsoforth /> In this example, the custom component wraps a button with pr ...

javascriptreactjsspread

Troubleshooting: Issues with jQuery's Class selector

Having trouble setting up an alert to trigger when a specific class anchor tag is clicked inside a div. This is what my HTML section looks like... <div id="foo"> <a class='bar' href='#'>Next</a> </div> And h ...

javascriptjqueryhtmlselector

Replace the hyperlink with plain text using JQuery

Is there a way to replace a hyperlink within an li element with different text but without removing the entire list item? <li class="pull-left"> <a href="#" class="js-close-post" data-post-id="1"> Close </a> </li> ...

javascriptjqueryhtml