recipe shortcode huge display images

  • Unknown's avatar
    dfrankogletree · Member ·

    I am teaching myself wordpress to replace my old tumblr recipe blog. When I display the shortcode recipe example in my blog

    https://dmptest8.wordpress.com/2023/05/24/recipe-test/

    The image is much wider than the other elements. I am using site editing theme “Twenty Twenty-Three”. Is there a way to “look under the hood” to fix/change the shortcode? Or control the display size in the Theme? I tried to add an HTML image display attribute but my guess for the syntax was no good.

    I got the same result with one of my own media library files.

    Thanks, Frank

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    dfrankogletree · Member ·

    The blog I need help with is actually dmptest8.wordpress.com

  • staff-totoro · Staff ·

    Hi there,

    I was able to replicate this issue so I’ve reported this info to our engineers so they can take a closer look. The shortcode is an older way of formatting recipes (before we had a modern block editor) so it seems to now work correctly on themes that are designed with 100% blocks support in mind. For the time being there may be a few workarounds, and we can update you if a fix is employed from our side.

    Option 1 – Create the layout using blocks

    You could consider creating this layout using blocks, which would give you a similar appearance, but with more flexibility in how you present the layout. Also it would be much more straightforward than working with the shortcode directly. You could use a Ratings Block for the stars and create the rest using text/image blocks

    WP
    Blocks » Ratings Block
    in WordPress.com Support
    1 min read
    Use the ratings block to rate movies, books, songs, recipes — anything you can put a number on. ⭐⭐⭐⭐⭐ Rating: 4.5 out of 5. Adding the BlockHalf-Symbol RatingsColor CustomizationAdvanced Adding the Block The block can be added to a page by clicking on the Add Block button. It can be found in the Widgets section. Alternatively, you c

    You could even save this initial layout as a reusable block so you can use the same formatting for future recipes. https://wordpress.com/support/wordpress-editor/blocks/reusable-block/

    Option 2 – Add width parameter to HTML

    This is a bit geeky but you can edit the image HTML to add a width parameter. Instead of https://en-support.files.wordpress.com/2014/01/food-dinner-pasta-broccoli.jpg you could use this for example: https://en-support.files.wordpress.com/2014/01/food-dinner-pasta-broccoli.jpg?w=650

    You can add that parameter to any image from your media library and it will scale the image automatically. You may need to test a bit. 650px worked for me in my tests but you can enter any width (in pixels) you wish.

    Hope that helps. Please let us know if you have any more questions.

  • The topic ‘recipe shortcode huge display images’ is closed to new replies.