more info on image size calculations and class definitions

  • marcnyc

    (@marcnyc)


    3 years, 10 months ago

    I am looking at what WP does to images that are being uploaded and I see that after uploading only one image it creates 3 of them:

    <div class="wp-block-image">
<figure class="alignleft size-large is-resized"><img
src="https://www.x.com/wp/wp-content/uploads/2020/05/y-1.jpg"
alt="" class="wp-image-18233" width="499" height="299"
srcset="https://www.x.com/wp/wp-content/uploads/2020/05/y-1.jpg 555w, https://www.x.com/wp/wp-content/uploads/2020/05/y-1-300x179.jpg 300w, https://www.x.com/wp/wp-content/uploads/2020/05/y-1-150x90.jpg 150w"
sizes="(max-width: 499px) 100vw, 499px" /></figure></div>

    I have two questions:
    1. how are these new dimensions decided? are 555, 300 and 150 standard widths? Is there a golden rule?
    2. Where does the class “wp_image-18233” come from? what is the number 18233? it’s not the ID of the post…

    Thank you

    • This topic was modified 3 years, 10 months ago by Jan Dembowski.
Viewing 4 replies - 16 through 19 (of 19 total)
1 2
  • Thread Starter marcnyc

    (@marcnyc)

    3 years, 10 months ago

    Hello @joyously
    thank you for all your help and patience throughout.
    After lots of reading I was able to create everything that I wanted to do.
    I have a function that adds my post to the database and then uploads & resizes the image attachments and creates the metadata in the database so all the backend is taken care of.
    I also found the wp_get_attachment_image() image so I can call that image for the HTML output.
    Now the very last step I’m trying to figure out is: how to create the <figure> tag. Is there a WP function for that or do I need to enter it manually into my post contents? I searched the reference manual but can’t find anything with “figure”.
    Thank you

    • This reply was modified 3 years, 10 months ago by marcnyc.
    Joy

    (@joyously)

    3 years, 10 months ago

    I will assume that you mean when your function adds a post to the database, you want that post to refer to the attachment. It’s kind of like “which comes first, chicken or egg?”
    In importer plugins, the post is already complete, so they create the post first, remember the ID, then create the attachment (using post ID as “parent”), and perhaps have to fix the attachment ID in the post content (not sure about that).
    Your scenario is a little different because the post isn’t complete. You can do it more like a person would: upload the attachment first, remember that ID, then use it (generate the HTML you prefer with attachment link) in post content, then insert the post. Doing this, you probably still have to go back and add the post ID as “parent” to the attachment so it’s attached.
    This is where looking at plugin code helps.

    WP has some functions for front end output. They are referred to as “template tags” which themes use. The editor generates HTML for images, so there is something in the Media Flow code for that, but it’s a different context so I don’t know about it (is it PHP or JS?).

    Thread Starter marcnyc

    (@marcnyc)

    3 years, 10 months ago

    Sorry if I wasn’t clear.
    I have all the functions to do the things you describe and once I have both the post and its images inserted into the DB I need to update the post’s contents with what will be the HTML output.
    When doing so I use wp_get_attachment_image() which creates the <img... tag but how do I create the <figure... tag that I see in the posts that WP creates (see below)? Is there a function to create the <figure… tag?

    <div class="wp-block-image">
<figure class="alignleft size-large is-resized"><img
src="https://www.x.com/wp/wp-content/uploads/2020/05/y-1.jpg"
alt="" class="wp-image-18233" width="499" height="299"
srcset="https://www.x.com/wp/wp-content/uploads/2020/05/y-1.jpg 555w, https://www.x.com/wp/wp-content/uploads/2020/05/y-1-300x179.jpg 300w, https://www.x.com/wp/wp-content/uploads/2020/05/y-1-150x90.jpg 150w"
sizes="(max-width: 499px) 100vw, 499px" /></figure></div>
    Joy

    (@joyously)

    3 years, 10 months ago

    There might be a server-side render function for the image block. I don’t know. I ignore blocks.
    If you want to edit the post later in the block editor, you should use block markup (which includes the comments, as those contain the attributes the editor uses). But you can use any HTML you want. It will be treated like a Classic block (or try to convert it) in the block editor, or simply post content in the Classic editor.

Viewing 4 replies - 16 through 19 (of 19 total)
1 2
  • The topic ‘more info on image size calculations and class definitions’ is closed to new replies.