Git Product home page Git Product logo

Comments (7)

alexadark avatar alexadark commented on August 21, 2024 1

Thanks, it works now !
Sorry, i am really the queen of the typo, and i can pass hours without seeing it, turning myself crazy and everybody around !

from typerocket.

alexadark avatar alexadark commented on August 21, 2024 1

And this is why i love timber / twig and templating languages

<div class="swiper-container">
    <!-- Additional required wrapper -->
    <ul class="swiper-wrapper">
        <!-- Slides -->
        {% set slides = post.slides %}
        {% for slide in slides %}
        {% set imgId = TimberImage(slide.slide_image) %}
        <li class="swiper-slide" style="background-image:url({{ imgId.src | e('esc_url') }})">
            <div class="uk-container uk-overlay uk-position-bottom">
                <div class="slider-text">{{ slide.slide_text | e('esc_html') }}
                </div>
                <div class="spacer"></div>
                <div class="slider-subtext">{{ slide.slide_subtext | e('esc_html') }}
                </div>
            </div>
        </li>
        {% endfor %}
    </ul>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

</div>

really nicer code
hey, are you adding code coloring here, mine stills black and white

from typerocket.

kevindees avatar kevindees commented on August 21, 2024 1

I need to get Twig setup in version 3.1 of Typerocket

from typerocket.

Camzilla avatar Camzilla commented on August 21, 2024 1

@alexadark Just lurking around the old tickets and saw your comment about the color coded markdown. Check this out: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code
Bacially on the first line after the first ``` you can define code-language ;)

from typerocket.

kevindees avatar kevindees commented on August 21, 2024

you may need to use wp_get_attachment_url and not wp_get_attachment_image_src https://codex.wordpress.org/Function_Reference/wp_get_attachment_url

If you use wp_get_attachment_image_src be use to reference index 0: https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/#comment-328

from typerocket.

alexadark avatar alexadark commented on August 21, 2024

Yes, i add a problem with that too, but the biggest problem is that i have several slides in each slide
before that i have done it with timber / twig templating language, and the images where working but i was only seeing one slide, and when i dump the slide i can see there is several slides in it...

from typerocket.

kevindees avatar kevindees commented on August 21, 2024

loop also looks off.

<!-- Additional required wrapper -->
<div class="swiper-wrapper">
    <!-- Slides -->
    <?php $slides = tr_posts_field('slides');?>
    <?php foreach ($slides as $slide) : ?>
    <?php $img_id = $slide['slide_image'];?>

    <div class="swiper-slide" style="background-image:url(<?php  wp_get_attachment_url($img_id)  ?>)">

        <div class="uk-container uk-overlay uk-position-bottom">
            <div class="slider-text">
                <?php echo $slide['slide_text']; ?>
            </div>
            <div class="spacer"></div>
            <div class="slider-subtext">
                <?php echo $slide['slide_subtext']; ?>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<!-- If we need pagination -->
    <div class="swiper-pagination"></div>
</div>

from typerocket.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.