Jump to content

Recommended Posts

Hello everyone!

I have a markup and image field question:

I have a markup in which a gallery preview should be displayed on home page. This gallery have a special markup, 3 of 4 images have special image ratio.

screenshot-gallery.thumb.png.057f7ae42d06016934e09993b226fed4.png

The gallery looks like this. 

The html markup is like this:

<div class="uk-section-muted" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-top-small; delay: 200;">
        <div data-src="./assets/images/arrahof/home-restaurant-bg.svg" class="uk-background-norepeat uk-background-contain uk-background-top-center uk-section uk-section-large" uk-img>
            <div class="uk-container uk-container-small">
                <div class="uk-margin-large" uk-grid>
                    <div class="uk-width-1-1@m">
                        <h2 class="uk-text-center" uk-scrollspy-class>Das Angebot im ArraHof</h2>
                    </div>
                </div>
                <div class="uk-grid-small uk-grid-margin-small" uk-grid>
                    <div class="uk-width-expand@s">
                        <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class>
                            <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#">
                                <img class="el-image" data-src="https://via.placeholder.com/610x604" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="604" alt="Placeholder Image" uk-img>
                                <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div>
                                <div class="uk-position-center uk-position-small">
                                    <div class="uk-overlay uk-padding-large uk-transition-fade uk-margin-remove-first-child">
                                        <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">Lorem Ipsum</h3>
                                        <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="uk-width-expand@s">
                        <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class>
                            <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#">
                                <img class="el-image" data-src="https://via.placeholder.com/610x604" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="604" alt="Placeholder Image" uk-img>
                                <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div>
                                <div class="uk-position-center uk-position-small">
                                    <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child">
                                        <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3>
                                        <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="uk-grid-small uk-grid-margin-small" uk-grid uk-height-match="target: .uk-card; row: false">
                    <div class="uk-width-2-3@s">
                        <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class>
                            <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#">
                                <img class="el-image" data-src="https://via.placeholder.com/610x400" data-width="610" data-height="400" alt="Placeholder Image" uk-img>
                                <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div>
                                <div class="uk-position-center uk-position-small">
                                    <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child">
                                        <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3>
                                        <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="uk-width-expand@s">
                    <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class>
                        <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#">
                            <img class="el-image" data-src="https://via.placeholder.com/610x820" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="820" alt="Placeholder Image" uk-img>
                            <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div>
                            <div class="uk-position-center uk-position-small">
                                <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child">
                                    <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3>
                                    <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="uk-margin-large" uk-grid>
            <div class="uk-width-1-1@m">
                <div class="uk-text-lead uk-width-xxlarge uk-margin-auto uk-text-center" uk-scrollspy-class>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</div>
                <div class="uk-margin-medium uk-text-center" uk-scrollspy-class>
                    <a class="el-content uk-button uk-button-default uk-button-large" href="#">Unterkunft</a>
                </div>
            </div>
        </div>
    </div>
</div>

How can I achieve when I have an image field to add the custom markup within the image field? I have no clue to get this done.

Thank you!

Share this post


Link to post
Share on other sites

Anything that repeats in any programming language calls for, invariably, something you can iterate/traverse (e.g. an array) and the tool you use for the traversal/looping, (e.g. foreach). Let's go with these two.

Looking at the UIkit markup you've pasted, I suppose some of the classes are automatically injected by UIkit JavaScript. However, the basic structure of the markup that repeats is the same. Hence, I'll ignore markup classes for now.

The main differences in the images ratio markup are the following:

The main containers for the images vary in the class they have. The first, the second and the fourth have the class:

<div class="uk-width-expand@s">...</div>

The 3rd image container has a different class:

<div class="uk-width-2-3@s">...</div>

Secondly, the <img> markup themselves have different values for their data-height attribute.

Hence, we will need some variable to store these differences. Although some of the values are shared, for instance, the class for the main images container for the 1st, 2nd and 4th images (as stated above), I prefer to store each image's values separately. This can help down the line if the markup changes resulting in different values that were previously identical.

Although it may be simple to assume that the images in your image field (which I will refer to as images) are already arranged in order and are in the correct size, from experience, we know that this will most likely NOT be the case. Clients can upload images that are not of the correct size and arrange them randomly. You may need to cater for this, e.g. have the clients tag the images with first, second, etc....but that may be too much work. 

OK, for the fun part. 

Please note that in the examples below, I only focus on the images' container part. I have also left in the CSS just for reference, although they may be auto-injected as stated above.

We have at least two ways to loop through our images. Both ways involve having an array that will have 4 nested arrays, one each for our 4 images. The first way to loop through our images is to loop through the images themselves and access the array with images info inside this loop as shown below:

Spoiler

$imagesInfo = array(
    0 => array('height' => 604, 'container_class' => 'expand@s'),
    1 => array('height' => 604, 'container_class' => 'expand@s'),
    2 => array('height' => 400, 'container_class' => '2-3@s'),
    3 => array('height' => 820, 'container_class' => 'expand@s'),
);
$galleryPage = $pages->get("/gallery/");
$counter = 0;
$out = "";


foreach($galleryPage->images as $image) {

    // grab the info for the current image
    $imageInfo = $imagesInfo[$counter];
    $containerClass = $imageInfo['container_class'];
    $height = $imageInfo['height'];

    $out .= "
        <div class='uk-width-{$containerClass}'>
            <div class='uk-margin-remove-vertical uk-text-center' uk-scrollspy-class>
            <a class='el-container uk-inline-clip uk-transition-toggle uk-link-reset' href='#'>
                <img class='el-image' data-src='{$image->url}'
                    data-sizes='(min-width: 610px) 610px' data-width='610' data-height='{$height}'
                    alt='{$image->description}' uk-img>
                <div class='uk-overlay-default uk-transition-fade uk-position-cover'></div>
                <div class='uk-position-center uk-position-small'>
                    <div
                        class='uk-overlay uk-padding-large uk-transition-fade uk-margin-remove-first-child'>
                        <h3
                            class='el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom'>
                            Lorem Ipsum</h3>
                        <div class='el-content uk-panel uk-transition-slide-bottom-small uk-margin-top'>
                            Comfort Food</div>
                    </div>
                </div>
            </a>
        </div>
    </div>   
    
    ";

    // increment counter
    $counter++;

}


echo $out;

 

 

The main downside to the above approach is we are assuming there will always be four images in the images field. What if a client adds more? What if there are less images? All these will require adding checks in the code (within the loop) to check how many images we have. To counter some of these challenges, we can instead loop through the array with the info for images as shown below:

 

Spoiler

$imagesInfo = array(
    0 => array('height' => 604, 'container_class' => 'expand@s'),
    1 => array('height' => 604, 'container_class' => 'expand@s'),
    2 => array('height' => 400, 'container_class' => '2-3@s'),
    3 => array('height' => 820, 'container_class' => 'expand@s'),
);
$galleryPage = $pages->get("/gallery/");
$images = $galleryPage->images;
$out = "";


foreach($imagesInfo as $i => $value) {

    // get the image corresponding to the index
    $image = $images->eq($i);

    // grab the info for the current image
    $containerClass = $value['container_class'];
    $height = $value['height'];

    $out .= "
        <div class='uk-width-{$containerClass}'>
            <div class='uk-margin-remove-vertical uk-text-center' uk-scrollspy-class>
            <a class='el-container uk-inline-clip uk-transition-toggle uk-link-reset' href='#'>
                <img class='el-image' data-src='{$image->url}'
                    data-sizes='(min-width: 610px) 610px' data-width='610' data-height='{$height}'
                    alt='{$image->description}' uk-img>
                <div class='uk-overlay-default uk-transition-fade uk-position-cover'></div>
                <div class='uk-position-center uk-position-small'>
                    <div
                        class='uk-overlay uk-padding-large uk-transition-fade uk-margin-remove-first-child'>
                        <h3
                            class='el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom'>
                            Lorem Ipsum</h3>
                        <div class='el-content uk-panel uk-transition-slide-bottom-small uk-margin-top'>
                            Comfort Food</div>
                    </div>
                </div>
            </a>
        </div>
    </div>   
    
    ";

}

echo $out;

 

This is just basic code to get you started. There are a number of things that could be improved. For instance, you may want ProcessWire to resize the images for you (done once) rather than depending on your browser to contain larger images. See the Resize and crop section in the API documentation here. There are alternative approaches as well to the examples shown above. 

PS: code untested

 

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

Thank you for your help!!!

This get me started to work out my gallery block!!!

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By calago
      after the migration to version 3.0.145 our export templates all of a sudden dont work properly, 
      we have a functionality where we use a boiler template with a set of fields. for some reason since the upgrade when we select the export template to export it. it wont show any of the fields added after the migration, 

      as you can see the offer certificate remarks field has been added to the export, 
      but when we select it it wont come trough

    • By Guy Incognito
      This short script loops through some images from an XML feed and pushes new ones to an image field. It all works perfectly, except for some reason the last image (only) in the loop each time doesn't receive the image description... can everyone spot why? TIA! 🙂 
      foreach ($propertyImages as $img) { $fileName = trim($img[0]); if ( !empty($fileName) ) { $imgPath = '../property_data/'.$fileName; if(file_exists($imgPath) && !in_array(strtolower($fileName),$currentImages)) { $p->property_images->add($imgPath); $p->save(); $newImg = $p->property_images->last(); $newImg->description = $img[1]; $p->save(); } } }  
    • By Mike Rockett
      Docs & Download: rockettpw/seo/markup-sitemap
      Modules Directory: MarkupSitemap
      Composer: rockett/sitemap
      MarkupSitemap is essentially an upgrade to MarkupSitemapXML by Pete. It adds multi-language support using the built-in LanguageSupportPageNames. Where multi-language pages are available, they are added to the sitemap by means of an alternate link in that page's <url>. Support for listing images in the sitemap on a page-by-page basis and using a sitemap stylesheet are also added.
      Example when using the built-in multi-language profile:
      <url> <loc>http://domain.local/about/</loc> <lastmod>2017-08-27T16:16:32+02:00</lastmod> <xhtml:link rel="alternate" hreflang="en" href="http://domain.local/en/about/"/> <xhtml:link rel="alternate" hreflang="de" href="http://domain.local/de/uber/"/> <xhtml:link rel="alternate" hreflang="fi" href="http://domain.local/fi/tietoja/"/> </url> It also uses a locally maintained fork of a sitemap package by Matthew Davies that assists in automating the process.
      The doesn't use the same sitemap_ignore field available in MarkupSitemapXML. Rather, it renders sitemap options fields in a Page's Settings tab. One of the fields is for excluding a Page from the sitemap, and another is for excluding its children. You can assign which templates get these config fields in the module's configuration (much like you would with MarkupSEO).
      Note that the two exclusion options are mutually exclusive at this point as there may be cases where you don't want to show a parent page, but only its children. Whilst unorthodox, I'm leaving the flexibility there. (The home page cannot be excluded from the sitemap, so the applicable exclusion fields won't be available there.)
      As of December 2017, you can also exclude templates from sitemap access altogether, whilst retaining their settings if previously configured.
      Sitemap also allows you to include images for each page at the template level, and you can disable image output at the page level.
      The module allows you to set the priority on a per-page basis (it's optional and will not be included if not set).
      Lastly, a stylesheet option has also been added. You can use the default one (enabled by default), or set your own.
      Note that if the module is uninstalled, any saved data on a per-page basis is removed. The same thing happens for a specific page when it is deleted after having been trashed.
          
    • By Robin S
      This module is inspired by and similar to the Template Stubs module. The author of that module has not been active in the PW community for several years now and parts of the code for that module didn't make sense to me, so I decided to create my own module. Auto Template Stubs has only been tested with PhpStorm because that is the IDE that I use.
      Auto Template Stubs
      Automatically creates stub files for templates when fields or fieldgroups are saved.
      Stub files are useful if you are using an IDE (e.g. PhpStorm) that provides code assistance - the stub files let the IDE know what fields exist in each template and what data type each field returns. Depending on your IDE's features you get benefits such as code completion for field names as you type, type inference, inspection, documentation, etc.
      Installation
      Install the Auto Template Stubs module.
      Configuration
      You can change the class name prefix setting in the module config if you like. It's good to use a class name prefix because it reduces the chance that the class name will clash with an existing class name.
      The directory path used to store the stub files is configurable.
      There is a checkbox to manually trigger the regeneration of all stub files if needed.
      Usage
      Add a line near the top of each of your template files to tell your IDE what stub class name to associate with the $page variable within the template file. For example, with the default class name prefix you would add the following line at the top of the home.php template file:
      /** @var tpl_home $page */ Now enjoy code completion, etc, in your IDE.

      Adding data types for non-core Fieldtype modules
      The module includes the data types returned by all the core Fieldtype modules. If you want to add data types returned by one or more non-core Fieldtype modules then you can hook the AutoTemplateStubs::getReturnTypes() method. For example, in /site/ready.php:
      // Add data types for some non-core Fieldtype modules $wire->addHookAfter('AutoTemplateStubs::getReturnTypes', function(HookEvent $event) { $extra_types = [ 'FieldtypeDecimal' => 'string', 'FieldtypeLeafletMapMarker' => 'LeafletMapMarker', 'FieldtypeRepeaterMatrix' => 'RepeaterMatrixPageArray', 'FieldtypeTable' => 'TableRows', ]; $event->return = $event->return + $extra_types; }); Credits
      Inspired by and much credit to the Template Stubs module by mindplay.dk.
       
      https://github.com/Toutouwai/AutoTemplateStubs
      https://modules.processwire.com/modules/auto-template-stubs/
    • By Robin S
      Another little admin helper module...
      Template Field Widths
      Adds a "Field widths" field to Edit Template that allows you to quickly set the widths of inputfields in the template.

      Why?
      When setting up a new template or trying out different field layouts I find it a bit slow and tedious to have to open each field individually in a modal just to set the width. This module speeds up the process.
      Installation
      Install the Template Field Widths module.
      Config options
      You can set the default presentation of the "Field widths" field to collapsed or open. Field widths entered into the Template Field Widths inputfield are only applied if the Edit Template form is submitted with the Template Field Widths inputfield in an opened state. "Collapsed" is the recommended setting if you think you might also use core inputs for setting field widths in a template context. You can choose Name or Label as the primary identifier shown for the field. The unchosen alternative will become the title attribute shown on hover. You can choose to show the original field width next to the template context field width.  
      https://github.com/Toutouwai/TemplateFieldWidths
      https://modules.processwire.com/modules/template-field-widths/
×
×
  • Create New...