set up custom placeholder image(s)

WPPizza – A Restaurant Plugin for WordPress › Support › General Support › set up custom placeholder image(s)

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • 14 April, 2017 at 2:20 pm #27067
    ljuk67
    Participant

      Hi Olly,

      first of all, thanks for a great plugin!

      I would like to set a custom placeholder image so was wondering whether there’s a code snippet for that?

      Would it be possible to set up a different custom placeholder image per category somehow?

      thanks!
      Lukas

      14 April, 2017 at 2:24 pm #27069
      Olly
      Admin & Mod

        it’s pure css (background image)
        the surrounding article element includes a category class (something like wppizza-article-snacks-8 where snack would be the slug and 8 the cat id)

        simple set your css declaration on the background as needed (.wppizza-article-img-placeholder)

        19 April, 2017 at 6:54 am #27136
        ljuk67
        Participant

          Hi Olly,

          awesome, I love it when things are coded properly so that such customisation is straight forward :). Good job, thanks!

          here’s what worked for me:

          .wppizza-article-hlavne-jedlo-53 .wppizza-article-img-placeholder {
          width: 100%; /* changed to cover the entire grid space */
          height: 200px; /* landscape thumbnail for 3 columns grid */
          background: url(yourimage.jpg) center center no-repeat;
          }

          19 April, 2017 at 11:02 am #27138
          Olly
          Admin & Mod

            >here’s what worked for me:
            ok, but why the
            .wppizza-article-hlavne-jedlo-53 ?

            19 April, 2017 at 11:09 am #27139
            ljuk67
            Participant

              I am using a different placeholder image for different category 🙂

              19 April, 2017 at 11:13 am #27140
              Olly
              Admin & Mod

                every article already has a class that denotes the category…..
                i.e something like this should work just fine and avoids having to edit any files (ore mess around with a ton of javascript to achieve such a simple thing)

                .wppizza-article-beverages-7 .wppizza-article-img-placeholder {/* css */}

                where -beverages-7 is slug+catid

                ….just saying

                19 April, 2017 at 11:19 am #27141
                ljuk67
                Participant

                  erm… that’s exactly what I did?

                  hlavne-jedlo-53 is one of the categories, I have a separate CSS code for each category:

                  wppizza-article-<category-name>-<category-id> .wppizza-article-img-placeholder {
                  width: 100%; /* changed to cover the entire grid space */
                  height: 200px; /* landscape thumbnail for 3 columns grid */
                  background: url(yourimage.jpg) center center no-repeat;
                  }

                  19 April, 2017 at 11:22 am #27142
                  Olly
                  Admin & Mod

                    lol. ok.

                    It didn’t actually cross my mind that hlavne-jedlo-53 could be a category. thought it’s a personal prefix of some sort…that will teach me . thanks for the clarification

                    19 April, 2017 at 11:32 am #27143
                    ljuk67
                    Participant

                      🙂 no problem, it’s in slovak, maybe that’s why.

                      thanks!
                      Lukas

                    • Author
                      Posts
                    Viewing 9 posts - 1 through 9 (of 9 total)
                    • The topic ‘set up custom placeholder image(s)’ is closed to new replies.