Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #1489724

    I wonder if it is possible to add two buttons instead of the ”Read more” link in blog posts. Each button with a unique link. I use the Content builder and choose Blog Posts. Under content i use Grid Layout. I need to place 2 buttons in the bottom of each entry instead of a ”Read More” link. I haven´t found anything in forum to solve this. Hope you can help with this.

    Jacob

    #1489740

    Hey jacobedgren4,

    Thank you for the inquiry.

    Unfortunately, this option is not available by default and would require template modifications, such as using custom fields and creating meta boxes for them in the page editor. Another option is to manually create your own grid using columns and text elements in the builder. You can then add a button element in each column and assign the appropriate link.

    Let us know if you need more info.

    Best regards,
    Ismael

    #1489753

    do these buttons have always the same link? or is it an individual link?

    #1489754

    Hi G
    The buttons have individual links for the most part. If there is no way of doing this without a team of programmers, we could use a solution using static links though :)

    Jacob

    #1489755

    If you look at the link i sent and scroll down a bit i want similar buttons in the top row as the row beneath. I built it wrong from the start. I need the events to be posts in order to use scheduling. https://storasoder.se/nojesteaterntestsida/

    #1489757

    you like to do it this way of the first row – but with two buttons : read-more and the link from your featured-image.
    (Title and featured image do link to your events – like on the grid beneath the “biljetter” Button)

    #1489759

    First row correct. Two buttons instead of the read-more link text. One button (button label: Read more) linked to the actual events own website (i e rockyhorror.se). The other button (Tickets) linked to an external ticketseller. I want it to look like the rows underneath but done as posts.

    Jacob

    #1489761

    if you have on all Images the link to your biljetter you can do it this way.

    for styling the “buttons” you may be able to do this too:
    maybe a custom class on those post-sliders would be a good idea – not to influence all post-sliders

    put this to your child-theme functions.php:

    function custom_entry_link(){
    ?>
    <script>
    (function($){
        $(document).ready(function(){
            $('.avia-content-slider .slide-entry').each(function() {
                var readMore = $(this).find('.read-more-link'),
                    biljetterLink = $(this).find('.slide-image').attr('href'),
                    biljetterButton = $('<div class="biljetter"><a href="'+biljetterLink+'" >Biljetter<span class="more-link-arrow avia-svg-icon avia-font-svg_entypo-fontello" data-av_svg_icon="right-open-big" data-av_iconset="svg_entypo-fontello"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="32" viewBox="0 0 15 32" preserveAspectRatio="xMidYMid meet" role="graphics-symbol" aria-hidden="true"><path d="M0.416 27.84l11.456-11.84-11.456-11.904q-0.832-0.832 0-1.536 0.832-0.832 1.536 0l12.544 12.608q0.768 0.832 0 1.6l-12.544 12.608q-0.704 0.832-1.536 0-0.832-0.704 0-1.536z"></path></svg></span></a></div>');
                $(this).closest('.slide-entry').find('.entry-footer').prepend($(biljetterButton));
                $(this).closest('.slide-entry').find('.entry-footer').prepend($(readMore));        
            }); 
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_entry_link');

    with minimal styling:

    .entry-footer {
      display: flex;
      flex-flow: row wrap;
      gap: 20px;
      justify-content: flex-start;
    }

    it looks this way:

    #1489763

    or if you only like to have those buttons if the link goes to a certain string:

    function custom_entry_link_if_biljetter_link(){
    ?>
    <script>
    (function($){
        $(document).ready(function(){
            const triggerString = "juliusbiljettservice";
            $('.avia-content-slider .slide-entry').each(function() {
                var readMore = $(this).find('.read-more-link'),
                    biljetterLink = $(this).find('.slide-image').attr('href');
                    if (biljetterLink && biljetterLink.includes(triggerString)) { 
                        biljetterButton = $('<div class="biljetter"><a href="'+biljetterLink+'" class="biljett-link">Biljetter<span class="more-link-arrow avia-svg-icon avia-font-svg_entypo-fontello" data-av_svg_icon="right-open-big" data-av_iconset="svg_entypo-fontello"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="32" viewBox="0 0 15 32" preserveAspectRatio="xMidYMid meet" role="graphics-symbol" aria-hidden="true"><path d="M0.416 27.84l11.456-11.84-11.456-11.904q-0.832-0.832 0-1.536 0.832-0.832 1.536 0l12.544 12.608q0.768 0.832 0 1.6l-12.544 12.608q-0.704 0.832-1.536 0-0.832-0.704 0-1.536z"></path></svg></span></a></div>');
                        $(this).closest('.slide-entry').find('.entry-footer').prepend($(biljetterButton));
                    }
                    $(this).closest('.slide-entry').find('.entry-footer').prepend($(readMore));        
            });
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_entry_link_if_biljetter_link');

    in this case only a second link is added if it goes to a page with juliusbiljettservice inside the link

    .entry-footer {
      display: flex;
      flex-flow: row wrap;
      gap: 20px;
      justify-content: flex-start;
    }
    
    .entry-footer a {
      display: inline-block;
      padding: 3px 8px;
    }
    
    .entry-footer .read-more-link a {
      background-color: #000;
      color: #FFF !important;
    }
    
    .entry-footer .biljetter a {
      background-color: #bf2e11;
      color: #FFF !important;
    }
    
    .entry-footer a path {
      fill: #FFF;
    }
    #1489772

    Ok thanks. I tried it, alas can not get it to work the way i need. I need the Read more-link to point to different URLs depending on which event it is. Like this:
    Rocky Horror
    Read me > link to rocky horror home page, https://rockyhorror.se/
    Biljetter > link to https://www.juliusbiljettservice.se/events/1324
    And so on and so on.
    Each event different URLs.

    Maybe the code you sent enables that but i´m to thick to understand. If thats the case please explain it like you would to a semi bright person ;)

    Jacob

    #1489773

    if you take the second snippet it will only have two links if the one goes to your juliusbiijettservice pages.

    on the first image in your row – (Snedtänkt) there is the one link and on read-more the other link.

    Here you have it the way it works:
    (click to enlarge the images)

    but on your rockyhorror read-more link and image link are the same ! – so i could not transfer it to the second button .

    #1489774

    so if you only like to link if there are biljetservice links on the images above the titles – then take snippet two from this link

    #1489775

    Thanks a bunch Guenni. Yeah the site is not yet active so i havent set the correct links yet. I think i will be able to get it right though, using your stellar descriptions.

    Ill let you know how it goes.
    Again thanks for the help mate.

    #1489779

    try – and have a look if this fits your needs of “button” look-alike:

    #top .avia-content-slider .slide-entry-wrap {
      display: flex !important;
      flex-flow: row wrap;
      justify-content: space-between;
      gap: 30px;
      
    }
    
    #top .avia-content-slider .slide-entry {
      width: unset;
      flex: 1 1 calc(25% - 30px);
      margin: 0 !important;
      display: flex;
      flex-flow: column wrap;
      background-color: #eee;
      padding: 15px
    }
    
    @media only screen and (max-width:1049px) {
      #top .avia-content-slider .slide-entry {
        flex: 1 1 calc(50% - 30px);
      }
        #top .avia-content-slider .slide-entry a  {
        margin-left: 0;
      }
    }
    
    @media only screen and (max-width:767px) {
      #top .avia-content-slider .slide-entry {
        flex: 1 1 100%;
      }
    }
    
    .slide-content {
      margin-bottom: 60px
    }
    
    .entry-footer {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: auto;
      top: calc(100% - 60px);
      display: flex;
      justify-content:  space-evenly;
      flex-flow: row wrap;
    
    }
    
    .entry-footer a {
      margin-top: 10px;
      display: inline-block;
      padding: 3px 8px;
      transition: all 1s ease;
    }
    
    .entry-footer .read-more-link a {
      background-color: #000;
      color: #FFF !important;
    }
    
    .entry-footer a:hover {
      box-shadow: 0 3px 5px #aaa;
      transform: translateY(-5px) scale(1.03);
    }
    
    .entry-footer .biljetter a {
      background-color: #bf2e11;
      color: #FFF !important;
    }
    
    .entry-footer a path {
      fill: #FFF;
    }

    and check the responsive behaviour aswell.

    #1489816

    Perfect button styling! Thanks.

    Only thing that remains is the Read More button (Läs mer). If the event has its own home page it should link there. For example Rocky Horror show. Read More button (Läs mer) should link to https://rockyhorror.se/
    The same way for Rat Pack, Read More button (Läs mer) should link to https://swinginatthesands.co.uk/ and so on.

    Soon weekend :)

    Jacob

    #1489818

    but where does a link like : https://storasoder.se/nojesteaterntestsida/richard-obriens-rocky-horror-show-the-legendary-rock-roll-musical/
    come from – that is the link you must have set.

    #1489824

    That link is the permalink for the post. Whenever i make a post a permalink is generated (you probably know this;). I looked for ways to change it but can only change the last part…richard-obriens-rocky-horror-show-the-legendary-rock-roll-musical.

    Jacob

Viewing 17 posts - 1 through 17 (of 17 total)
  • You must be logged in to reply to this topic.