The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Keeping text inline with images
notwhatitusedtobe
post Oct 18 2019, 05:19 PM
Post #1





Group: Members
Posts: 3
Joined: 18-October 19
Member No.: 27,019



Hello everyone.

Tumblr just recently changed the way it publishes posts, and now the formatting is all off for my blog.

As an example, here is the way it used to publish posts (the CORRECT way it should look) - https://i.imgur.com/OIH5gfW.png

The HTML for that looks like -
CODE
<p><figure data-orig-width="1324" data-orig-height="512" class="tmblr-full"><img src="https://66.media.tumblr.com/60db52ee9f55806f8c6d88cda08619e2/6f280f06d37ce0be-3a/s540x810/94a6f0b8e78806a4090b21cee4934914092250d8.png" alt="image" data-orig-width="1324" data-orig-height="512"></figure><p><b>October 16th 2019, 4:48 AM</b>  <a href="https://www.imdb.com/title/tt0037635/"><img src="https://66.media.tumblr.com/956070ebe6de03cc8e29e4aec525f29d/tumblr_inline_psspd7BOcN1qc73d6_75sq.png" width="16" height="16" alt="imdb"></a>  <a href="https://www.rottentomatoes.com/m/1005405_dead_of_night"><img src="https://66.media.tumblr.com/d16933d2bfc51f3a6340b7ef7dd4eb5c/tumblr_inline_psspikw5421qc73d6_75sq.png" height="16" width="16" alt="RT"></a><br></p></p>


Now when I post this exact string of HTML into a new post, Tumblr automatically adds new bits to the code after publishing with no ability to prevent it from doing so. Now it looks like this - https://i.imgur.com/71r7FPe.png
CODE
<p><figure data-orig-width="1324" data-orig-height="512" class="tmblr-full"><img src="https://66.media.tumblr.com/60db52ee9f55806f8c6d88cda08619e2/661b76f80710814e-c2/s540x810/1ad63c40777bd5f57883212aa38d0f2a2dd3bf27.png" alt="image" data-orig-width="1324" data-orig-height="512"></figure><p><b>October 16th 2019, 4:48 AM</b>  <a href="https://www.imdb.com/title/tt0037635/"><figure data-orig-height="26" data-orig-width="21"><img src="https://66.media.tumblr.com/2ad93bbb5f2f339a91e20eb97fd60077/661b76f80710814e-49/s540x810/cb341173e7a9ab9cdcacad27ec99f52c3a94834e.png" width="16" height="16" alt="imdb" data-orig-height="26" data-orig-width="21"></figure></a>  <a href="https://www.rottentomatoes.com/m/1005405_dead_of_night"><figure data-orig-height="26" data-orig-width="20"><img src="https://66.media.tumblr.com/05a6f527f517f6c0cfe4cda02eed8932/661b76f80710814e-cc/s540x810/87725d62cf6ba9d23a4679e26abfb114df6c021f.png" height="16" width="16" alt="RT" data-orig-height="26" data-orig-width="20"></figure></a><br></p></p>


It would seem the <figure data-orig-height="26" data-orig-width="21"> code is what's causing the IMDb and Rotten Tomatoes thumbnails to break away from the text of October 16th 2019, 4:48 AM.

Obviously this looks way worse and I would really like it to go back to the nice and tidy way it used to be. Does anyone know a way for me to do so? I tried adding <align="left"> to the img src for the thumbnails but this just moves the thumbnails to the left of the white area but still below the October 16th timestamp.

This is driving me crazy. If anyone can help me, I would be in your debt forever. Seriously

Thank you for any help and have a great day biggrin.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
notwhatitusedtobe
post Oct 18 2019, 05:21 PM
Post #2





Group: Members
Posts: 3
Joined: 18-October 19
Member No.: 27,019



It would seem I posted this thread twice by accident. Mods, I deeply apologize
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dhruva
post Nov 4 2019, 01:32 PM
Post #3


Newbie
*

Group: Members
Posts: 11
Joined: 4-November 19
Member No.: 27,032



QUOTE(notwhatitusedtobe @ Oct 19 2019, 03:49 AM) *

Hello everyone.

Tumblr just recently changed the way it publishes posts, and now the formatting is all off for my blog.

As an example, here is the way it used to publish posts (the CORRECT way it should look) - https://i.imgur.com/OIH5gfW.png

The HTML for that looks like -
CODE
<p><figure data-orig-width="1324" data-orig-height="512" class="tmblr-full"><img src="https://66.media.tumblr.com/60db52ee9f55806f8c6d88cda08619e2/6f280f06d37ce0be-3a/s540x810/94a6f0b8e78806a4090b21cee4934914092250d8.png" alt="image" data-orig-width="1324" data-orig-height="512"></figure><p><b>October 16th 2019, 4:48 AM</b>  <a href="https://www.imdb.com/title/tt0037635/"><img src="https://66.media.tumblr.com/956070ebe6de03cc8e29e4aec525f29d/tumblr_inline_psspd7BOcN1qc73d6_75sq.png" width="16" height="16" alt="imdb"></a>  <a href="https://www.rottentomatoes.com/m/1005405_dead_of_night"><img src="https://66.media.tumblr.com/d16933d2bfc51f3a6340b7ef7dd4eb5c/tumblr_inline_psspikw5421qc73d6_75sq.png" height="16" width="16" alt="RT"></a><br></p></p>


Now when I post this exact string of HTML into a new post, Tumblr automatically adds new bits to the code after publishing with no ability to prevent it from doing so. Now it looks like this - https://i.imgur.com/71r7FPe.png
CODE
<p><figure data-orig-width="1324" data-orig-height="512" class="tmblr-full"><img src="https://66.media.tumblr.com/60db52ee9f55806f8c6d88cda08619e2/661b76f80710814e-c2/s540x810/1ad63c40777bd5f57883212aa38d0f2a2dd3bf27.png" alt="image" data-orig-width="1324" data-orig-height="512"></figure><p><b>October 16th 2019, 4:48 AM</b>  <a href="https://www.imdb.com/title/tt0037635/"><figure data-orig-height="26" data-orig-width="21"><img src="https://66.media.tumblr.com/2ad93bbb5f2f339a91e20eb97fd60077/661b76f80710814e-49/s540x810/cb341173e7a9ab9cdcacad27ec99f52c3a94834e.png" width="16" height="16" alt="imdb" data-orig-height="26" data-orig-width="21"></figure></a>  <a href="https://www.rottentomatoes.com/m/1005405_dead_of_night"><figure data-orig-height="26" data-orig-width="20"><img src="https://66.media.tumblr.com/05a6f527f517f6c0cfe4cda02eed8932/661b76f80710814e-cc/s540x810/87725d62cf6ba9d23a4679e26abfb114df6c021f.png" height="16" width="16" alt="RT" data-orig-height="26" data-orig-width="20"></figure></a><br></p></p>


It would seem the <figure data-orig-height="26" data-orig-width="21"> code is what's causing the IMDb and Rotten Tomatoes thumbnails to break away from the text of October 16th 2019, 4:48 AM.

Obviously this looks way worse and I would really like it to go back to the nice and tidy way it used to be. Does anyone know a way for me to do so? I tried adding <align="left"> to the img src for the thumbnails but this just moves the thumbnails to the left of the white area but still below the October 16th timestamp.

This is driving me crazy. If anyone can help me, I would be in your debt forever. Seriously

Thank you for any help and have a great day biggrin.gif




Actually in the code they inserted {<figure data-orig-height="26" data-orig-width="2px">} this code Because of this code the Thumbnails gets into another line
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th November 2019 - 11:02 PM