Including and formatting images in lists

  • MW17588

    (@mw17588)


    10 years, 2 months ago

    LOVE this plug-in. I’m still relatively new to WP and to CSS, but with a little help, I installed the plug-in so that I could use it to create a RECIPE INDEX by category.

    So for instance, on the Appetizer page that lists all my appetizer recipes, I’ve entered this code:

    [catlist name=”appederve” template=”recipe” customfield_orderby=”aq_custom_recipe_name” numberposts=”100″ order=”ASC” ]

    Works great!

    But now, I want to make it more visually appealing… so I tried inserting this at the beginning of the code {but after “catlist”}:

    thumbnail=yes thumbnail_size=50,50

    This INDEED added the thumbnails, but it added it to the END of the recipe title, and I’d prefer it at the beginning. I’d also like to center the text {recipe name} vertically with the image.

    Here’s one of the recipe index pages: http://www.raisinandfig.com/recipes-2/appedouevres/

    https://wordpress.org/plugins/list-category-posts/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Sofian777

    (@sofian777)

    10 years, 2 months ago

    So you use your own template already, recipe? There you need to switch things, for example taking the line with the thumbs before the title. for alignment you could use a div with vertical-align:center. Actually you need to build this up in the template and your CSS. Maybe try out “dry” offline in a HTML doc how you need to put the HTML and CSS, and then you integrate it into your site’s CSS and the recipe template. You can have a look for inspiration at the source code and CSS of our list which is also done with this plugin here.
    http://imlichte.net/seminare-und-workshops/

    You have a very nice website by the way, i like the way your popular post display in the sidebar. I will also have a look there in your code for inspiration 🙂

    Sofian777

    (@sofian777)

    10 years, 2 months ago

    Sidenote: Now i read again you are relatively new, so i dont know if “you can have a look for inspiration” is clear how to do it. Do you know Firebug? It is a plugin for Firefox which is super useful for webdesigners. It shows you the CSS of every element on the site, in this way you can easily “have a look” into how other sites did their things. Just in case you didn’t know about it yet…

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Including and formatting images in lists’ is closed to new replies.